/* ── Mi colección (/mi-coleccion, tanda 365) ──
   Hoja propia: solo la carga esta pantalla. Prefijo `mc-`. */

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

.mc-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-lg);
  margin-bottom: var(--e-lg);
}

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

.mc-lema,
.mc-nota {
  margin-top: var(--e-xs);
  color: var(--text-mid);
  font-size: var(--t-md);
}

.mc-nota {
  margin: 0 0 var(--e-lg);
  font-size: var(--t-sm);
}

.mc-aviso,
.mc-entrar {
  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);
  font-size: var(--t-md);
}

.mc-entrar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-md);
}

.mc-entrar .btn-primary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.mc-compartir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-md);
}

.mc-interruptor {
  display: inline-flex;
  align-items: center;
  gap: var(--e-sm);
  min-height: 44px;
  color: var(--text-mid);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
}

.mc-interruptor input {
  width: 20px;
  height: 20px;
}

.mc-compartir .link-btn {
  min-height: 44px;
}

/* ── El resumen ── */
.mc-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e-md);
  margin: 0 0 var(--e-sm);
}

.mc-resumen:empty {
  display: none;
}

.mc-cifra {
  padding: var(--e-md) var(--e-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.mc-cifra dt {
  color: var(--text-mid);
  font-size: var(--t-xs);
  font-weight: 600;
}

.mc-cifra dd {
  margin: var(--e-xs) 0 0;
  font-size: var(--t-xl);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.mc-cifra-valor {
  border-color: var(--navy);
}

/* ── Las pestañas ── */
.mc-pestanias {
  display: flex;
  gap: var(--e-xs);
  margin-bottom: var(--e-lg);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.mc-pestania {
  min-height: 44px;
  padding: 0 var(--e-lg);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-mid);
  font: inherit;
  font-size: var(--t-md);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.mc-pestania.activa {
  border-bottom-color: var(--navy);
  color: var(--text);
}

.mc-pestania:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}

/* ── Las cartas ── */
.mc-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-sm);
  margin-bottom: var(--e-lg);
}

.mc-filtros input,
.mc-filtros select {
  flex: 1 1 180px;
  min-width: 0;
  min-height: 44px;
}

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

.mc-carta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
}

.mc-carta-foto {
  position: relative;
  display: block;
  padding: var(--e-sm) var(--e-sm) 0;
}

.mc-carta-foto img,
.mc-resultado img,
.mc-bolsillo img,
.mc-anadir-elegida img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 245 / 342;
  border-radius: 6px;
}

.mc-cantidad {
  position: absolute;
  top: var(--e-md);
  left: var(--e-md);
  z-index: 1;
  padding: 1px var(--e-sm);
  border-radius: var(--radius-pill);
  background: rgba(20, 20, 25, 0.82);
  color: var(--blanco-fijo);
  font-size: var(--t-xs);
  font-weight: 700;
}

.mc-carta-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--e-xs);
  padding: var(--e-sm) var(--e-md) var(--e-md);
}

.mc-carta-nombre {
  overflow: hidden;
  color: var(--text);
  font-size: var(--t-md);
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-carta-set {
  overflow: hidden;
  color: var(--text-mid);
  font-size: var(--t-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-xs);
}

.mc-chip {
  padding: 1px var(--e-sm);
  border-radius: var(--radius-pill);
  background: var(--ice);
  color: var(--text);
  font-size: var(--t-2xs);
  font-weight: 700;
}

.mc-carta-valor {
  margin-top: auto;
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.mc-unidad,
.mc-sin-precio {
  color: var(--text-mid);
  font-size: var(--t-xs);
  font-weight: 400;
}

.mc-carta-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-md);
}

/* Las dos acciones de una carta (tanda 369). Eran dos enlaces de texto
   iguales —«Cardmarket» y «Editar»— y no se distinguían de un vistazo:
   uno te SACA de la web y el otro abre una ventana aquí dentro. Ahora
   cada uno lleva delante lo que es, y la de Cardmarket lleva su marca.

   Chapas y no enlaces sueltos: en una tarjeta con foto, precio y chips,
   dos enlaces subrayados al fondo se leían como el pie de página. */
.mc-accion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 var(--e-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--text-mid);
  font-size: var(--t-xs);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s var(--ease);
}

.mc-accion:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

/* La marca no se repinta con nuestro tema: es de otro. Se le pone una
   chapa blanca fija debajo, que en claro no se ve (blanco sobre blanco)
   y en oscuro es lo que la hace legible. Aclararle el azul sería
   inventarse su marca. */
.mc-accion-cm .cm-marca {
  flex: 0 0 auto;
  box-sizing: content-box;
  padding: 2px;
  border-radius: 4px;
  background: var(--blanco-fijo);
}

@media (pointer: fine) {
  .mc-accion {
    min-height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mc-accion {
    transition: none;
  }
}

.mc-vacio {
  padding: var(--e-xl);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
}

/* ── El álbum ── */
.mc-album-barra,
.mc-tocar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-md);
  margin-bottom: var(--e-md);
}

.mc-album-barra select {
  flex: 1 1 280px;
  min-width: 0;
  min-height: 44px;
}

.mc-tocar {
  padding: var(--e-sm) var(--e-md);
  border-radius: var(--radius-md);
  background: var(--ice);
  font-size: var(--t-sm);
}

.mc-tocar select {
  min-height: 44px;
}

.mc-progreso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-md);
  margin-bottom: var(--e-lg);
  font-size: var(--t-md);
}

.mc-barra {
  flex: 1 1 200px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--ice);
  overflow: hidden;
}

.mc-barra i {
  display: block;
  width: var(--ancho, 0);
  height: 100%;
  border-radius: inherit;
  background: var(--success);
}

/* Las hojas del archivador: dos abiertas en pantalla ancha, una en el
   móvil. Cada una, 3×3 bolsillos, que es el archivador de siempre. */
/* El archivador abierto: dos hojas en pantalla ancha, una en el móvil.
 *
 * Columnas FIJAS y no `auto-fit` (tanda 369). Con `auto-fit`, una hoja
 * sola se lleva todas las pistas y se estira al ancho entero: los
 * bolsillos salían al doble de tamaño y la página parecía otra cosa. Se
 * veía en los álbumes soñados, que suelen tener menos de nueve cartas y
 * por tanto UNA sola hoja — el álbum de un set casi siempre tiene dos y
 * por eso ahí nunca cantó.
 *
 * Es pariente de la lección de la 316: `auto-fit` decide por su cuenta
 * cuántas pistas hay, y eso está bien para una rejilla de tarjetas y mal
 * para algo que tiene que medir SIEMPRE lo mismo. Un archivador tiene el
 * tamaño que tiene, lleve una hoja o cien. */
.mc-archivador {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-2xl);
}

@media (min-width: 900px) {
  .mc-archivador {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── El resumen (tanda 374) ──
 * Cuatro cajas: repetidas, lo más valioso y los dos repartos. En
 * escritorio, dos columnas; en el móvil, una.
 */
/* Dos columnas como mucho, no «las que quepan»: son CUATRO cajas, y con
   tres columnas la cuarta se queda sola en una fila con media pantalla
   en blanco al lado. `min(100%, 420px)` para que en el móvil no se
   desborde — un `minmax` con un mínimo mayor que la pantalla saca barra
   horizontal. */
.mc-resumen-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: var(--e-lg);
  align-items: start;
}

.mc-resumen-caja {
  padding: var(--e-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.mc-resumen-caja h3 {
  margin-bottom: var(--e-md);
  font-size: var(--t-md);
}

.mc-lista-cartas {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-fila-carta {
  display: flex;
  align-items: center;
  gap: var(--e-md);
  /* 44 porque la fila ENTERA es un enlace a la carta. */
  min-height: 44px;
}

.mc-fila-carta > a {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: var(--e-md);
  color: inherit;
  text-decoration: none;
}

/* El hueco de la miniatura va reservado con la proporción de una carta:
   son doce imágenes y sin esto la lista baila al llegar. */
.mc-fila-foto {
  flex: 0 0 auto;
  width: 32px;
  aspect-ratio: 245 / 342;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg);
}

.mc-fila-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* `min-width: 0` para que el recorte funcione: sin él, el nombre estira
   la fila en vez de cortarse (la lección de la 320). */
.mc-fila-nombre {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  font-size: var(--t-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-fila-nombre small {
  color: var(--text-mid);
  font-size: var(--t-2xs);
  font-weight: 400;
}

.mc-fila-dato {
  flex: 0 0 auto;
  color: var(--text-mid);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

.mc-reparto {
  display: flex;
  flex-direction: column;
  gap: var(--e-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-reparto li {
  display: flex;
  align-items: center;
  gap: var(--e-md);
}

.mc-reparto-nombre {
  flex: 0 0 40%;
  overflow: hidden;
  font-size: var(--t-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-reparto-n {
  flex: 0 0 auto;
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ── La estantería (tanda 372) ──
 *
 * La rejilla de colecciones con su logo y su progreso. Sustituye a un
 * `<select>` de 220 opciones, que además de feo escondía lo único que
 * engancha: cuánto llevas.
 *
 * `auto-fill` y no `auto-fit` (la lección de la 369): con tres
 * colecciones, `auto-fit` las estiraría a un tercio de pantalla cada
 * una. Una tarjeta de colección mide lo que mide, haya tres o doscientas.
 */
.mc-estanteria-barra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-md);
  margin-bottom: var(--e-lg);
}

.mc-estanteria-barra input,
.mc-estanteria-barra select {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 44px;
}

.mc-estanteria-titulo {
  margin: var(--e-xl) 0 var(--e-md);
  font-size: var(--t-md);
}

.mc-estanteria-titulo:first-child {
  margin-top: 0;
}

.mc-estanteria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--e-md);
}

.mc-set-tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--e-sm);
  padding: var(--e-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s var(--ease);
}

.mc-set-tarjeta:hover {
  border-color: var(--navy);
}

/* El logo lleva un alto FIJO y no medidas: los hay anchos y los hay
   cuadrados, y darle width/height mentiría sobre su forma. Con el alto
   reservado, la rejilla no baila mientras cargan doscientos. */
.mc-set-logo {
  display: grid;
  place-items: center;
  height: 56px;
}

.mc-set-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mc-set-nombre {
  font-size: var(--t-sm);
  font-weight: 700;
}

.mc-set-cuenta {
  color: var(--text-mid);
  font-size: var(--t-xs);
  font-weight: 600;
}

/* La barra, sin estirarse. `.mc-barra` nace con `flex: 1 1 200px` porque
   vive en una fila donde tiene que llenar el hueco; aquí la tarjeta es
   una COLUMNA, así que ese `flex-grow` la estira a lo ALTO y con el
   radio de píldora se convierte en un óvalo del tamaño de la tarjeta.
   Un hijo de flex hereda el eje del padre, no el del sitio donde se
   escribió la regla. */
.mc-set-tarjeta .mc-barra {
  flex: 0 0 8px;
  width: 100%;
}

/* La completa se marca: es el premio de coleccionar, y con doscientas
   tarjetas iguales no se veía cuál habías terminado. */
.mc-set-tarjeta.completo {
  border-color: var(--success);
}

.mc-set-tarjeta.completo .mc-set-cuenta {
  color: var(--success);
}

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

/* La cabecera del archivador abierto: volver, el nombre y el filtro. */
.mc-album-volver {
  flex: 0 0 auto;
}

.mc-album-titulo {
  flex: 1;
  min-width: 0;
  font-size: var(--t-lg);
}

/* ── La tapa (tanda 371) ──
 *
 * Lo que convierte «una rejilla de cartas» en «mi archivador». El color
 * lo elige quien mira y se guarda en su navegador (ver
 * js/mi-coleccion/archivador.js).
 *
 * Los ocho colores salen de la escala de la web, no inventados: un color
 * de tapa suelto sería el primero de veinte. `--tapa` es lo único que
 * cambia entre uno y otro; todo lo demás se deriva de él, así que añadir
 * el noveno es una línea.
 */
.mc-binder {
  --tapa: var(--navy);
  padding: var(--e-md);
  border-radius: var(--radius-lg);
  background: var(--tapa);
  /* El canto de la carpeta: un borde interior más claro arriba y más
     oscuro abajo es lo que da el volumen sin una imagen. */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 25%),
    inset 0 -2px 0 rgb(0 0 0 / 25%),
    var(--shadow-md);
}

.mc-binder[data-tapa='azul'] { --tapa: var(--navy); }
.mc-binder[data-tapa='rojo'] { --tapa: var(--danger-solid); }
.mc-binder[data-tapa='verde'] { --tapa: var(--success); }
.mc-binder[data-tapa='amarillo'] { --tapa: #d9a521; }
.mc-binder[data-tapa='morado'] { --tapa: #6d4aa8; }
.mc-binder[data-tapa='rosa'] { --tapa: #c04a7e; }
.mc-binder[data-tapa='negro'] { --tapa: #22303d; }
.mc-binder[data-tapa='crema'] { --tapa: #b9a888; }

/* Los botones del color, redondos y del color que ponen. */
.mc-tapas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-sm);
  margin-bottom: var(--e-md);
}

.mc-tapa {
  --tapa: var(--navy);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--tapa);
  cursor: pointer;
}

.mc-tapa[data-tapa='azul'] { --tapa: var(--navy); }
.mc-tapa[data-tapa='rojo'] { --tapa: var(--danger-solid); }
.mc-tapa[data-tapa='verde'] { --tapa: var(--success); }
.mc-tapa[data-tapa='amarillo'] { --tapa: #d9a521; }
.mc-tapa[data-tapa='morado'] { --tapa: #6d4aa8; }
.mc-tapa[data-tapa='rosa'] { --tapa: #c04a7e; }
.mc-tapa[data-tapa='negro'] { --tapa: #22303d; }
.mc-tapa[data-tapa='crema'] { --tapa: #b9a888; }

/* El elegido, con un aro por fuera: el color ya lo lleva dentro, así que
   el borde no puede ser lo que distinga. */
.mc-tapa[aria-pressed='true'] {
  border-color: var(--white);
  box-shadow: 0 0 0 2px var(--text);
}

/* Las anillas, en el lomo. Van en una capa encima del archivador y no
   entre las hojas: metidas en la rejilla contarían como una columna (la
   lección de la 316). Solo con las dos hojas abiertas. */
.mc-anillas {
  position: absolute;
  top: 14%;
  bottom: 14%;
  left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 32px;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Cada anilla: un óvalo abierto, con el metal claro arriba y la sombra
   abajo. Sin imagen — dos bordes y un degradado. */
/* Cada anilla es un aro ABIERTO: por dentro se ve la tapa, que es lo que
   la hace parecer metal y no un botón. Con relleno salían tres discos
   oscuros. */
.mc-anillas i {
  height: 34px;
  border: 3px solid rgb(255 255 255 / 75%);
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 45%),
    inset 0 -1px 2px rgb(0 0 0 / 35%);
}

.mc-hoja {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-sm);
  padding: var(--e-lg) var(--e-md) var(--e-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* La cabecera de cada hoja: «Página 5» y el rango de números. Lo primero
   dice dónde estás; lo segundo, si esta es la hoja que buscabas sin leer
   los nueve bolsillos. */
.mc-hoja-cabecera {
  position: absolute;
  top: var(--e-xs);
  right: var(--e-md);
  left: var(--e-md);
  display: flex;
  justify-content: space-between;
  color: var(--text-dim);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mc-bolsillo {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 245 / 342;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--text-mid);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* ── Lo que te falta (tanda 371) ──
 *
 * Antes iba en gris al 30 %: se veía qué carta es, pero parecía una foto
 * mal cargada. Ahora se ve como GRABADA en la funda vacía — casi sin
 * color y muy aclarada, con la sombra del bolsillo por encima. Dice lo
 * mismo (esta no la tienes, y es esta) pero cuenta que el hueco es del
 * álbum, no un fallo.
 *
 * `saturate` en vez de `grayscale(1)` a secas: un pelín de color deja
 * reconocer de un vistazo si lo que falta es un Charizard o un Squirtle,
 * que es para lo que se mira la página. */
.mc-bolsillo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.12) brightness(1.35) contrast(0.7);
  opacity: 0.55;
}

/* El bolsillo vacío: el plástico, con su sombra dentro. */
.mc-bolsillo:not(.tengo) {
  background: var(--bg);
  box-shadow: inset 0 1px 6px rgb(0 0 0 / 12%);
}

.mc-bolsillo.tengo img {
  filter: none;
  opacity: 1;
}

/* Y la que SÍ tienes, dentro de su funda: el brillo del plástico por
   encima. Es lo que hace que la página parezca un archivador y no una
   rejilla de imágenes. `pointer-events: none` porque va sobre el enlace
   que ocupa el bolsillo entero — sin él se come el clic, y no daría
   ningún error. */
.mc-bolsillo.tengo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgb(255 255 255 / 28%) 0 22%, rgb(255 255 255 / 0%) 45%);
}

/* El enlace que cubre el bolsillo entero (tanda 368). El bolsillo pasó a
   ser una caja para poder llevar botones dentro, así que lo que lleva a
   la ficha es esta capa: cubre todo salvo donde el mando se le pone
   encima, que es lo que se quiere. */
.mc-bolsillo-enlace {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

/* Con mando, el número de la carta se va ARRIBA: abajo está el mando y
   si no se pisarían. */
.mc-bolsillo-con-mando .mc-bolsillo-num {
  top: var(--e-xs);
  right: var(--e-xs);
  bottom: auto;
}

.mc-bolsillo-num {
  position: absolute;
  right: var(--e-xs);
  bottom: var(--e-xs);
  padding: 0 var(--e-xs);
  border-radius: 4px;
  background: var(--white);
  color: var(--text);
  font-size: var(--t-2xs);
  font-weight: 700;
}

/* Sin mando, el número solo sale en lo que te FALTA: es el dato con el
   que se busca la carta, y sobre la carta a color estorba.
   Con mando (tanda 368) sale siempre: se ha ido arriba, ya no pisa nada,
   y en un archivador el número de bolsillo es justo por donde te guías.
   Si desapareciera en las que tienes, la cuadrícula quedaría con huecos
   numerados y otros no, que se lee peor que con todos. */
.mc-bolsillo.tengo:not(.mc-bolsillo-con-mando) .mc-bolsillo-num {
  display: none;
}

.mc-bolsillo .mc-cantidad {
  top: var(--e-xs);
  left: var(--e-xs);
}

/* La cara del archivador que no tiene cartas: se ve que ESTÁ, sin
   fingir que hay algo dentro. */
.mc-hoja-fantasma {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}

.mc-bolsillo-vacio {
  border-style: dashed;
  background: transparent;
  cursor: default;
}

.mc-bolsillo:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* Los mandos del archivador, arriba (tanda 371). */
.mc-album-mandos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-sm);
  margin-bottom: var(--e-md);
}

.mc-album-mandos .btn-secondary,
.mc-album-mandos select {
  min-height: 44px;
}

.mc-album-mandos #mcAlbumPaginas {
  font-size: var(--t-sm);
  font-weight: 600;
}

/* «Personalizar» se va a la derecha: no es de pasar página, es de cómo
   se ve. Juntos parecían la misma familia de botones. */
.mc-album-tapa {
  margin-left: auto;
}

.mc-album-paginas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-lg);
  margin-top: var(--e-lg);
  color: var(--text-mid);
  font-size: var(--t-sm);
}

.mc-album-paginas .btn-secondary {
  min-height: 44px;
}

/* ── Añadir ── */
.mc-anadir-buscar {
  width: 100%;
  min-height: 44px;
  margin-bottom: var(--e-lg);
}

.mc-anadir-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-lg);
  margin-bottom: var(--e-xl);
  padding: var(--e-lg);
  border: 1px solid var(--navy);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.mc-anadir-elegida {
  display: flex;
  gap: var(--e-md);
  align-items: flex-start;
  flex: 1 1 280px;
}

.mc-anadir-elegida img {
  width: 96px;
  flex-shrink: 0;
}

.mc-anadir-campos,
.mc-editor-campos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e-md);
  flex: 2 1 360px;
}

.mc-anadir-campos label,
.mc-editor-campos label {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
  color: var(--text-mid);
  font-size: var(--t-xs);
  font-weight: 600;
}

.mc-anadir-campos select,
.mc-anadir-campos input,
.mc-editor-campos select,
.mc-editor-campos input,
.mc-anadir-campos .btn-primary {
  min-height: 44px;
}

.mc-anadir-campos input[type='number'],
.mc-editor-campos input[type='number'] {
  width: 96px;
}

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

.mc-resultado {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
  padding: var(--e-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mc-resultado:hover,
.mc-resultado:focus-visible {
  border-color: var(--navy);
}

.mc-resultado-nombre {
  font-size: var(--t-sm);
  font-weight: 700;
}

.mc-resultado-set {
  color: var(--text-mid);
  font-size: var(--t-xs);
}

/* ── El editor ── */
.mc-editor {
  width: min(560px, calc(100vw - 32px));
  padding: var(--e-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--text);
}

.mc-editor::backdrop {
  background: rgba(13, 27, 42, 0.5);
}

.mc-editor h2 {
  font-size: var(--t-xl);
}

/* ── La cabecera de la ventana, con la carta (tanda 369) ──
   El escaneo a la izquierda y quién es a la derecha. La foto lleva un
   ancho FIJO y su proporción: si midiera «lo que quepa», la ventana
   pegaría un salto al llegar la imagen. */
.mc-editor-cabecera {
  display: flex;
  gap: var(--e-lg);
  align-items: flex-start;
}

.mc-editor-foto {
  flex: 0 0 auto;
  width: 96px;
  aspect-ratio: 245 / 342;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg);
}

.mc-editor-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mc-editor-quien {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--e-xs);
  align-items: flex-start;
}

.mc-editor-set {
  color: var(--text-mid);
  font-size: var(--t-sm);
}

.mc-editor-campos {
  margin: var(--e-lg) 0;
}

.mc-editor-campos label {
  flex: 1 1 140px;
}

.mc-editor-campos .mc-editor-notas {
  flex-basis: 100%;
}

.mc-editor-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-sm);
}

.mc-editor-acciones span {
  flex: 1;
}

.mc-editor-acciones button {
  min-height: 44px;
}

.mc-borrar {
  color: var(--danger);
}

.mc-fuente {
  max-width: 760px;
  margin-top: var(--e-2xl);
  color: var(--text-mid);
  font-size: var(--t-xs);
}

/* ── Los álbumes soñados (tanda 366) ── */
.mc-albumes-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-md);
  margin-bottom: var(--e-lg);
}

.mc-albumes-cab .mc-nota {
  flex: 1 1 360px;
  margin: 0;
}

.mc-albumes-cab .btn-primary,
.mc-alb-nuevo .btn-primary {
  min-height: 44px;
}

.mc-alb-nuevo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e-md);
  margin-bottom: var(--e-xl);
  padding: var(--e-lg);
  border: 1px solid var(--navy);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.mc-alb-nuevo label {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
  gap: var(--e-xs);
  color: var(--text-mid);
  font-size: var(--t-xs);
  font-weight: 600;
}

.mc-alb-nuevo input,
.mc-alb-nuevo select {
  min-height: 44px;
}

.mc-albumes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--e-lg);
}

.mc-album-tarjeta {
  display: flex;
  gap: var(--e-md);
  align-items: center;
  min-height: 112px;
  padding: var(--e-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mc-album-tarjeta:hover,
.mc-album-tarjeta:focus-visible {
  border-color: var(--navy);
}

.mc-album-portada {
  flex-shrink: 0;
  width: 64px;
  aspect-ratio: 245 / 342;
  border-radius: 6px;
  background: var(--ice);
  overflow: hidden;
}

.mc-album-portada img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mc-album-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-xs);
  min-width: 0;
}

.mc-album-info strong {
  font-size: var(--t-lg);
}

.mc-album-cuenta {
  color: var(--text-mid);
  font-size: var(--t-xs);
}

.mc-alb-volver {
  min-height: 44px;
  margin-bottom: var(--e-sm);
}

input.mc-alb-titulo {
  width: 100%;
  padding: var(--e-xs) 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 700;
}

input.mc-alb-titulo:not([readonly]):hover,
input.mc-alb-titulo:not([readonly]):focus {
  border-color: var(--border-strong);
  background: var(--white);
}

.mc-alb-descripcion {
  width: 100%;
  margin: var(--e-xs) 0 var(--e-md);
  resize: vertical;
}

.mc-alb-descripcion[readonly] {
  border-color: transparent;
  background: transparent;
  resize: none;
}

.mc-alb-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-md);
  margin-bottom: var(--e-md);
}

.mc-alb-barra input[type='search'] {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 44px;
}

.mc-alb-barra .btn-secondary,
.mc-alb-barra .link-btn {
  min-height: 44px;
}

.mc-alb-estado {
  color: var(--text-mid);
  font-size: var(--t-xs);
}

.mc-alb-resultados:not(:empty) {
  max-height: 440px;
  margin-bottom: var(--e-lg);
  overflow-y: auto;
}

/* En un álbum soñado, lo que ya tienes lleva su marca. */
.mc-tengo-marca {
  position: absolute;
  top: var(--e-xs);
  right: var(--e-xs);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--success);
  color: var(--blanco-fijo);
  font-size: var(--t-xs);
  font-weight: 700;
}

.mc-bolsillo-editar {
  cursor: default;
}

.mc-bolsillo-controles {
  position: absolute;
  right: var(--e-xs);
  bottom: var(--e-xs);
  left: var(--e-xs);
  display: flex;
  justify-content: space-between;
  gap: var(--e-xs);
}

.mc-bolsillo-controles button {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
}

@media (pointer: coarse) {
  .mc-bolsillo-controles button {
    min-height: 44px;
  }
}

.mc-bolsillo-controles button:disabled {
  opacity: 0.4;
  cursor: default;
}

.mc-bolsillo-controles [data-quitar] {
  color: var(--danger);
}

/* ── El mando de cada bolsillo (tanda 368) ──
   Va SIEMPRE a la vista y no solo al pasar por encima: en una pantalla
   táctil no hay «pasar por encima», y en el archivador el mando no es un
   extra, es a lo que se viene. Encima del enlace, que ocupa el bolsillo
   entero. */
.mc-bolsillo-mando {
  z-index: 1;
  align-items: center;
  padding: 2px;
  border-radius: var(--radius-pill);
  /* Un velo en vez del blanco a secas: por debajo se sigue viendo la
     carta y el mando no parece una etiqueta pegada. */
  background: color-mix(in srgb, var(--white) 88%, transparent);
  box-shadow: var(--shadow-sm);
}

.mc-bolsillo-mando button {
  flex: 0 0 auto;
  min-width: 32px;
  min-height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: var(--t-md);
  line-height: 1;
}

.mc-bolsillo-mando button:hover:not(:disabled) {
  background: var(--bg);
}

/* La cuenta se lleva el hueco de en medio: así los dos botones quedan en
   los extremos y el número justo entre lo que lo sube y lo que lo baja. */
.mc-bolsillo-cuenta {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: var(--t-xs);
  font-weight: 700;
  text-align: center;
}

/* Sin ninguna copia el número no dice nada («0» es ruido): se calla y
   deja el − apagado, que ya cuenta lo mismo. */
.mc-bolsillo:not(.tengo) .mc-bolsillo-cuenta {
  visibility: hidden;
}

@media (pointer: coarse) {
  .mc-bolsillo-mando button {
    min-width: 44px;
    min-height: 44px;
  }
}

.mc-bolsillo-editar .mc-bolsillo-num {
  display: none;
}

.mc-alb-borrar-zona {
  margin-top: var(--e-xl);
  text-align: right;
}

.mc-alb-borrar-zona .link-btn {
  min-height: 44px;
}