/* H6 (el álbum): el diálogo sobre el inicio. Solo tokens: la rareza usa los `--rz-*` de las cartas (H2a). */
.in-album {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 10px 18px; border-radius: var(--r-panel); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--linea);
  font: 600 12px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  transition: box-shadow 160ms ease, transform 110ms ease;
}
.in-album:hover { box-shadow: inset 0 0 0 1px var(--linea-fuerte, var(--linea)); }
.in-album:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.in-album-cuenta { color: var(--ink-dim); font-weight: 500; letter-spacing: 0.04em; text-transform: none; }

.al {
  position: fixed; inset: 0; z-index: 210; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: var(--s-4);
  background: color-mix(in srgb, var(--bg-void) 90%, transparent); outline: none;
}
.al-panel {
  display: flex; flex-direction: column; gap: var(--s-3); width: min(880px, 100%); max-height: min(720px, 100%); padding: 20px 22px;
  border-radius: var(--r-panel); background: var(--panel-opaco); box-shadow: inset 0 0 0 1px var(--linea), 0 24px 60px var(--sombra);
  color: var(--ink);
}
.al-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.al-titulo { margin: 0; font: 700 26px/1.1 var(--f-display); }
.al-total { margin: 0; flex: 1; color: var(--ink-dim); font: 500 12px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.al-cerrar {
  all: unset; box-sizing: border-box; cursor: pointer; padding: 7px 12px; border-radius: var(--r-control); box-shadow: inset 0 0 0 1px var(--linea);
  font: 600 11px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.al-cerrar:hover { box-shadow: inset 0 0 0 1px var(--ink-mute); }
.al-cerrar:focus-visible, .al-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.al-aviso { margin: 0; color: var(--warn, var(--gold)); font: 400 13px/1.35 var(--f-cuerpo); }

.al-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.al-tab {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 3px; padding: 9px 14px; min-width: 112px; border-radius: var(--r-control);
  box-shadow: inset 0 0 0 1px var(--linea); color: var(--ink-dim);
}
.al-tab b { font: 700 13px/1 var(--f-display); color: var(--ink); }
.al-tab span { font: 500 11px/1 var(--f-mono); letter-spacing: 0.04em; }
.al-tab[data-rareza='comun'] { --al-rz: var(--rz-comun); }
.al-tab[data-rareza='rara'] { --al-rz: var(--rz-rara); }
.al-tab[data-rareza='epica'] { --al-rz: var(--rz-epica); }
.al-tab[data-rareza='legendaria'] { --al-rz: var(--rz-legendaria); }
.al-tab[aria-selected='true'] { box-shadow: inset 0 0 0 2px var(--al-rz); background: color-mix(in srgb, var(--al-rz) 14%, transparent); }
.al-tab[aria-selected='true'] span { color: var(--al-rz); }

.al-lista {
  list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: var(--s-2); min-height: 0;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.al-lista[data-rareza='comun'] { --al-rz: var(--rz-comun); }
.al-lista[data-rareza='rara'] { --al-rz: var(--rz-rara); }
.al-lista[data-rareza='epica'] { --al-rz: var(--rz-epica); }
.al-lista[data-rareza='legendaria'] { --al-rz: var(--rz-legendaria); }
.al-item { display: grid; gap: 4px; padding: 9px 12px; border-radius: var(--r-control); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--al-rz) 40%, transparent); background: var(--panel-claro); }
.al-item.visto { box-shadow: inset 3px 0 0 var(--al-rz); }
.al-tipo { color: var(--ink-mute); font: 600 10px/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.al-nombre { color: var(--ink-mute); font: 500 14px/1.25 var(--f-cuerpo); }
.al-item.visto .al-nombre { color: var(--ink); }

@media (max-width: 640px) {
  .al { padding: 0; align-items: end; }
  .al-panel { width: 100%; max-height: 92%; border-radius: var(--r-panel) var(--r-panel) 0 0; padding: 16px 16px 20px; }
  .al-tab { min-width: 0; flex: 1 1 40%; }
  .al-lista { grid-template-columns: 1fr; }
}