/* Tarjeta de maestría bloqueada
   (archivo: css/components/locked-card.css) */
/* ============================================================
   LOCKED MASTERY CARD
   ============================================================ */
.mastery-card.locked {
  cursor: default;
}

/* Dark overlay on the banner */
.card-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  border-radius: 0;
  transition: background .3s ease;
  pointer-events: none;
}
.mastery-card.locked:hover .card-lock-overlay {
  background: rgba(0, 0, 0, 0.0);
}

/* Lock icon — always anchored bottom:6px right:6px.
   Default state: translated toward center with negative X/Y.
   Hover state: translate(0,0) → snaps back to bottom-right corner.
   card-top aspect-ratio 640/411; at ~250px card width → ~160px height.
   Center offset from bottom-right ≈ (-110px, -68px) — use a safe large negative value.
   card-top has overflow:hidden so the icon won't show outside the banner. */
.card-lock-icon {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8));
  pointer-events: none;
  z-index: 4;
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 2.4rem;
  line-height: 1;
  /* translate to visual center: move left & up from bottom-right anchor */
  transform: translate(-120px, -60px);
  transition: transform .32s cubic-bezier(.4,0,.2,1),
              font-size .32s cubic-bezier(.4,0,.2,1),
              opacity .25s ease;
  opacity: 1;
}
.mastery-card.locked:hover .card-lock-icon {
  transform: translate(0, 0);
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Locked buttons — greyed out */
.mastery-card.locked .btn-primary,
.mastery-card.locked .btn-done {
  background: #1a1a1a !important;
  color: #444 !important;
  border-color: #333 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  filter: none !important;
}

/* Shake + red border flash animation */
@keyframes lockShake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-7px); }
  30%  { transform: translateX(7px); }
  45%  { transform: translateX(-5px); }
  60%  { transform: translateX(5px); }
  75%  { transform: translateX(-3px); }
  90%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
@keyframes lockBorderFlash {
  0%   { border-color: var(--red-close); box-shadow: 0 0 0 2px rgba(255,51,51,0.0), var(--shadow-card); }
  30%  { border-color: var(--red-close); box-shadow: 0 0 16px rgba(255,51,51,0.7), var(--shadow-card); }
  100% { border-color: #111; box-shadow: var(--shadow-card); }
}
.mastery-card.lock-denied {
  animation: lockBorderFlash 0.7s ease forwards !important;
}
.mastery-card.lock-denied .card-lock-icon {
  animation: lockShake 0.45s ease !important;
}
/* locked badge centering */
.mastery-card.locked [class*="lock"],
.mastery-card.locked [class*="candado"] {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  transition: top .18s ease, left .18s ease, transform .18s ease, opacity .18s ease;
  will-change: top, left, transform;
}

.mastery-card.locked:hover [class*="lock"],
.mastery-card.locked:hover [class*="candado"] {
  top: calc(100% - 18px) !important;
  left: calc(100% - 18px) !important;
  transform: translate(-100%, -100%) !important;
}