/* =====================================================================
   cartas-ui.css  --  Aislamiento atomico (silo `.cartas-silo`)
   Solo las clases NUEVAS que no existen en el CSS del perfil:
     .c-shiny        variante brillante de una carta
     .c-badge-emisor badge de emisor que pinta CartasUI.badgeEmisor
   NO se redefine aqui .r-comun/.r-raro/.r-epico/.r-dorado: ya viven en
   mi-perfil.html y son la fuente unica de color por rareza.
   ADR-004: todo selector cuelga de `.cartas-silo`. Cero fugas a :root,
   cero estilos globales, cero bytes > 127.
   ===================================================================== */

/* Reset de silo: solo el box-sizing de los nodos de carta. */
.cartas-silo .c-shiny,
.cartas-silo .c-badge-emisor,
.cartas-silo .c-shiny *,
.cartas-silo .c-badge-emisor *,
.c-ficha,
.c-ficha * {
  box-sizing: border-box;
}

/* --- Variante shiny -------------------------------------------------
   Brillo dorado en el borde + halo suave. El color de rareza sigue
   mandando por el borde superior que ya aplica el CSS del perfil; aqui
   solo se anade el anillo exterior para no competir con el. */
.cartas-silo .c-shiny,
.c-ficha .c-shiny {
  border-color: #FFB84D;
  box-shadow: 0 0 0 2px rgba(255, 184, 77, .55), 0 0 14px rgba(255, 184, 77, .35);
  position: relative;
}

/* Reflejo diagonal muy tenue, sin capturar clics. */
.cartas-silo .c-shiny::after,
.c-ficha .c-shiny::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .28) 45%,
    rgba(255, 255, 255, 0) 70%);
  border-radius: inherit;
}

/* --- Badge de emisor ------------------------------------------------ */
.cartas-silo .c-badge-emisor,
.c-ficha .c-badge-emisor {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  max-width: 100%;
  padding: .18em .55em;
  border: 1px solid rgba(15, 20, 25, .12);
  border-radius: 999px;
  background: rgba(15, 20, 25, .06);
  color: inherit;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* Sobre fondos oscuros el badge invierte su tinta. */
.cartas-silo.cartas-silo--oscuro .c-badge-emisor,
.c-ficha .c-badge-emisor {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .1);
}

/* Accesibilidad: nada de animacion ni halo agresivo si se pide calma. */
@media (prefers-reduced-motion: reduce) {
  .cartas-silo .c-shiny {
    box-shadow: 0 0 0 2px rgba(255, 184, 77, .55);
  }
}

/* =====================================================================
   CARTA DE ARTE -- hueco reservado + placeholder sin imagenes
   POR QUE este bloque existe y por que NO pinta texto de la carta:

   1) RATIO FIJO = CERO SALTO DE LAYOUT. El diseno real es una lamina
      unica de 1086x1448 (3:4 exacto) con el marco y la info de la carta
      HORNEADOS en el PNG. El hueco lleva aspect-ratio 1086/1448, asi que
      cuando el JS inyecta el <img> el contenedor ya mide exactamente lo
      mismo: no hay reflow ni salto de layout (CLS 0).
   2) HUECO VACIO DE LA MISMA GEOMETRIA. El placeholder repite ratio,
      borde, radio y sombra del hueco con imagen: ES el espacio reservado,
      no un estado visual distinto. Por eso no hay dos disenos que
      mantener sincronizados.
   3) EL TEXTO VA HORNEADO EN LA LAMINA, NO SE REESCRIBE EN CSS. El CSS
      solo imita el lenguaje visual (pergamino en la familia C, carbon
      con filo dorado en la familia M) con degradados. Los badges son
      metadatos del PLACEHOLDER, no la tipografia de la carta real:
      jamas se pintan encima de una lamina.
   4) DENSIDAD DESDE EL PADRE. El ancho lo fija el padre (.c-card--sm /
      .c-card--md) o la rejilla (.c-card--lg, que NO fija ancho). Cada
      densidad reajusta --c-arte-fs y los badges se miden en em/clamp
      sobre esa base: legibles a 88px sin romper la densidad grande.
   ===================================================================== */

/* --- Densidad del contenedor de carta -------------------------------
   El ancho ES la densidad. .c-card--lg no fija ancho a proposito:
   la rejilla .mk-cat debe declarar
     grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
   y el hueco crece con la celda. */
.cartas-silo .c-card--sm { width: 88px; max-width: 100%; --c-arte-fs: .55rem; }
.cartas-silo .c-card--md { width: 140px; max-width: 100%; --c-arte-fs: .7rem; }
.cartas-silo .c-card--lg { max-width: 100%; --c-arte-fs: .9rem; }
.c-ficha .c-card--lg { width: 100%; max-width: 100%; --c-arte-fs: 1.05rem; }

/* --- Hueco de arte: marco comun ------------------------------------- */
.cartas-silo .c-card-arte,
.c-ficha .c-card-arte {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1086 / 1448;
  overflow: hidden;
  border: 1px solid rgba(15, 20, 25, .1);
  border-radius: .5rem;
  background: #E7E4DB; /* neutral mientras la imagen viaja */
  box-shadow: 0 1px 2px rgba(15, 20, 25, .18), 0 6px 18px rgba(15, 20, 25, .1);
  isolation: isolate;
  transition: box-shadow .18s ease, transform .18s ease;
}

/* La lamina manda: ocupa el hueco entero y recorta sin deformar. */
.cartas-silo .c-card-img,
.c-ficha .c-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Placeholder: base compartida por las dos familias -------------- */
.cartas-silo .c-card-arte--vacia,
.cartas-silo .c-card-arte--marca,
.c-ficha .c-card-arte--vacia,
.c-ficha .c-card-arte--marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3em;
  padding: 1.15em .7em .85em;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: var(--c-arte-fs, .8rem);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}

/* Marco interior doble: da profundidad de lamina sin imagen. */
.cartas-silo .c-card-arte--vacia::before,
.cartas-silo .c-card-arte--marca::before {
  content: "";
  position: absolute;
  inset: .42em;
  border: 1px solid currentColor;
  border-radius: .25em;
  opacity: .3;
  pointer-events: none;
}

/* Familia C: pergamino claro, borde marron, tinta oscura. */
.cartas-silo .c-card-arte--vacia,
.c-ficha .c-card-arte--vacia {
  color: #2B2114;
  border-color: #6B5233;
  background: linear-gradient(160deg, #FBF6E9 0%, #F1E5C9 55%, #E2D0AA 100%);
}

/* Textura de papel: tramado diagonal muy tenue, sin capturar clics. */
.cartas-silo .c-card-arte--vacia::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(45deg,
    rgba(107, 82, 51, .05) 0 2px,
    rgba(107, 82, 51, 0) 2px 4px);
}

/* Familia M: carbon con filo dorado. Va despues para ganar a la familia
   C cuando el nodo lleva las dos clases. */
.cartas-silo .c-card-arte--marca,
.c-ficha .c-card-arte--marca {
  color: #F6EBCB;
  border-color: #C9A227;
  background: linear-gradient(160deg, #232326 0%, #141416 55%, #08080A 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35);
}

.cartas-silo .c-card-arte--marca::before {
  border-color: #C9A227;
  opacity: .55;
}

/* Filo dorado: brillo, no textura de papel. */
.cartas-silo .c-card-arte--marca::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(145deg,
    rgba(201, 162, 39, .2) 0%,
    rgba(201, 162, 39, 0) 45%,
    rgba(255, 255, 255, .05) 100%);
}

/* --- Badges del placeholder -----------------------------------------
   Todo en em/clamp sobre --c-arte-fs: el mismo badge sirve a 88px y a
   190px sin una regla por densidad. Los px de clamp son SUELO/TECHO de
   legibilidad, no el tamano base. */
.cartas-silo .c-card-fam {
  position: absolute;
  top: .5em;
  left: .5em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.55em;
  height: 1.55em;
  border: 1px solid currentColor;
  border-radius: .28em;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(8px, .8em, 13px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  opacity: .9;
}

.cartas-silo .c-card-arte--vacia .c-card-fam {
  background: rgba(43, 33, 20, .1);
}

.cartas-silo .c-card-arte--marca .c-card-fam {
  border-color: #C9A227;
  background: rgba(201, 162, 39, .16);
  color: #E8C766;
}

.cartas-silo .c-card-tipo {
  position: absolute;
  top: .55em;
  right: .5em;
  max-width: 62%;
  padding: .12em .45em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(7px, .58em, 9px);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .8;
}

.cartas-silo .c-card-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(7px, .72em, 12px);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.1;
  opacity: .85;
}

.cartas-silo .c-card-ph-n {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(8px, 1.05em, 15px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  overflow: hidden;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.cartas-silo .c-card-ph-x {
  font-size: clamp(7px, .68em, 11px);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.1;
  opacity: .9;
}

.cartas-silo .c-card-ph-tag {
  font-size: clamp(6px, .56em, 10px);
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.1;
  text-transform: uppercase;
  opacity: .55;
}

/* Hover solo donde existe puntero fino: en tactil no hay estado hover
   que pueda quedar pegado. */
@media (hover: hover) and (pointer: fine) {
  .cartas-silo .c-card-arte:hover {
    border-color: rgba(201, 162, 39, .6);
    box-shadow: 0 2px 4px rgba(15, 20, 25, .2), 0 10px 24px rgba(15, 20, 25, .16);
    transform: translateY(-1px);
  }
}

/* --- Movil: nada que dependa de hover, texturas simplificadas ------- */
@media (max-width: 540px) {
  .cartas-silo .c-card-arte {
    transition: none;
    box-shadow: 0 1px 2px rgba(15, 20, 25, .18);
  }

  .cartas-silo .c-card-arte--vacia::after,
  .cartas-silo .c-card-arte--marca::after {
    display: none;
  }

  .cartas-silo .c-card-arte--vacia {
    background: linear-gradient(165deg, #FBF6E9 0%, #EBDCBC 100%);
  }

  .cartas-silo .c-card-arte--marca {
    background: linear-gradient(165deg, #222225 0%, #0A0A0C 100%);
  }
}

/* --- Accesibilidad: cero transiciones si se pide calma -------------- */
@media (prefers-reduced-motion: reduce) {
  .cartas-silo .c-card-arte {
    transition: none;
  }

  .cartas-silo .c-card-arte:hover {
    transform: none;
  }
}


/* =====================================================================
   FICHA DE CARTA -- modal compartido (host .c-ficha en document.body)
   POR QUE vive fuera del silo .cartas-silo: el host se crea bajo demanda en
   <body>, sin padre silo, asi que el badge, la variante shiny y el hueco
   de arte se AGRUPARON en sus reglas de origen (arriba) en vez de
   copiarse. Aqui solo vive lo que es exclusivo de la ficha.
   Reglas de esta caja:
     1) La lamina manda (ADR-112): columna propia de lectura, ratio
        1086/1448 heredado, cero texto encima del PNG.
     2) Fondo SOLIDO: el texto tiene que leerse sobre cualquier pagina.
     3) z-index 1500 > 1300/1400 de los modales de mi-perfil.
     4) Cero bytes > 127.
   ===================================================================== */

/* --- Host: mismo patron de apertura que .pf-museo-modal ------------ */
.c-ficha {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1500;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.c-ficha.open { display: flex; }

/* --- Backdrop: velo + desenfoque ligero, sin capturar el foco ------ */
.c-ficha .c-ficha-bd {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 10, .72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* --- Caja: scroll propio, fondo solido, sin fuga del scroll al body - */
.c-ficha .c-ficha-box {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 22px;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  padding: 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #2A2E33;
  border-radius: 14px;
  background: #14171A;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
  color: #EDEAE3;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

/* --- Lamina: ancho de lectura fijo, nunca recortada ---------------- */
.c-ficha .c-ficha-arte {
  flex: 0 0 auto;
  width: min(100%, 320px);
  align-self: flex-start;
}

/* Ratio correcto: la lamina entra entera y el fondo del hueco rellena. */
.c-ficha .c-ficha-arte .c-card-img { object-fit: contain; }

/* Hueco sin lamina: reserva la geometria exacta 1086x1448 (ADR-112),
   asi la ficha no salta de alto al abrirse sin arte. */
.c-ficha .c-ficha-arte-hueco {
  aspect-ratio: 1086 / 1448;
  width: 100%;
  display: grid;
  place-items: center;
}

/* --- Columna de informacion ---------------------------------------- */
.c-ficha .c-ficha-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.c-ficha .c-ficha-n {
  margin: 0;
  padding-right: 40px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #F6F2E8;
  overflow-wrap: anywhere;
}

/* --- Aspa de cierre: esquina, 44px de blanco tactil ---------------- */
.c-ficha .c-ficha-x {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #A3AAB2;
  font-family: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.c-ficha .c-ficha-x:hover {
  background: rgba(255, 255, 255, .08);
  color: #F6F2E8;
}

/* --- Chips de rareza / variante / set ------------------------------ */
.c-ficha .c-ficha-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.c-ficha .c-ficha-tags > * { max-width: 100%; }

/* Chip: pildora dorada translucida, texto corto y sin desbordar. */
.c-ficha .c-ficha-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border: 1px solid rgba(232, 199, 102, .42);
  border-radius: 999px;
  background: rgba(232, 199, 102, .10);
  color: #E8C766;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-ficha .c-ficha-qty {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #E8C766;
}

/* Secundario: 7:1 sobre #14171A, por encima del 4.5:1 exigido. */
.c-ficha .c-ficha-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #A3AAB2;
  overflow-wrap: anywhere;
}

/* --- Caja de reglas: filo dorado, lectura corta -------------------- */
.c-ficha .c-ficha-cf {
  padding: 10px 12px;
  border: 1px solid #2A2E33;
  border-left: 2px solid #C9A227;
  border-radius: 8px;
  background: #1A1E22;
}

.c-ficha .c-ficha-cf-t {
  margin: 0 0 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #C9A227;
}

.c-ficha .c-ficha-cf-l {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: #A3AAB2;
}

.c-ficha .c-ficha-cf-l li { margin: 0 0 4px; }
.c-ficha .c-ficha-cf-l li:last-child { margin-bottom: 0; }

/* --- Acciones: mismo peso visual, area tactil suficiente ----------- */
.c-ficha .c-ficha-acc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.c-ficha .c-ficha-acc > * {
  flex: 1 1 auto;
  min-height: 40px;
  transition: background-color .15s ease, color .15s ease;
}

.c-ficha .c-ficha-cerrar {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid #C9A227;
  border-radius: 999px;
  background: transparent;
  color: #E8C766;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.c-ficha .c-ficha-cerrar:hover {
  background: #C9A227;
  color: #14171A;
}

/* --- Foco visible dorado en todos los controles -------------------- */
.c-ficha .c-ficha-x:focus-visible,
.c-ficha .c-ficha-cerrar:focus-visible,
.c-ficha .c-ficha-acc > *:focus-visible {
  outline: 2px solid #E8C766;
  outline-offset: 2px;
}

/* --- Movil: una columna, lamina centrada, Cerrar a ancho completo --- */
@media (max-width: 540px) {
  .c-ficha { padding: 8px; }

  .c-ficha .c-ficha-box {
    flex-direction: column;
    gap: 14px;
    max-height: 90vh;
    padding: 18px 16px;
  }

  .c-ficha .c-ficha-arte {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .c-ficha .c-ficha-n { padding-right: 44px; }

  .c-ficha .c-ficha-x {
    top: 6px;
    right: 6px;
  }

  .c-ficha .c-ficha-cerrar {
    width: 100%;
    min-height: 44px;
  }
}

/* --- Accesibilidad: cero animacion si se pide calma ---------------- */
@media (prefers-reduced-motion: reduce) {
  .c-ficha .c-ficha-x,
  .c-ficha .c-ficha-cerrar,
  .c-ficha .c-ficha-acc > * {
    transition: none;
  }
}


/* =====================================================================
   AFORDANCE "ESTO SE PUEDE PULSAR" -- disparadores de la ficha compartida
   POR QUE aqui y no en cada pagina: el disparador NO lleva clase nueva, se
   marca con data-c-ficha-abrir="1" en el contenedor de la carta dentro del
   silo (mi-perfil.html, perfil.html), asi que una sola regla cubre todas
   las paginas. Todo cuelga de .cartas-silo (ADR-004), nada suelto.
   Nada de sombras nuevas: solo cursor, realce leve y 1px de desplazamiento.
   ===================================================================== */
.cartas-silo [data-c-ficha-abrir] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, filter .15s ease;
}

/* Hover solo donde existe puntero fino: en tactil el estado puede quedar
   pegado. Mismo criterio que .cartas-silo .c-card-arte (ver arriba). */
@media (hover: hover) and (pointer: fine) {
  .cartas-silo [data-c-ficha-abrir]:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
  }
}

/* Foco visible: mismo dorado y mismo trazo que los controles de .c-ficha. */
.cartas-silo [data-c-ficha-abrir]:focus-visible {
  outline: 2px solid #E8C766;
  outline-offset: 2px;
}

/* Pulsado: el realce se apaga, la carta no "salta" bajo el dedo. */
.cartas-silo [data-c-ficha-abrir]:active {
  transform: none;
}

/* Accesibilidad: cero animacion si se pide calma. */
@media (prefers-reduced-motion: reduce) {
  .cartas-silo [data-c-ficha-abrir],
  .cartas-silo [data-c-ficha-abrir]:hover,
  .cartas-silo [data-c-ficha-abrir]:active {
    transform: none;
    transition: none;
  }
}