/* ==========================================================================
MTG Canarias - Creación de mazos
Se apoya en bcs.css (Bulk Card Search): botones, pestañas, stepper, aviso
flotante y colores. Aquí solo va lo propio del constructor, la vista y el listado.
========================================================================== */
.mcm-app {
--mcm-gold: #b8860b;
--mcm-gold-soft: #fbf3dc;
--mcm-foil: linear-gradient(120deg, #ffd6e7, #d6ecff 35%, #e3ffd6 65%, #fff1c9);
}
/* Todo se adapta al ANCHO DISPONIBLE del contenedor (no al de la pantalla): así se ve bien
tanto en una página a ancho completo como en una columna estrecha del tema. */
.mcm-wrap { container-type: inline-size; container-name: mcm; width: 100%; }
/* Elementor: dentro de un contenedor en columna con «Envolver» activado, el widget no se estira y
Chrome calcula su altura con otro ancho (por el container-type de arriba): la sección queda más
baja que el mazo y el pie se pinta encima. Se le da el ancho completo, salvo que en Elementor se
haya elegido un ancho personalizado para ese widget. */
.elementor-widget:not([class*="elementor-widget__width-"]):has(.mcm-wrap) { width: 100%; }
.bcs-app.mcm-view,
.bcs-app.mcm-list,
.bcs-app.mcm-single { display: block; }
/* Constructor: mismo panel lateral que el resto de la tienda (bcs.css: 21 %, mínimo 280 px,
a partir de 1025 px). Como en [cartas-sueltas], el panel es largo y no se fija al hacer scroll. */
.mcm-builder .bcs-side { position: static; }
.mcm-app h3, .mcm-app h4 { letter-spacing: normal !important; text-transform: none !important; }
.mcm-muted { color: var(--bcs-muted); font-size: 13px; }
/* ---------------------------------------------------------------- Formulario del constructor */
.mcm-builder .bcs-side { display: flex; flex-direction: column; gap: 16px; }
.mcm-field { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0 !important; }
.mcm-field > span { font-size: 12.5px; font-weight: 600; color: #45454a; }
.mcm-field > span em { font-style: normal; font-weight: 500; color: var(--bcs-muted); }
.mcm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mcm-hint { font-size: 12px; color: var(--bcs-muted); line-height: 1.35; }
.mcm-app .mcm-field input[type="text"],
.mcm-app .mcm-field input[type="month"],
.mcm-app .mcm-field select,
.mcm-app .mcm-field textarea,
.mcm-app .mcm-filters select {
width: 100% !important;
height: 48px !important;
padding: 0 14px !important;
border: 1px solid #e3e3e6 !important;
border-radius: 12px !important;
background-color: #fafafb !important;
color: var(--bcs-ink) !important;
font-size: 15px !important;
line-height: 1.3 !important;
outline: none !important;
transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.mcm-app .mcm-field textarea { height: auto !important; padding: 12px 14px !important; resize: vertical; }
.mcm-app .mcm-field select,
.mcm-app .mcm-filters select {
padding-right: 30px !important;
background: #fafafb url("data:image/svg+xml;utf8,") no-repeat right 10px center / 12px !important;
-webkit-appearance: none !important;
appearance: none !important;
}
.mcm-app .mcm-field input:focus,
.mcm-app .mcm-field select:focus,
.mcm-app .mcm-field textarea:focus,
.mcm-app .mcm-filters select:focus {
border-color: var(--bcs-accent) !important;
background-color: #fff !important;
box-shadow: 0 0 0 4px rgba(233, 100, 0, .12) !important;
}
/* Segmentado Público / Privado y zona de destino */
.mcm-seg,
.mcm-zone-pick,
.mcm-viewtoggle { display: inline-flex; gap: 4px; padding: 4px; background: #efeff2; border-radius: 13px; }
.mcm-zone-pick { display: flex; margin-top: 10px; }
.mcm-app .mcm-seg button,
.mcm-app .mcm-zone-pick button,
.mcm-app .mcm-viewtoggle button {
flex: 1;
height: 38px !important;
padding: 0 14px !important;
border: 0 !important;
border-radius: 10px !important;
background: transparent !important;
color: var(--bcs-muted) !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer;
}
.mcm-app .mcm-seg button.is-on,
.mcm-app .mcm-zone-pick button.is-on,
.mcm-app .mcm-viewtoggle button.is-on {
background: #fff !important;
color: var(--bcs-ink) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, .08) !important;
}
.mcm-viewtoggle button svg { width: 17px; height: 17px; vertical-align: middle; }
/* Buscador con sugerencias */
.mcm-searchbox { position: relative; margin-top: 4px; }
.mcm-searchbox > svg { position: absolute; top: 50%; left: 14px; z-index: 1; width: 17px; height: 17px; color: #9a9aa0; transform: translateY(-50%); pointer-events: none; }
.mcm-app .mcm-searchbox input {
display: block;
width: 100% !important;
height: 48px !important;
padding: 0 14px 0 42px !important;
border: 1px solid #e3e3e6 !important;
border-radius: 12px !important;
background: #fafafb !important;
color: var(--bcs-ink) !important;
font-size: 15px !important;
line-height: 48px !important;
outline: none !important;
-webkit-appearance: none !important;
appearance: none !important;
transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.mcm-app .mcm-searchbox input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.mcm-app .mcm-field .mcm-searchbox input[type="text"] { height: 48px !important; padding-left: 42px !important; }
.mcm-app .mcm-searchbox input:focus { border-color: var(--bcs-accent) !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(233, 100, 0, .12) !important; }
.mcm-app ul.mcm-sugg {
position: absolute;
top: calc(100% + 6px);
right: 0;
left: 0;
z-index: 60;
max-height: min(580px, 70vh);
margin: 0 !important;
padding: 6px !important;
overflow-y: auto;
list-style: none !important;
background: #fff;
border: 1px solid var(--bcs-line);
border-radius: 13px;
box-shadow: 0 18px 44px rgba(0, 0, 0, .13);
animation: bcs-in .15s ease backwards;
}
.mcm-app ul.mcm-sugg li { display: flex; flex-direction: column; gap: 1px; margin: 0 !important; padding: 9px 12px !important; list-style: none !important; border-radius: 9px; cursor: pointer; }
.mcm-app ul.mcm-sugg li::before,
.mcm-app ul.mcm-sugg li::marker { content: none !important; }
.mcm-app ul.mcm-sugg li b { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--bcs-ink); }
.mcm-app ul.mcm-sugg li small { font-size: 12px; font-style: italic; color: var(--bcs-muted); }
.mcm-sugg li:hover,
.mcm-sugg li.is-active { background: var(--bcs-soft); }
.mcm-sugg li.is-none { color: var(--bcs-muted); cursor: default; font-size: 13px; }
/* Pegar listado */
.mcm-paste { margin-top: 16px; border-top: 1px solid #f0f0f2; padding-top: 12px; }
.mcm-paste summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--bcs-ink); list-style: none; }
.mcm-paste summary::-webkit-details-marker { display: none; }
.mcm-paste summary::before { content: "+"; display: inline-block; width: 18px; color: var(--bcs-accent); font-weight: 700; }
.mcm-paste[open] summary::before { content: "−"; }
.mcm-paste .bcs-help { margin-top: 8px !important; }
.mcm-app textarea#mcm-list {
display: block;
width: 100% !important;
min-height: 220px !important;
padding: 12px !important;
border: 1px solid #e3e3e6 !important;
border-radius: 11px !important;
background: #fafafb !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
font-size: 12.5px !important;
line-height: 1.6 !important;
outline: none !important;
resize: vertical;
}
.mcm-app textarea#mcm-list:focus { border-color: var(--bcs-accent) !important; background: #fff !important; }
.mcm-check-line { display: flex; align-items: center; gap: 8px; margin: 10px 0 12px !important; font-size: 13px; color: #45454a; cursor: pointer; }
/* ---------------------------------------------------------------- Interruptores */
.mcm-switch { display: inline-flex; align-items: center; gap: 9px; margin: 0 !important; font-size: 13.5px; font-weight: 600; color: #333; cursor: pointer; user-select: none; }
.mcm-app .mcm-switch input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; }
.mcm-switch span { position: relative; width: 38px; height: 22px; flex: none; border-radius: 999px; background: #d9d9de; transition: background-color .2s; }
.mcm-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.mcm-switch input:checked + span { background: var(--bcs-ink); }
.mcm-switch input:checked + span::after { transform: translateX(16px); }
.mcm-switch input:focus-visible + span { outline: 2px solid var(--bcs-accent); outline-offset: 2px; }
/* ---------------------------------------------------------------- Barra superior */
.mcm-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 14px; }
.mcm-toggles { display: flex; flex-wrap: wrap; gap: 18px; padding: 10px 14px; background: #fff; border: 1px solid var(--bcs-line); border-radius: 12px; }
.mcm-app .bcs-btn.mcm-danger { color: var(--bcs-ko) !important; }
.mcm-app .bcs-btn:disabled { opacity: .5; cursor: not-allowed; }
.mcm-menu { position: relative; }
.mcm-menu-list {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 60;
min-width: 230px;
padding: 6px;
background: #fff;
border: 1px solid var(--bcs-line);
border-radius: 12px;
box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
}
.mcm-app .mcm-menu-list button {
display: block !important;
width: 100% !important;
height: auto !important;
padding: 9px 11px !important;
border: 0 !important;
border-radius: 8px !important;
background: none !important;
color: var(--bcs-ink) !important;
font-size: 13.5px !important;
font-weight: 500 !important;
text-align: left !important;
cursor: pointer;
}
.mcm-app .mcm-menu-list button:hover { background: var(--bcs-soft) !important; }
.mcm-app .mcm-menu-list button.is-danger { color: var(--bcs-ko) !important; }
/* ---------------------------------------------------------------- Herramientas: foil, edición, tratamiento */
.mcm-tools {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 20px;
margin-bottom: 18px;
padding: 12px 16px;
background: #fff;
border: 1px solid var(--bcs-line);
border-radius: 12px;
}
.mcm-tool { display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; font-size: 13px; font-weight: 600; color: #45454a; }
.mcm-app .mcm-tool select {
width: auto !important;
min-width: 170px;
max-width: 320px;
height: 36px !important;
padding: 0 30px 0 11px !important;
border: 1px solid #e3e3e6 !important;
border-radius: 10px !important;
background: #fafafb url("data:image/svg+xml;utf8,") no-repeat right 10px center / 12px !important;
color: var(--bcs-ink) !important;
font-size: 13px !important;
-webkit-appearance: none !important;
appearance: none !important;
cursor: pointer;
}
.mcm-app .mcm-tool select:focus { border-color: var(--bcs-accent) !important; outline: none !important; }
/* Buscar en el mazo */
.mcm-findbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mcm-findbar .mcm-searchbox { flex: 1; max-width: 420px; margin: 0; }
.mcm-find-count { font-size: 13px; font-weight: 600; color: var(--bcs-muted); }
/* Comandante en el formulario */
.mcm-cmd-chips { display: flex; flex-direction: column; gap: 6px; }
.mcm-cmd-chips:empty { display: none; }
.mcm-cmd-chip {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 8px 8px 12px;
border: 1px solid #f1dca5;
border-radius: 10px;
background: linear-gradient(180deg, #fffbf0, #fff);
font-size: 14px;
font-weight: 700;
color: var(--bcs-ink);
}
.mcm-cmd-chip small { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--mcm-gold); }
.mcm-app .mcm-cmd-chip button {
margin-left: auto !important;
width: 26px !important;
height: 26px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 7px !important;
background: none !important;
color: #8a8a90 !important;
font-size: 18px !important;
line-height: 1 !important;
cursor: pointer;
}
.mcm-app .mcm-cmd-chip button:hover { background: #fbe6e6 !important; color: var(--bcs-ko) !important; }
/* Página propia del mazo (temas clásicos) */
.mcm-page-inner { max-width: 1400px; margin: 0 auto; padding: 32px 16px 56px; box-sizing: border-box; }
/* ---------------------------------------------------------------- Estadísticas */
.mcm-stats { margin-bottom: 22px; padding: 18px; background: #fff; border: 1px solid var(--bcs-line); border-radius: var(--bcs-radius); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .04); }
.mcm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.mcm-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--bcs-soft); border-radius: 12px; }
.mcm-tile span { font-size: 12px; font-weight: 600; color: var(--bcs-muted); }
.mcm-tile b { font-size: 21px; font-weight: 800; line-height: 1.2; color: var(--bcs-ink); font-variant-numeric: tabular-nums; }
.mcm-tile b small { font-size: 14px; font-weight: 600; color: var(--bcs-muted); }
.mcm-tile > small { font-size: 12px; color: var(--bcs-muted); }
.mcm-tile.is-accent { background: #e9f5ea; }
.mcm-tile.is-accent b { color: var(--bcs-ok); }
.mcm-tile.is-ko { background: #fdecec; }
.mcm-tile.is-ko b { color: var(--bcs-ko); }
.mcm-stats-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 18px; }
@container mcm (min-width: 700px) {
.mcm-stats-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
.mcm-app .mcm-stats h4 { margin: 0 0 10px !important; font-size: 13px !important; font-weight: 700 !important; color: var(--bcs-ink) !important; }
.mcm-app .mcm-breakdown h4 + * { margin-bottom: 16px; }
.mcm-bars { display: grid; grid-template-columns: repeat(8, 1fr); align-items: end; gap: 8px; height: 150px; }
.mcm-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.mcm-bar-fill { width: 100%; max-width: 38px; min-height: 3px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #ff8a2b, var(--bcs-accent)); transition: height .3s ease; }
.mcm-bar-n { font-size: 12px; font-weight: 700; color: var(--bcs-ink); min-height: 15px; }
.mcm-bar-l { font-size: 12px; font-weight: 600; color: var(--bcs-muted); }
.mcm-types { display: flex; flex-wrap: wrap; gap: 6px; }
.mcm-type { padding: 5px 10px; background: var(--bcs-soft); border-radius: 999px; font-size: 13px; color: #45454a; }
.mcm-type b { color: var(--bcs-ink); }
.mcm-checks { margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0f0f2; }
.mcm-warn { margin: 0 !important; padding: 0 !important; list-style: none !important; display: flex; flex-direction: column; gap: 6px; }
.mcm-warn li { position: relative; margin: 0 !important; padding-left: 22px; font-size: 13.5px; color: #7a4a00; }
.mcm-warn li::before { content: "!"; position: absolute; left: 0; top: 1px; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #ffe2c2; color: #b35900; font-size: 11px; font-weight: 800; }
.mcm-ok { font-size: 13.5px; font-weight: 600; color: var(--bcs-ok); }
/* ---------------------------------------------------------------- Colores */
.mcm-pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.mcm-pip { display: inline-block; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.mcm-pips-lg .mcm-pip { width: 22px; height: 22px; }
.mcm-pip-w { background: #f8f3dc; }
.mcm-pip-u { background: #3f8fd2; }
.mcm-pip-b { background: #3a3a3a; }
.mcm-pip-r { background: #e0552f; }
.mcm-pip-g { background: #2f9e5b; }
.mcm-pip-c { background: #c9c6c0; }
/* Símbolos de maná */
.mcm-m { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: 2px; border-radius: 50%; font-size: 10px; font-style: normal; font-weight: 800; line-height: 1; color: #222; background: #d6d3cc; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.mcm-m.m-w { background: #f8f3dc; }
.mcm-m.m-u { background: #a9d0ef; }
.mcm-m.m-b { background: #b3aca8; }
.mcm-m.m-r { background: #f1a58c; }
.mcm-m.m-g { background: #9ed2af; }
.mcm-m.m-c { background: #ccc; }
.mcm-m.m-h { background: linear-gradient(135deg, #e6e2d8 50%, #bbb 50%); }
.mcm-m.m-h-wu { background: linear-gradient(135deg, #f8f3dc 50%, #a9d0ef 50%); }
.mcm-m.m-h-ub { background: linear-gradient(135deg, #a9d0ef 50%, #b3aca8 50%); }
.mcm-m.m-h-br { background: linear-gradient(135deg, #b3aca8 50%, #f1a58c 50%); }
.mcm-m.m-h-rg { background: linear-gradient(135deg, #f1a58c 50%, #9ed2af 50%); }
.mcm-m.m-h-gw { background: linear-gradient(135deg, #9ed2af 50%, #f8f3dc 50%); }
.mcm-m.m-h-wb { background: linear-gradient(135deg, #f8f3dc 50%, #b3aca8 50%); }
.mcm-m.m-h-ur { background: linear-gradient(135deg, #a9d0ef 50%, #f1a58c 50%); }
.mcm-m.m-h-bg { background: linear-gradient(135deg, #b3aca8 50%, #9ed2af 50%); }
.mcm-m.m-h-rw { background: linear-gradient(135deg, #f1a58c 50%, #f8f3dc 50%); }
.mcm-m.m-h-gu { background: linear-gradient(135deg, #9ed2af 50%, #a9d0ef 50%); }
.mcm-m-sep { margin: 0 3px; font-size: 11px; color: #aaa; }
/* ---------------------------------------------------------------- Lista de cartas */
.mcm-deck { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@container mcm (min-width: 1300px) {
.mcm-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mcm-empty { grid-column: 1 / -1; }
.mcm-group { container-type: inline-size; container-name: grp; padding: 6px 6px 8px; background: #fff; border: 1px solid var(--bcs-line); border-radius: var(--bcs-radius); }
.mcm-app .mcm-group-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 !important;
padding: 10px 10px 8px !important;
font-size: 14px !important;
font-weight: 800 !important;
color: var(--bcs-ink) !important;
}
.mcm-group-title span { padding: 1px 8px; border-radius: 999px; background: var(--bcs-soft); color: var(--bcs-muted); font-size: 12px; font-weight: 700; }
.mcm-group-commander { border-color: #f1dca5; background: linear-gradient(180deg, #fffbf0, #fff 60%); }
.mcm-group-missing { border-style: dashed; }
.mcm-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"qty name mana"
"qty ed price"
"qty foil price";
column-gap: 12px;
row-gap: 4px;
align-items: center;
padding: 9px 10px;
border-radius: 10px;
transition: background-color .15s;
}
.mcm-row + .mcm-row { border-top: 1px solid #f3f3f5; }
.mcm-row:hover { background: #fafafb; }
.mcm-row.is-out .mcm-name { color: #6a6a70 !important; }
.mcm-row.is-foil { background-image: linear-gradient(90deg, rgba(255, 214, 231, .25), rgba(214, 236, 255, .25), rgba(227, 255, 214, .25)); }
.mcm-row.is-warn { box-shadow: inset 3px 0 0 #ffb366; }
.mcm-row.is-ban { box-shadow: inset 3px 0 0 var(--bcs-ko); background: #fff6f6; }
.mcm-legal { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #ffe9d2; color: #a14f00; font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; vertical-align: 1px; }
.mcm-legal.is-ban { background: #fbe0e0; color: var(--bcs-ko); }
.mcm-c-qty { grid-area: qty; align-self: center; }
.mcm-c-name { grid-area: name; min-width: 0; line-height: 1.25; }
.mcm-c-mana { grid-area: mana; justify-self: end; white-space: nowrap; }
.mcm-c-ed { grid-area: ed; min-width: 0; }
.mcm-foil-t { grid-area: foil; justify-self: start; }
.mcm-c-price { grid-area: price; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; white-space: nowrap; }
.mcm-row-acts { grid-column: 4; grid-row: 1 / span 3; position: relative; align-self: center; }
.mcm-app a.mcm-name,
.mcm-app a.mcm-name:visited,
.mcm-app span.mcm-name { color: var(--bcs-ink) !important; font-size: 14px !important; font-weight: 700 !important; }
.mcm-app a.mcm-name:hover { color: var(--bcs-accent) !important; }
.mcm-c-name small { display: block; overflow: hidden; font-size: 12px; font-style: italic; color: #8a8a90; white-space: nowrap; text-overflow: ellipsis; }
.mcm-qtyv { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--bcs-soft); font-size: 13px; font-weight: 800; }
.mcm-stepper { height: 30px !important; }
.mcm-app .mcm-stepper button { width: 26px !important; height: 28px !important; }
.mcm-app select.mcm-ed {
width: 100% !important;
height: 30px !important;
padding: 0 26px 0 9px !important;
border: 1px solid #e4e4e8 !important;
border-radius: 8px !important;
background: #fafafb url("data:image/svg+xml;utf8,") no-repeat right 8px center / 10px !important;
color: #444 !important;
font-size: 12px !important;
line-height: 28px !important;
-webkit-appearance: none !important;
appearance: none !important;
text-overflow: ellipsis;
cursor: pointer;
}
.mcm-ed-one { display: block; overflow: hidden; font-size: 12px; color: var(--bcs-muted); white-space: nowrap; text-overflow: ellipsis; }
/* Interruptor Foil de cada carta */
.mcm-foil-t { display: inline-flex; align-items: center; margin: 0 !important; cursor: pointer; }
.mcm-app .mcm-foil-t input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; }
.mcm-foil-t span { padding: 3px 10px; border: 1px solid #e4e4e8; border-radius: 999px; background: #fff; font-size: 11.5px; font-weight: 700; color: #8a8a90; transition: all .15s; }
.mcm-foil-t input:checked + span { border-color: transparent; background: var(--mcm-foil); color: #5b3b8c; box-shadow: 0 1px 4px rgba(120, 80, 200, .25); }
.mcm-foil-t input:focus-visible + span { outline: 2px solid var(--bcs-accent); outline-offset: 2px; }
.mcm-foil-t.is-disabled { cursor: not-allowed; opacity: .45; }
.mcm-c-price b { font-size: 14px; font-weight: 800; color: var(--bcs-ink); font-variant-numeric: tabular-nums; }
.mcm-c-price small { font-size: 11.5px; font-weight: 700; }
.mcm-c-price small.is-ok { color: var(--bcs-ok); }
.mcm-c-price small.is-ko { color: var(--bcs-ko); }
.mcm-warn-ico,
.mcm-cover-ico { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: 6px; border-radius: 50%; vertical-align: 1px; font-size: 11px; font-weight: 800; cursor: help; }
.mcm-warn-ico { background: #ffe2c2; color: #b35900; }
.mcm-warn-ico.is-ban { background: #fbe0e0; color: var(--bcs-ko); }
.mcm-warn li.is-ban { color: var(--bcs-ko); font-weight: 700; }
.mcm-warn li.is-ban::before { background: #fbe0e0; color: var(--bcs-ko); }
.mcm-cover-ico { background: var(--mcm-gold-soft); color: var(--mcm-gold); }
.mcm-app .mcm-dots {
width: 30px !important;
height: 30px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 8px !important;
background: none !important;
color: #8a8a90 !important;
font-size: 18px !important;
line-height: 1 !important;
cursor: pointer;
}
.mcm-app .mcm-dots:hover { background: var(--bcs-soft) !important; color: var(--bcs-ink) !important; }
/* Grupo ancho: cada carta en una sola línea (cantidad · nombre · maná · edición · foil · precio). */
@container grp (min-width: 600px) {
.mcm-row {
grid-template-columns: auto minmax(0, 1.3fr) 76px minmax(0, 1fr) auto 78px;
grid-template-areas: "qty name mana ed foil price";
column-gap: 14px;
}
.mcm-row-acts { grid-column: 7; grid-row: 1; }
.mcm-c-mana { justify-self: start; }
.mcm-row.is-missing { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "qty name slot"; }
.mcm-row.is-missing .mcm-row-acts { grid-column: 4; }
}
/* Carta fuera de catálogo: hueco reservado */
.mcm-row.is-missing { grid-template-areas: "qty name slot"; }
.mcm-row.is-missing .mcm-c-name small { font-style: normal; color: var(--bcs-ko); }
.mcm-c-slot {
grid-area: slot;
justify-self: end;
padding: 6px 12px;
border: 1.5px dashed #d5d5da;
border-radius: 8px;
color: #a0a0a6;
font-size: 11.5px;
font-weight: 700;
white-space: nowrap;
}
/* Vista previa flotante */
.mcm-preview { position: fixed; top: 0; left: 0; z-index: 99998; width: 250px; pointer-events: none; }
.mcm-preview img { display: block; width: 100%; height: auto; border-radius: 4.7% / 3.5%; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
/* ---------------------------------------------------------------- Cabecera del mazo */
.mcm-hero {
position: relative;
display: flex;
align-items: center;
gap: 26px;
overflow: hidden;
margin-bottom: 18px;
padding: 26px;
border-radius: 18px;
background: #151515;
color: #fff;
isolation: isolate;
}
.mcm-hero-bg { position: absolute; inset: -30px; z-index: -1; background-size: cover; background-position: center 20%; filter: blur(28px) saturate(1.3); opacity: .55; transform: scale(1.1); }
.mcm-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15)); }
.mcm-app img.mcm-hero-card { flex: none; width: 170px !important; max-width: 40% !important; height: auto !important; border-radius: 4.7% / 3.5% !important; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.mcm-hero-info { min-width: 0; }
.mcm-app .mcm-hero-title { margin: 10px 0 4px !important; font-size: 30px !important; font-weight: 800 !important; line-height: 1.15 !important; color: #fff !important; }
.mcm-hero-sub { font-size: 15px; font-weight: 600; color: #ffd48a; }
.mcm-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, .85); }
.mcm-hero-meta a { color: inherit !important; text-decoration: underline; text-underline-offset: 3px; }
.mcm-hero-desc { max-width: 720px; margin-top: 14px; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.mcm-hero-desc a { color: #ffb27a !important; }
.mcm-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.mcm-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #333; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.mcm-badge.is-format { background: #fff; color: var(--bcs-ink); }
.mcm-badge.is-official { background: linear-gradient(135deg, #f7d774, #d9a520); color: #3a2a00; }
.mcm-badge.is-shop { background: var(--bcs-accent); color: #fff; }
.mcm-badge.is-hist { background: #5b5b63; color: #fff; }
.mcm-badge.is-private { background: #2b2b30; color: #fff; }
.mcm-badge.is-comp { background: #c62828; color: #fff; }
.mcm-bloqueo { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: #fdecea; color: #8e1c1c; font-size: 14px; }
/* ---------------------------------------------------------------- Listado de mazos */
.mcm-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.mcm-filters .mcm-searchbox { flex: 1 1 220px; margin: 0; }
.mcm-app .mcm-filters select { width: auto !important; min-width: 150px; }
.mcm-filters .mcm-new { margin-left: auto; }
.mcm-pips-filter { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid #e3e3e6; border-radius: 11px; }
.mcm-app .mcm-pips-filter button {
width: 30px !important;
height: 30px !important;
padding: 0 !important;
border: 2px solid transparent !important;
border-radius: 50% !important;
color: transparent !important;
font-size: 0 !important;
cursor: pointer;
opacity: .45;
transition: opacity .15s, transform .15s;
}
.mcm-app .mcm-pips-filter button:hover { opacity: .8; }
.mcm-app .mcm-pips-filter button[aria-pressed="true"] { opacity: 1; border-color: var(--bcs-ink) !important; transform: scale(1.06); }
.mcm-count { margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--bcs-muted); }
.mcm-list.is-loading .mcm-decks { opacity: .5; pointer-events: none; transition: opacity .2s; }
.mcm-decks { display: grid; gap: 18px; }
.mcm-list.is-grid .mcm-decks { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.mcm-list.is-list .mcm-decks { grid-template-columns: 1fr; gap: 10px; }
.mcm-none { grid-column: 1 / -1; }
.mcm-app a.mcm-dcard {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
border: 1px solid var(--bcs-line);
border-radius: var(--bcs-radius);
color: var(--bcs-ink) !important;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
animation: bcs-in .35s ease backwards;
}
.mcm-app a.mcm-dcard:hover { transform: translateY(-3px); border-color: #e2e2e6; box-shadow: 0 12px 30px rgba(0, 0, 0, .09); }
.mcm-dcard.is-official { border-color: #ecd48a; }
.mcm-dcard-art { position: relative; display: block; height: 150px; overflow: hidden; background: linear-gradient(135deg, #2a2a2e, #151515); }
.mcm-app .mcm-dcard-art img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center 18%; transform: scale(1.35); transform-origin: center 22%; transition: transform .4s ease; }
.mcm-app a.mcm-dcard:hover .mcm-dcard-art img { transform: scale(1.42); }
.mcm-dcard-art .mcm-badges { position: absolute; top: 10px; left: 10px; }
.mcm-dcard-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.mcm-dcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mcm-dcard-format { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--bcs-accent); }
.mcm-dcard-title { font-size: 16px; font-weight: 800; line-height: 1.25; }
.mcm-dcard-sub { overflow: hidden; font-size: 13px; color: var(--bcs-muted); white-space: nowrap; text-overflow: ellipsis; }
.mcm-dcard-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; color: #8a8a90; }
/* Vista en lista */
.mcm-list.is-list a.mcm-dcard { flex-direction: row; align-items: stretch; }
.mcm-list.is-list .mcm-dcard-art { width: 170px; height: auto; min-height: 92px; flex: none; }
.mcm-list.is-list .mcm-dcard-body { flex: 1; min-width: 0; justify-content: center; }
.mcm-list.is-list .mcm-dcard-art .mcm-badges { top: auto; bottom: 8px; left: 8px; }
.mcm-dots-p { align-self: center; color: var(--bcs-muted); padding: 0 4px; }
/* ---------------------------------------------------------------- Móvil y tablet */
@media (max-width: 767px) {
.mcm-topbar { flex-direction: column; align-items: stretch; }
.mcm-tools { flex-direction: column; align-items: stretch; }
.mcm-tool { justify-content: space-between; }
.mcm-app .mcm-tool select { flex: 1; max-width: none; min-width: 0; }
.mcm-findbar .mcm-searchbox { max-width: none; }
.mcm-topbar .bcs-actions .bcs-btn,
.mcm-topbar .bcs-actions .mcm-menu { flex: 1; }
.mcm-topbar .mcm-menu .bcs-btn { width: 100% !important; }
.mcm-stats { padding: 14px; }
.mcm-tiles { grid-template-columns: 1fr 1fr; }
.mcm-tile b { font-size: 18px; }
.mcm-bars { height: 120px; gap: 5px; }
.mcm-deck { grid-template-columns: 1fr; }
.mcm-row { column-gap: 10px; padding: 9px 6px; }
.mcm-hero { flex-direction: column; align-items: flex-start; padding: 20px; }
.mcm-app img.mcm-hero-card { width: 130px !important; }
.mcm-app .mcm-hero-title { font-size: 24px !important; }
.mcm-filters .mcm-searchbox { flex-basis: 100%; }
.mcm-app .mcm-filters select { flex: 1; min-width: 0; }
.mcm-filters .mcm-new { margin-left: 0; width: 100% !important; }
.mcm-list.is-grid .mcm-decks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mcm-dcard-art { height: 110px; }
.mcm-list.is-list .mcm-dcard-art { width: 110px; }
.mcm-dcard-title { font-size: 14.5px; }
.mcm-field-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.mcm-app a.mcm-dcard, .mcm-bar-fill, .mcm-dcard-art img { animation: none !important; transition: none !important; }
}
/* Los botones de bcs.css fuerzan display; un botón oculto tiene que seguir oculto. */
.mcm-app .bcs-btn[hidden],
.mcm-app [hidden] { display: none !important; }
/* ---------------------------------------------------------------- Navegación entre mazos */
.mcm-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.mcm-app-nav, .mcm-nav { font-size: 14px; }
.mcm-wrap a.mcm-nav-item,
.mcm-wrap a.mcm-nav-item:visited {
display: inline-flex;
align-items: center;
height: 38px;
padding: 0 16px;
border: 1px solid #e3e3e6;
border-radius: 999px;
background: #fff;
color: #45454a !important;
font-weight: 600;
text-decoration: none !important;
transition: background-color .15s, border-color .15s, color .15s;
}
.mcm-wrap a.mcm-nav-item:hover { border-color: #cfcfd4; color: #151515 !important; }
.mcm-wrap a.mcm-nav-item.is-on { background: #151515; border-color: #151515; color: #fff !important; }
.mcm-wrap a.mcm-nav-item.is-new { margin-left: auto; border-color: #e96400; color: #e96400 !important; }
.mcm-wrap a.mcm-nav-item.is-new:hover,
.mcm-wrap a.mcm-nav-item.is-new.is-on { background: #e96400; color: #fff !important; }
/* ---------------------------------------------------------------- Cartas en cuadrícula */
.mcm-deckview { margin-left: auto; }
.mcm-deckview button { display: inline-flex !important; align-items: center; gap: 6px; }
.mcm-deckview button span { font-size: 13px; }
.mcm-deck.is-grid { grid-template-columns: minmax(0, 1fr) !important; }
.mcm-tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; padding: 4px 8px 10px; }
.mcm-tcard { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mcm-app a.mcm-tc-img { display: block; position: relative; border-radius: 4.7% / 3.5%; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .14); transition: transform .2s ease, box-shadow .2s ease; }
.mcm-app a.mcm-tc-img:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, .18); }
.mcm-app .mcm-tc-img img { display: block; width: 100% !important; height: auto !important; max-width: 100% !important; aspect-ratio: 488 / 680; object-fit: cover; background: var(--bcs-soft); }
.mcm-tcard.is-out .mcm-tc-img img { filter: grayscale(.55); opacity: .75; }
.mcm-tcard.is-foil .mcm-tc-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255, 120, 200, .22), rgba(120, 200, 255, .22) 40%, rgba(160, 255, 140, .2) 70%, rgba(255, 230, 120, .22)); mix-blend-mode: screen; pointer-events: none; }
.mcm-tcard.is-ban .mcm-tc-img { outline: 3px solid var(--bcs-ko); outline-offset: 2px; }
.mcm-qbadge { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 2px 8px; border-radius: 999px; background: rgba(21, 21, 21, .85); color: #fff; font-size: 12px; font-weight: 800; }
.mcm-tcard > .mcm-legal { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; }
.mcm-tc-info { display: flex; flex-direction: column; gap: 1px; text-align: center; line-height: 1.25; }
.mcm-tc-name { overflow: hidden; font-size: 13px; font-weight: 700; color: var(--bcs-ink); white-space: nowrap; text-overflow: ellipsis; }
.mcm-tc-price { display: flex; justify-content: center; gap: 6px; font-size: 12.5px; }
.mcm-tc-price b { color: var(--bcs-ink); }
.mcm-tc-price small { font-weight: 700; }
.mcm-tc-price small.is-ok { color: var(--bcs-ok); }
.mcm-tc-price small.is-ko { color: var(--bcs-ko); }
.mcm-tc-foot { display: flex; align-items: center; justify-content: center; gap: 4px; }
.mcm-tc-foot .mcm-row-acts { grid-column: auto; grid-row: auto; }
.mcm-tc-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 488 / 680; padding: 10px; border: 2px dashed #d5d5da; border-radius: 4.7% / 3.5%; text-align: center; }
.mcm-tc-slot span { font-size: 13px; font-weight: 700; color: var(--bcs-ink); }
.mcm-tc-slot small { font-size: 11.5px; color: var(--bcs-ko); }
@media (max-width: 767px) {
.mcm-tcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 4px 4px 8px; }
.mcm-deckview { margin-left: 0; }
.mcm-deckview button span { display: none; }
.mcm-wrap a.mcm-nav-item { height: 34px; padding: 0 12px; font-size: 13px; }
.mcm-wrap a.mcm-nav-item.is-new { margin-left: 0; }
}
/* ---------------------------------------------------------------- Portada del mazo (constructor) */
.mcm-cover-pick { display: flex; align-items: flex-start; gap: 12px; }
.mcm-app img#mcm-cover-img { flex: none; width: 64px !important; height: auto !important; border-radius: 4.7% / 3.5% !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.mcm-cover-side { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.mcm-app .mcm-cover-side select {
width: 100% !important;
height: 48px !important;
padding: 0 30px 0 12px !important;
border: 1px solid #e3e3e6 !important;
border-radius: 12px !important;
background: #fafafb url("data:image/svg+xml;utf8,") no-repeat right 10px center / 12px !important;
color: var(--bcs-ink) !important;
font-size: 15px !important;
-webkit-appearance: none !important;
appearance: none !important;
}
/* En el panel lateral (21 %) Formato y Fecha van uno debajo de otro para que no se corten. */
.mcm-builder .bcs-side .mcm-field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
/* ---------------------------------------------------------------- Símbolos de maná oficiales (1.4.0) */
.mcm-sym { display: inline-block; width: 15px; height: 15px; vertical-align: middle; border-radius: 50%; box-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.mcm-pips-lg .mcm-sym { width: 22px; height: 22px; }
.mcm-hero-meta .mcm-sym { width: 18px; height: 18px; }
.mcm-app .mcm-pips-filter button.has-sym { display: inline-flex !important; align-items: center; justify-content: center; background: transparent !important; box-shadow: none; }
.mcm-app .mcm-pips-filter button.has-sym .mcm-sym { width: 24px; height: 24px; }
/* ---------------------------------------------------------------- Arquetipos y etiquetas (1.4.0) */
.mcm-arq-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.mcm-app .mcm-arq-pick button {
position: relative;
height: 32px !important;
padding: 0 12px !important;
border: 1px solid #e3e3e6 !important;
border-radius: 999px !important;
background: #fff !important;
color: #45454a !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer;
transition: background-color .15s, border-color .15s, color .15s;
}
.mcm-app .mcm-arq-pick button:hover { border-color: #cfcfd4 !important; color: var(--bcs-ink) !important; }
.mcm-app .mcm-arq-pick button[aria-pressed="true"] { background: var(--bcs-ink) !important; border-color: var(--bcs-ink) !important; color: #fff !important; }
.mcm-app .mcm-arq-pick button.is-main { background: var(--bcs-accent) !important; border-color: var(--bcs-accent) !important; }
.mcm-app .mcm-arq-pick button.is-main::before { content: "★ "; }
.mcm-tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mcm-tag-chips:empty { display: none; }
.mcm-tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: 999px; background: var(--bcs-soft); color: var(--bcs-ink); font-size: 13px; font-weight: 600; }
.mcm-app .mcm-tag-chip button { width: 22px !important; height: 22px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--bcs-muted) !important; font-size: 16px !important; line-height: 1 !important; cursor: pointer; }
.mcm-app .mcm-tag-chip button:hover { background: #e6e6ea !important; color: var(--bcs-ink) !important; }
.mcm-app .mcm-field .mcm-tagbox input[type="text"] { height: 42px !important; padding-left: 14px !important; }
.mcm-app a.mcm-badge { text-decoration: none !important; }
.mcm-badge.is-arq { background: rgba(255, 255, 255, .16); color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.mcm-badge.is-arq.is-main { background: var(--bcs-accent); box-shadow: none; }
.mcm-app a.mcm-badge.is-arq:hover { background: rgba(255, 255, 255, .28); }
.mcm-app a.mcm-badge.is-arq.is-main:hover { filter: brightness(1.08); }
.mcm-hero-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mcm-app .mcm-hero-tags a,
.mcm-hero-tags span { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .9) !important; font-size: 12.5px; font-weight: 600; text-decoration: none !important; }
.mcm-app .mcm-hero-tags a:hover { background: rgba(255, 255, 255, .24); }
.mcm-active-tag { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--bcs-soft); font-size: 13px; }
.mcm-app .mcm-active-tag button { width: 22px !important; height: 22px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--bcs-muted) !important; font-size: 16px !important; line-height: 1 !important; cursor: pointer; }
/* ---------------------------------------------------------------- Nada ensancha la página (1.4.2)
Un