/* Palpedia TCG — Colección (atlas).
   Hoja de tcg/collection.html (el Pack Opener tiene su propia hoja,
   styles/pages/tcg-hub/pack-opener.css).
   Consume los tokens globales de index.css, las primitivas de
   tcg-hub/chrome.css (.tcg-panel, .tcg-eyebrow…) y el stack atlas
   (catalog-controls + tcg/cards.css).
   Todo va prefijado con body.tcg-hub-page; nunca se toca .app-header/.app-footer. */

/* ---------- Estados de carga / error ---------- */

body.tcg-hub-page .tcg-collection-state {
  padding: 3rem 0;
  color: var(--muted, #9fb5b7);
  text-align: center;
}

body.tcg-hub-page .tcg-collection-state--error a {
  color: var(--cyan, #62e7ed);
}

/* ---------- Botones locales ---------- */

body.tcg-hub-page .tcg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem 1rem;
  background: rgba(98, 231, 237, .08);
  border: 1px solid color-mix(in srgb, var(--cyan, #62e7ed) 45%, transparent);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  color: var(--cyan, #62e7ed);
  font-family: "Exo", system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms var(--ease-out, cubic-bezier(.22, 1, .36, 1)), color 180ms var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}

body.tcg-hub-page .tcg-btn:hover:not(:disabled),
body.tcg-hub-page .tcg-btn:focus-visible:not(:disabled) {
  background: rgba(98, 231, 237, .18);
  color: var(--cyan-soft, #a6fbf6);
}

body.tcg-hub-page .tcg-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

body.tcg-hub-page .tcg-btn--primary {
  background: var(--cyan, #62e7ed);
  border-color: var(--cyan, #62e7ed);
  color: #07151b;
}

body.tcg-hub-page .tcg-btn--primary:hover:not(:disabled),
body.tcg-hub-page .tcg-btn--primary:focus-visible:not(:disabled) {
  background: var(--cyan-soft, #a6fbf6);
  color: #07151b;
}

body.tcg-hub-page .tcg-btn--danger {
  background: rgba(255, 112, 88, .08);
  border-color: rgba(255, 112, 88, .45);
  color: #ff9a86;
}

body.tcg-hub-page .tcg-btn--danger:hover:not(:disabled),
body.tcg-hub-page .tcg-btn--danger:focus-visible:not(:disabled) {
  background: rgba(255, 112, 88, .18);
  color: #ffb3a6;
}

body.tcg-hub-page .tcg-btn--small {
  padding: .3rem .65rem;
  font-size: .7rem;
}

/* ---------- Ritmo vertical de secciones atlas ---------- */

body.tcg-hub-page .tcg-results + .catalog-command--atlas,
body.tcg-hub-page .catalog-command--atlas + .tcg-results,
body.tcg-hub-page .tcg-results + .tcg-results {
  margin-top: clamp(1.8rem, 3.2vw, 2.8rem);
}

/* ---------- Hero de colección: resumen + copia de seguridad ---------- */

body.tcg-hub-page .tcg-collection-hero__panels {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, .9fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

body.tcg-hub-page .tcg-collection-summary {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1rem, 2vw, 1.5rem);
}

body.tcg-hub-page .tcg-collection-summary__total {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .2rem;
}

body.tcg-hub-page .tcg-collection-summary__total strong {
  color: var(--cyan, #62e7ed);
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.02em;
}

body.tcg-hub-page .tcg-collection-summary__total span {
  color: var(--muted, #9fb5b7);
  font-size: .85rem;
}

body.tcg-hub-page .tcg-collection-summary__sets {
  display: grid;
  gap: .6rem;
  align-content: center;
}

body.tcg-hub-page .tcg-meter {
  display: grid;
  grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  font-size: .8rem;
}

body.tcg-hub-page .tcg-meter__label {
  color: var(--text, #edf7f5);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.tcg-hub-page .tcg-meter__track {
  height: .55rem;
  background: rgba(7, 21, 27, .85);
  border: 1px solid rgba(95, 147, 153, .22);
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
  overflow: hidden;
}

body.tcg-hub-page .tcg-meter__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan, #62e7ed), var(--amber, #f2b84b));
  transition: width 320ms var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}

body.tcg-hub-page .tcg-meter__value {
  color: var(--muted, #9fb5b7);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Panel importar / exportar */

body.tcg-hub-page .tcg-collection-io {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: clamp(1rem, 2vw, 1.5rem);
}

body.tcg-hub-page .tcg-collection-io h3 {
  margin: 0;
  color: var(--text, #edf7f5);
  font-size: 1rem;
}

body.tcg-hub-page .tcg-collection-io > p {
  margin: 0;
  color: var(--muted, #9fb5b7);
  font-size: .84rem;
  line-height: 1.55;
}

body.tcg-hub-page .tcg-collection-io__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

body.tcg-hub-page .tcg-collection-io__feedback {
  margin: auto 0 0;
  min-height: 1.1em;
  color: var(--cyan, #62e7ed);
  font-size: .8rem;
}

/* ---------- Matriz set × rareza ---------- */

body.tcg-hub-page .tcg-matrix-panel {
  padding: clamp(.9rem, 1.8vw, 1.3rem);
  overflow-x: auto;
}

body.tcg-hub-page .tcg-matrix {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: .78rem;
}

body.tcg-hub-page .tcg-matrix th,
body.tcg-hub-page .tcg-matrix td {
  padding: .5rem .55rem;
  text-align: center;
}

body.tcg-hub-page .tcg-matrix thead th {
  color: var(--muted, #9fb5b7);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(95, 147, 153, .25);
}

body.tcg-hub-page .tcg-matrix thead th:last-child {
  color: var(--cyan, #62e7ed);
}

body.tcg-hub-page .tcg-matrix tbody tr + tr th,
body.tcg-hub-page .tcg-matrix tbody tr + tr td {
  border-top: 1px solid rgba(95, 147, 153, .12);
}

body.tcg-hub-page .tcg-matrix tbody th {
  max-width: 230px;
  color: var(--text, #edf7f5);
  font-weight: 600;
  text-align: left;
}

body.tcg-hub-page .tcg-matrix tbody th span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.tcg-hub-page .tcg-matrix tbody th small {
  color: var(--muted, #9fb5b7);
  font-size: .62rem;
  letter-spacing: .08em;
}

body.tcg-hub-page .tcg-matrix__cell {
  background: linear-gradient(90deg, color-mix(in srgb, currentColor 13%, transparent) var(--fill, 0%), transparent var(--fill, 0%));
  font-variant-numeric: tabular-nums;
}

body.tcg-hub-page .tcg-matrix__cell strong {
  display: block;
  font-weight: 700;
}

body.tcg-hub-page .tcg-matrix__cell small {
  font-size: .62rem;
  opacity: .85;
}

body.tcg-hub-page .tcg-matrix__cell.is-zero { color: #ff9a86; }
body.tcg-hub-page .tcg-matrix__cell.is-low { color: var(--amber, #f2b84b); }
body.tcg-hub-page .tcg-matrix__cell.is-high { color: #b8e06a; }
body.tcg-hub-page .tcg-matrix__cell.is-complete { color: var(--cyan, #62e7ed); }

body.tcg-hub-page .tcg-matrix__empty {
  color: rgba(95, 147, 153, .35);
}

body.tcg-hub-page .tcg-matrix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin: .85rem 0 0;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
}

body.tcg-hub-page .tcg-matrix-legend span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

body.tcg-hub-page .tcg-matrix-legend span::before {
  content: "";
  width: .55rem;
  height: .55rem;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

body.tcg-hub-page .tcg-matrix-legend .is-zero { color: #ff9a86; }
body.tcg-hub-page .tcg-matrix-legend .is-low { color: var(--amber, #f2b84b); }
body.tcg-hub-page .tcg-matrix-legend .is-high { color: #b8e06a; }
body.tcg-hub-page .tcg-matrix-legend .is-complete { color: var(--cyan, #62e7ed); }

/* ---------- Ajustes atlas propios de la colección ---------- */

body.tcg-hub-page .catalog-command--atlas .inline-filter-groups {
  grid-template-columns: minmax(0, 1fr);
}

body.tcg-hub-page .catalog-command--atlas .inline-filters .tcg-misc-filters {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Sin menú de ordenación, el reset queda solo: ancho natural, alineado a la derecha */
body.tcg-hub-page .catalog-command--atlas .atlas-sort-control .atlas-reset:only-child {
  grid-column: 1 / -1;
  justify-self: end;
  min-width: 10rem;
  padding-inline: 1.1rem;
}

/* ---------- Grid atlas: estado de posesión, badge y stepper ---------- */

body.tcg-hub-page .tcg-card.is-owned {
  --card-corner-1: #62e7ed;
  --card-corner-2: #62e7ed;
  --card-corner-3: #62e7ed;
  --card-corner-4: #62e7ed;
}

body.tcg-hub-page .tcg-card.is-owned .tcg-card-selection-frame {
  opacity: .92;
}

body.tcg-hub-page .tcg-card.is-owned .tcg-card-image {
  border-color: color-mix(in srgb, var(--cyan, #62e7ed) 38%, rgba(91, 129, 136, .42));
}

body.tcg-hub-page .tcg-card.is-missing .tcg-card-image img {
  filter: grayscale(.82);
  opacity: .48;
}

body.tcg-hub-page .tcg-card.is-missing .tcg-card-number b {
  color: #6f9399;
}

/* Stepper de copias 0–9, superficie atlas */

body.tcg-hub-page .tcg-stepper {
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  align-items: stretch;
  min-height: 1.95rem;
  margin-top: .4rem;
  background: linear-gradient(180deg, rgba(9, 28, 36, .9), rgba(5, 17, 23, .96));
  border: 1px solid rgba(105, 217, 230, .16);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  overflow: hidden;
}

body.tcg-hub-page .tcg-stepper button {
  border: 0;
  padding: 0;
  background: rgba(104, 213, 227, .06);
  color: #79aeb6;
  font: inherit;
  font-size: .98rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms var(--ease-out, cubic-bezier(.22, 1, .36, 1)), color 160ms var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}

body.tcg-hub-page .tcg-stepper button:hover:not(:disabled),
body.tcg-hub-page .tcg-stepper button:focus-visible:not(:disabled) {
  background: rgba(104, 213, 227, .16);
  color: var(--cyan-soft, #a6fbf6);
}

body.tcg-hub-page .tcg-stepper button:disabled {
  opacity: .3;
  cursor: not-allowed;
}

body.tcg-hub-page .tcg-stepper output {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #9fb5b7);
  font-size: .85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body.tcg-hub-page .tcg-stepper.has-copies {
  border-color: color-mix(in srgb, var(--cyan, #62e7ed) 45%, transparent);
  box-shadow: 0 0 10px rgba(98, 231, 237, .12);
}

body.tcg-hub-page .tcg-stepper.has-copies button {
  background: rgba(98, 231, 237, .1);
  color: var(--cyan, #62e7ed);
}

body.tcg-hub-page .tcg-stepper.has-copies output {
  color: var(--cyan, #62e7ed);
}

/* ---------- Barra de acciones masivas (cartas visibles) ---------- */

body.tcg-hub-page .tcg-bulkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .9rem;
  margin: 0 0 .9rem;
  padding: .55rem .8rem;
  background: rgba(7, 21, 27, .6);
  border: 1px solid rgba(95, 147, 153, .18);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

body.tcg-hub-page .tcg-bulkbar__count {
  margin: 0;
  color: var(--muted, #9fb5b7);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

body.tcg-hub-page .tcg-bulkbar__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
}

body.tcg-hub-page .tcg-bulkbar__feedback {
  flex-basis: 100%;
  margin: 0;
  color: var(--cyan, #62e7ed);
  font-size: .8rem;
}

body.tcg-hub-page .tcg-bulkbar__feedback:empty {
  display: none;
}

/* Botón "Complete set" por fila de la matriz + su feedback */

body.tcg-hub-page .tcg-matrix__complete {
  margin-top: .35rem;
  padding: .22rem .5rem;
  font-size: .6rem;
}

body.tcg-hub-page .tcg-matrix-feedback {
  margin: .6rem 0 0;
  color: var(--cyan, #62e7ed);
  font-size: .8rem;
}

body.tcg-hub-page .tcg-matrix-feedback:empty {
  display: none;
}

/* ---------- Empty states con el dorso oficial ---------- */

body.tcg-hub-page .tcg-empty {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  margin: 0 0 1.2rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: rgba(7, 21, 27, .6);
  border: 1px dashed rgba(98, 231, 237, .3);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

body.tcg-hub-page .tcg-empty[hidden] {
  display: none;
}

body.tcg-hub-page .tcg-empty > img {
  flex: 0 0 auto;
  width: clamp(84px, 12vw, 122px);
  height: auto;
  border-radius: 4.5% / 3.2%;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}

body.tcg-hub-page .tcg-empty h3 {
  margin: 0 0 .3rem;
  color: var(--text, #edf7f5);
  font-size: 1.05rem;
}

body.tcg-hub-page .tcg-empty p {
  margin: 0 0 .8rem;
  color: var(--muted, #9fb5b7);
  font-size: .86rem;
  line-height: 1.55;
}

/* Dorso también como ancla del empty-state atlas (sin coincidencias) */

body.tcg-hub-page .empty-state img {
  display: block;
  width: 96px;
  height: auto;
  margin: 0 auto .7rem;
  border-radius: 6px;
  opacity: .9;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .4);
}

/* ---------- Responsive / motion ---------- */

@media (max-width: 1120px) {
  body.tcg-hub-page .catalog-command--atlas .inline-filters .tcg-misc-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  body.tcg-hub-page .tcg-collection-hero__panels,
  body.tcg-hub-page .tcg-collection-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  body.tcg-hub-page .catalog-command--atlas .inline-filters .tcg-misc-filters {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  body.tcg-hub-page .tcg-meter {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.tcg-hub-page .tcg-meter__track {
    grid-column: 1 / -1;
    order: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tcg-hub-page .tcg-meter__fill {
    transition: none;
  }
}