/* ── El constructor de mazos (/constructor) ──
   Hoja propia porque solo la usa esta pantalla (y /mazos): lo que baja
   todo el mundo es components.css, y esa no puede crecer (presupuesto de
   la portada, CLAUDE.md). Prefijo `cm-` para no chocar con nada. */

.cm-pagina {
  width: 100%;
  padding-top: var(--e-xl);
  padding-bottom: var(--e-2xl);
}

.cm-cabecera-pagina {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-md);
  margin-bottom: var(--e-lg);
}

.cm-cabecera-pagina h1 {
  font-size: var(--t-2xl);
}

.cm-enlace-mazos {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--navy);
  font-weight: 700;
  font-size: var(--t-md);
}

.cm-aviso {
  margin-bottom: var(--e-lg);
  padding: var(--e-md) var(--e-lg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--ice);
  color: var(--text);
  font-size: var(--t-md);
}

/* ── Las dos columnas ── */
.cm-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--e-xl);
  align-items: start;
}

.cm-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--e-lg);
  min-width: 0;
}

/* En pantalla ancha, los DOS paneles se quedan quietos a la altura de
   la ventana y cada uno baja por dentro. Antes la página entera se
   movía: al añadir una carta crecía el mazo (o la lista de avisos de
   encima) y todo lo de debajo se desplazaba, y el siguiente clic caía
   en otra carta. Ahora el mazo tiene su propio scroll, que no se mueve
   al repintarlo, y el buscador el suyo. */
@media (min-width: 901px) {
  .cm-rejilla {
    align-items: stretch;
  }

  .cm-panel-mazo,
  .cm-panel-buscar {
    position: sticky;
    top: 88px;
    height: calc(100vh - 104px);
    height: calc(100dvh - 104px);
    min-height: 480px;
  }

  .cm-panel-mazo {
    display: flex;
    flex-direction: column;
  }

  .cm-panel-mazo .cm-mazo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    /* Un poco de aire para que el borde rojo de una carta marcada no
       se corte contra el filo del scroll. */
    padding: var(--e-xs);
    margin: 0 calc(-1 * var(--e-xs));
  }

  .cm-panel-buscar {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  /* La barra de scroll del sistema sale blanca en el tema oscuro. */
  .cm-panel-mazo .cm-mazo,
  .cm-panel-buscar {
    scrollbar-color: var(--border-strong) transparent;
  }
}

.cm-titulo-panel {
  font-size: var(--t-lg);
  margin-bottom: var(--e-md);
}

/* Las pestañas solo existen en pantalla estrecha. */
.cm-pestanias {
  display: none;
}

@media (max-width: 900px) {
  .cm-rejilla {
    grid-template-columns: minmax(0, 1fr);
  }

  .cm-pestanias {
    display: flex;
    gap: var(--e-sm);
    margin-bottom: var(--e-md);
    position: sticky;
    top: 64px;
    z-index: 5;
    background: var(--bg);
    padding: var(--e-sm) 0;
  }

  .cm-rejilla[data-vista='mazo'] .cm-panel-buscar,
  .cm-rejilla[data-vista='buscar'] .cm-panel-mazo {
    display: none;
  }

  .cm-panel-buscar {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

.cm-pestania {
  flex: 1;
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--text-mid);
  font-weight: 700;
  font-size: var(--t-md);
}

.cm-pestania.activa {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--ice);
}

.cm-pestania-cuenta {
  display: inline-block;
  min-width: 24px;
  margin-left: var(--e-xs);
  padding: 0 var(--e-sm);
  border-radius: var(--radius-pill);
  background: var(--navy-solid);
  color: var(--blanco-fijo);
  font-size: var(--t-xs);
  line-height: 20px;
}

/* ── La barra del mazo ── */
.cm-barra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-sm);
  align-items: center;
}

.cm-barra .cm-nombre {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 44px;
  padding: var(--e-sm) var(--e-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-lg);
}

.cm-barra .cm-nombre:focus,
.cm-buscador .cm-texto:focus,
.cm-campo select:focus,
.cm-importar-texto:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: var(--shadow-ring);
}

.cm-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-sm);
}

/* Los botones de la casa son grandes (16 px de relleno); en una barra
   con cuatro se quedan en 44 de alto, que es lo que pide la regla. */
.cm-btn {
  min-height: 44px;
  padding: var(--e-sm) var(--e-lg);
}

.cm-menu {
  position: relative;
}

.cm-menu-lista {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  padding: var(--e-xs);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.cm-menu-lista.hidden {
  display: none;
}

.cm-menu-lista button {
  min-height: 44px;
  padding: var(--e-sm) var(--e-md);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: var(--t-md);
  color: var(--text);
}

.cm-menu-lista button:hover,
.cm-menu-lista button:focus-visible {
  background: var(--ice);
  outline: none;
}

.cm-ajustes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-sm) var(--e-lg);
  margin-top: var(--e-sm);
}

/* En la barra del mazo el formato va en línea («Formato [Estándar]»):
   cada fila de cabecera que se ahorra es mazo que se ve sin bajar. */
.cm-ajustes .cm-campo {
  flex-direction: row;
  align-items: center;
  gap: var(--e-sm);
}

.cm-campo {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--text-mid);
}

.cm-campo select {
  min-height: 44px;
  padding: var(--e-sm) 36px var(--e-sm) var(--e-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  /* background-COLOR y no el atajo `background`: el atajo devuelve
     `background-repeat` a `repeat`, y en el tema oscuro la regla de
     style.css vuelve a poner la flecha (con más especificidad) sin
     volver a decir no-repeat — la flecha sale en mosaico. Es el mismo
     fallo que tiene hoy el desplegable de tipos de /cartas. */
  background-color: var(--white);
  color: var(--text);
  font-size: var(--t-md);
  font-weight: 400;
}

.cm-campo select:disabled {
  opacity: 0.5;
}

.cm-check {
  display: inline-flex;
  align-items: center;
  gap: var(--e-sm);
  min-height: 44px;
  font-size: var(--t-sm);
  color: var(--text-mid);
}

.cm-check input {
  width: 20px;
  height: 20px;
  accent-color: var(--navy);
}

.cm-guardado {
  margin-left: auto;
  font-size: var(--t-xs);
}

/* El estado de guardado empuja a la derecha; el conmutador va detrás. */
.cm-ajustes .cm-vistas {
  margin-left: 0;
}

/* ── El resumen ── */
.cm-resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-sm) var(--e-md);
  margin: var(--e-sm) 0;
  padding-top: var(--e-sm);
  border-top: 1px solid var(--border);
}

.cm-total {
  font-size: var(--t-lg);
  color: var(--text-mid);
}

.cm-total strong {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  color: var(--text);
}

.cm-total-ok strong {
  color: var(--success);
}

.cm-reparto {
  font-size: var(--t-sm);
}

.cm-sello {
  font-size: var(--t-xs);
  font-weight: 700;
  border-radius: var(--radius-pill);
}

.cm-sello-ok,
.cm-sello-mal {
  padding: var(--e-xs) var(--e-md);
}

.cm-sello-ok {
  background: var(--success-bg);
  color: var(--success);
}

.cm-sello-mal {
  background: var(--danger-bg);
  color: var(--danger);
}

.cm-vistas {
  display: flex;
  margin-left: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cm-vista {
  min-height: 36px;
  padding: 0 var(--e-md);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--text-mid);
}

.cm-vista.activa {
  background: var(--navy-solid);
  color: var(--blanco-fijo);
}

@media (pointer: coarse) {
  .cm-vista {
    min-height: 44px;
  }
}

/* Los avisos van en un desplegable que se abre desde el sello, encima
   del mazo, y no en una lista que empuja las cartas hacia abajo cada
   vez que aparece o desaparece un aviso. */
.cm-resumen {
  position: relative;
}

button.cm-sello {
  min-height: 32px;
  cursor: pointer;
}

/* Sin avisos, el sello es solo una etiqueta: ni flecha ni mano. */
button.cm-sello:disabled {
  cursor: default;
  opacity: 1;
}

button.cm-sello:not(:disabled)::after {
  content: ' ▾';
}

button.cm-sello[aria-expanded='true']:not(:disabled)::after {
  content: ' ▴';
}

@media (pointer: coarse) {
  button.cm-sello {
    min-height: 44px;
  }
}

.cm-problemas {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 15;
  box-shadow: var(--shadow-lg);
  padding: var(--e-md) var(--e-lg);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  /* Opaco: flota encima de las cartas. El rojo claro va por encima
     del blanco por si --danger-bg es translúcido en algún tema. */
  background: linear-gradient(var(--danger-bg), var(--danger-bg)), var(--white);
  color: var(--danger);
  font-size: var(--t-sm);
  list-style: disc inside;
}

.cm-problemas li + li {
  margin-top: var(--e-xs);
}

.cm-problemas.hidden {
  display: none;
}

/* ── El mazo ── */
.cm-vacio {
  padding: var(--e-2xl) var(--e-lg);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--text-mid);
  font-size: var(--t-md);
}

.cm-vacio p + p {
  margin-top: var(--e-sm);
}

.cm-seccion + .cm-seccion {
  margin-top: var(--e-lg);
}

.cm-seccion-titulo {
  font-size: var(--t-md);
  margin-bottom: var(--e-sm);
}

.cm-cartas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--e-sm);
}

.cm-carta,
.cm-resultado {
  position: relative;
  min-width: 0;
}

/* La carta ocupa su hueco desde el principio (proporción de las
   miniaturas de TCGdex, 245 × 342): la rejilla no pega saltos al llegar
   las imágenes. */
.cm-carta-img,
.cm-resultado-img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 245 / 342;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
}

.cm-carta-img img,
.cm-resultado-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El nombre, debajo de la imagen: se ve solo si la imagen no llega. */
.cm-sin-imagen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-sm);
  text-align: center;
  font-size: var(--t-xs);
  color: var(--text-mid);
}

.cm-carta-mal .cm-carta-img,
.cm-carta-mal.cm-fila {
  border: 2px solid var(--danger);
}

.cm-carta-n {
  position: absolute;
  left: 50%;
  bottom: var(--e-sm);
  transform: translateX(-50%);
  min-width: 32px;
  padding: var(--e-xs) var(--e-sm);
  border-radius: var(--radius-sm);
  background: var(--danger-solid);
  color: var(--blanco-fijo);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-md);
  text-align: center;
  line-height: 1;
  pointer-events: none;
  box-shadow: var(--shadow-xs);
}

/* Los − y + de cada carta: al pasar el ratón en escritorio, siempre a la
   vista en pantalla táctil (ahí no hay «pasar por encima»). */
.cm-carta-botones {
  position: absolute;
  top: var(--e-xs);
  left: var(--e-xs);
  right: var(--e-xs);
  display: flex;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}

.cm-carta:hover .cm-carta-botones,
.cm-carta:focus-within .cm-carta-botones {
  opacity: 1;
}

@media (hover: none) {
  .cm-carta-botones {
    opacity: 1;
  }
}

.cm-mini {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--navy-solid);
  color: var(--blanco-fijo);
  font-weight: 700;
  font-size: var(--t-lg);
  line-height: 1;
  box-shadow: var(--shadow-sm);
}

.cm-mini:hover {
  background: var(--navy-solid-light);
}

@media (pointer: coarse) {
  .cm-mini {
    min-width: 44px;
    min-height: 44px;
  }

  .cm-cartas {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
}

/* La vista de lista: una fila por carta, como el texto de TCG Live. */
.cm-lista {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cm-fila {
  display: flex;
  align-items: center;
  gap: var(--e-sm);
  padding: var(--e-xs) var(--e-sm);
  border-bottom: 1px solid var(--border);
}

.cm-fila:last-child {
  border-bottom: none;
}

.cm-fila-n {
  min-width: 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-md);
  text-align: right;
}

.cm-fila-nombre {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  text-align: left;
  font-size: var(--t-md);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cm-fila-set {
  font-size: var(--t-xs);
  white-space: nowrap;
}

/* ── El buscador ── */
.cm-buscador {
  display: flex;
  gap: var(--e-sm);
}

.cm-buscador .cm-texto {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: var(--e-sm) var(--e-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--bg);
  color: var(--text);
  font-size: var(--t-md);
}

.cm-filtros {
  display: grid;
  /* Tres por fila si caben y dos si no: con tres en un móvil los
     desplegables se quedaban en «Toda» y «Todo». */
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--e-sm);
  margin-top: var(--e-md);
}

.cm-campo-ancho,
.cm-filtros .cm-check {
  grid-column: 1 / -1;
}

.cm-pista {
  margin-top: var(--e-sm);
  font-size: var(--t-xs);
}

.cm-cuenta {
  margin: var(--e-sm) 0;
  font-size: var(--t-xs);
  font-weight: 700;
}

.cm-resultados {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--e-md) var(--e-sm);
}

.cm-cargando {
  grid-column: 1 / -1;
  padding: var(--e-xl) 0;
  text-align: center;
}

.cm-resultado-img {
  cursor: copy;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.cm-resultado-img:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* El «ya lo llevas»: cuántas copias hay en el mazo. */
.cm-resultado-en {
  position: absolute;
  top: var(--e-xs);
  left: var(--e-xs);
  min-width: 24px;
  padding: var(--e-xs) var(--e-sm);
  border-radius: var(--radius-pill);
  background: var(--danger-solid);
  color: var(--blanco-fijo);
  font-size: var(--t-xs);
  font-weight: 700;
  text-align: center;
  line-height: 1;
  pointer-events: none;
}

.cm-resultado-en.hidden {
  display: none;
}

.cm-info {
  position: absolute;
  top: var(--e-xs);
  right: var(--e-xs);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--border-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-sm);
  box-shadow: var(--shadow-xs);
}

@media (pointer: coarse) {
  .cm-info {
    min-width: 44px;
    min-height: 44px;
    top: 0;
    right: 0;
    border-radius: var(--radius-sm);
  }
}

.cm-resultado-pie {
  display: block;
  margin-top: var(--e-xs);
  font-size: var(--t-2xs);
  text-align: center;
}

/* Un pequeño salto al añadir, para que se note sin mirar el mazo. */
.cm-recien .cm-resultado-img {
  animation: cm-salto 0.3s var(--ease);
}

@keyframes cm-salto {
  40% {
    transform: scale(0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cm-recien .cm-resultado-img {
    animation: none;
  }

  .cm-resultado-img,
  .cm-carta-botones {
    transition: none;
  }
}

.cm-mas {
  width: 100%;
  margin-top: var(--e-lg);
}

.cm-mas.hidden {
  display: none;
}

/* ── Los modales ── */
.cm-cerrar {
  min-width: 44px;
  min-height: 44px;
}

.cm-modal-carta {
  max-width: 720px;
}

.cm-carta-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--e-xl);
  align-items: start;
}

@media (max-width: 600px) {
  .cm-carta-cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }

  .cm-carta-grande {
    max-width: 240px;
    margin: 0 auto;
  }
}

.cm-carta-grande {
  width: 100%;
  height: auto;
  aspect-ratio: 367 / 512;
  border-radius: var(--radius-md);
  background: var(--bg);
}

.cm-carta-datos {
  display: flex;
  flex-direction: column;
  gap: var(--e-md);
}

.cm-carta-datos h3 {
  font-size: var(--t-xl);
  margin: 0;
}

.cm-contador {
  display: flex;
  align-items: center;
  gap: var(--e-md);
}

.cm-btn-cuadrado {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: var(--t-xl);
}

.cm-contador-num {
  min-width: 32px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-2xl);
}

.cm-carta-avisos {
  color: var(--danger);
  font-size: var(--t-sm);
  list-style: disc inside;
}

.modal-box .cm-importar-texto {
  width: 100%;
  min-height: 240px;
  padding: var(--e-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--bg);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-sm);
  resize: vertical;
}

/* ── Importar: texto o imagen ── */
.cm-importar-modos {
  display: inline-flex;
  margin: var(--e-sm) 0 var(--e-md);
  margin-left: 0;
  /* La caja del modal es una columna flexible con scroll: sin esto, esta
     fila (que lleva overflow: hidden de .cm-vistas) se encoge a cero. */
  flex-shrink: 0;
  align-self: flex-start;
}

.cm-soltar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin-top: var(--e-md);
  padding: var(--e-lg);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-mid);
  font-size: var(--t-md);
  text-align: center;
  cursor: pointer;
}

.cm-soltar:hover,
.cm-soltar.cm-encima,
.cm-soltar:focus-within {
  border-color: var(--navy);
  background: var(--ice);
}

.cm-soltar-texto strong {
  color: var(--navy);
}

.cm-imagen-filas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--e-sm);
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cm-imagen-fila {
  display: flex;
  gap: var(--e-md);
  align-items: center;
  padding: var(--e-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

/* Lo que el reconocimiento no tiene claro: se ve de un vistazo. */
.cm-imagen-fila.cm-duda {
  border-color: var(--warning);
  background: var(--warning-bg);
}

.cm-imagen-fila.cm-quitada {
  opacity: 0.5;
}

.cm-imagen-recorte {
  width: 64px;
  height: auto;
  aspect-ratio: 92 / 128;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.cm-imagen-datos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
}

.cm-imagen-datos select {
  width: 100%;
  min-width: 0;
}

.cm-imagen-copias input {
  width: 88px;
  min-height: 44px;
  padding: var(--e-sm) var(--e-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--white);
  color: var(--text);
  font-size: var(--t-md);
  font-weight: 400;
}

.cm-imagen-datos .cm-dudoso {
  border-color: var(--warning);
  border-width: 2px;
}

.cm-importar-resultado {
  max-height: 220px;
  overflow-y: auto;
  padding: var(--e-md);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--ice);
  font-size: var(--t-sm);
}

.cm-importar-resultado ul {
  margin: var(--e-xs) 0 var(--e-sm);
  padding-left: var(--e-lg);
  list-style: disc;
}

.cm-importar-resultado.hidden {
  display: none;
}

.cm-modal-botones {
  display: flex;
  justify-content: flex-end;
  gap: var(--e-sm);
  flex-wrap: wrap;
}

.cm-modal-mano {
  max-width: 820px;
}

.cm-mano {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--e-sm);
}

.cm-mano-premios {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  max-width: 88%;
}

@media (max-width: 600px) {
  .cm-mano {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cm-mano-premios {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }
}

.cm-mano-carta {
  position: relative;
  aspect-ratio: 245 / 342;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
}

.cm-mano-carta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Boca abajo: el dorso de la casa, hecho con los azules fijos. */
.cm-boca-abajo {
  background: var(--arte-azul);
}

.cm-boca-abajo img,
.cm-boca-abajo .cm-sin-imagen {
  visibility: hidden;
}

.cm-mano-premios-titulo {
  margin-top: var(--e-sm);
  font-size: var(--t-sm);
}

/* ── /mazos ── */
.cm-mazos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--e-lg);
}

.cm-mazo-tarjeta {
  display: flex;
  gap: var(--e-md);
  padding: var(--e-md);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.cm-mazo-tarjeta:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
  .cm-mazo-tarjeta {
    transition: none;
  }
}

.cm-mazo-portada {
  position: relative;
  flex: 0 0 72px;
  aspect-ratio: 245 / 342;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
}

.cm-mazo-portada img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cm-mazo-info {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
  min-width: 0;
  flex: 1;
}

.cm-mazo-nombre {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-lg);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cm-mazo-meta {
  font-size: var(--t-xs);
}

.cm-mazo-acciones {
  display: flex;
  gap: var(--e-sm);
  margin-top: auto;
}

.cm-mazo-acciones .link-btn {
  min-height: 36px;
  font-size: var(--t-sm);
}

@media (pointer: coarse) {
  .cm-mazo-acciones .link-btn {
    min-height: 44px;
  }
}

.cm-chapa {
  display: inline-block;
  padding: 0 var(--e-sm);
  border-radius: var(--radius-pill);
  background: var(--ice);
  color: var(--navy);
  font-size: var(--t-2xs);
  font-weight: 700;
  line-height: 20px;
}

.cm-chapa-publico {
  background: var(--success-bg);
  color: var(--success);
}