/* =========================================================
   MINI PLAYER CARD · SISTEMA CSS
   ---------------------------------------------------------
   Clases esperadas en la función:
   - mpc-wrap
   - mpc-card
   - is-mobile
   - is-highlight
   - status-follow / status-maybe / status-no
   - mpc-wm / mpc-wm-img
   - mpc-inner
   - mpc-avatar-wrap
   - mpc-avatar-img / mpc-avatar-fallback
   - mpc-badge
   - mpc-badge--flag / --pos / --dorsal
   - mpc-flag-img
   - mpc-text
   - mpc-title
   - mpc-value
   - mpc-age
   ========================================================= */

/* ---------------------------------------------------------
   1) WRAP
   --------------------------------------------------------- */
.mpc-wrap{
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
  min-width: 0;
}

/* ---------------------------------------------------------
   2) CARD BASE
   --------------------------------------------------------- */
.mpc-card{
  --mpc-h: 40px;
  --mpc-pad-y: 4px;
  --mpc-pad-x: 8px;
  --mpc-avatar: 34px;
  --mpc-flag: 16px;
  --mpc-title: 12px;
  --mpc-radius: 12px;

  --mpc-bg-top: rgba(21,26,28,.98);
  --mpc-bg-bottom: rgba(15,19,22,.98);
  --mpc-accent: #06be84;
  --mpc-line: rgba(255,255,255,.12);
  --mpc-line-strong: rgba(90,255,170,.28);
  --mpc-text: #ffffff;
  --mpc-text-soft: rgba(236,255,247,.94);

  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: var(--mpc-h);
  padding: var(--mpc-pad-y) var(--mpc-pad-x);
  border-radius: var(--mpc-radius);
  overflow: visible !important;
  box-sizing: border-box;
  text-align: left !important;

  border: 1px solid var(--mpc-line);
  background:
    radial-gradient(circle at top right, rgba(30,190,130,.10), transparent 38%),
    linear-gradient(180deg, var(--mpc-bg-top) 0%, var(--mpc-bg-bottom) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 18px rgba(0,0,0,.24);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    filter .18s ease;
}

/* Por si dbc.Button mete estilos raros */
.mpc-card.btn,
.mpc-card.btn.btn-secondary,
.mpc-card.btn.btn-primary,
.mpc-card.btn.btn-dark{
  background-color: transparent !important;
  color: var(--mpc-text) !important;
  border-color: var(--mpc-line) !important;
}

/* ---------------------------------------------------------
   3) HOVER / FOCUS / ACTIVE
   --------------------------------------------------------- */
.mpc-card:hover,
.mpc-card:focus,
.mpc-card:focus-visible{
  transform: translateY(-1px);
  border-color: var(--mpc-line-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 24px rgba(0,0,0,.30),
    0 0 0 1px rgba(90,255,170,.08);
  outline: none !important;
}

.mpc-card:active{
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 18px rgba(0,0,0,.24);
}

/* Sheen superior leve */
.mpc-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 42%);
  opacity: .7;
}

/* ---------------------------------------------------------
   4) ESTADOS
   --------------------------------------------------------- */
.mpc-card.status-follow{
  border-color: #06be84 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(6,190,132,.55),
    0 0 18px rgba(6,190,132,.24),
    0 10px 22px rgba(0,0,0,.28);
  background:
    radial-gradient(circle at top right, rgba(46,204,113,.16), transparent 38%),
    linear-gradient(180deg, rgba(18,28,24,.98) 0%, rgba(14,20,18,.98) 100%);
}

.mpc-card.status-maybe{
  border-color: #e5c558 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(229,197,88,.52),
    0 0 18px rgba(229,197,88,.22),
    0 10px 22px rgba(0,0,0,.28);
  background:
    radial-gradient(circle at top right, rgba(255,193,7,.14), transparent 38%),
    linear-gradient(180deg, rgba(28,25,18,.98) 0%, rgba(20,18,14,.98) 100%);
}

.mpc-card.status-no{
  border-color: #ef5b5b !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(239,91,91,.50),
    0 0 18px rgba(239,91,91,.20),
    0 10px 22px rgba(0,0,0,.28);
  background:
    radial-gradient(circle at top right, rgba(255,92,92,.13), transparent 38%),
    linear-gradient(180deg, rgba(30,19,20,.98) 0%, rgba(20,15,16,.98) 100%);
}

/* Hover de estados */
.mpc-card.status-follow:hover,
.mpc-card.status-follow:focus-visible{
  border-color: #06be84 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(6,190,132,.65),
    0 0 22px rgba(6,190,132,.30),
    0 12px 24px rgba(0,0,0,.30);
}

.mpc-card.status-maybe:hover,
.mpc-card.status-maybe:focus-visible{
  border-color: #e5c558 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(229,197,88,.60),
    0 0 22px rgba(229,197,88,.28),
    0 12px 24px rgba(0,0,0,.30);
}

.mpc-card.status-no:hover,
.mpc-card.status-no:focus-visible{
  border-color: #ef5b5b !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(239,91,91,.58),
    0 0 22px rgba(239,91,91,.25),
    0 12px 24px rgba(0,0,0,.30);
}

/* ---------------------------------------------------------
   5) WATERMARK
   --------------------------------------------------------- */
.mpc-wm{
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.mpc-wm-img{
  position: absolute;
  right: 2px;
  top: -2px;
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 50%;
  opacity: .13;
  filter: grayscale(.88) contrast(1.05) brightness(1.02);
  pointer-events: none;
  user-select: none;
}

/* máscara para que no moleste al texto */
.mpc-wm::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(15,19,22,.96) 0%,
      rgba(15,19,22,.82) 34%,
      rgba(15,19,22,.32) 62%,
      rgba(15,19,22,0) 84%);
  pointer-events: none;
}

/* ---------------------------------------------------------
   6) INNER LAYOUT
   --------------------------------------------------------- */
.mpc-inner{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

/* ---------------------------------------------------------
   7) AVATAR
   --------------------------------------------------------- */
.mpc-avatar-wrap{
  position: relative;
  width: var(--mpc-avatar);
  height: var(--mpc-avatar);
  flex: 0 0 auto;
  z-index: 2;
  overflow: visible;
}

.mpc-avatar-img,
.mpc-avatar-fallback{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

.mpc-avatar-img{
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 4px 10px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.04);
  background: #0b1214;
}

.mpc-avatar-fallback{
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #013d2f 0%, #04664b 100%);
  border: 1.5px solid rgba(255,255,255,.22);
  box-shadow:
    0 4px 10px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08);
  color: #effff6;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
  text-transform: uppercase;
}

/* ---------------------------------------------------------
   8) BADGES BASE
   --------------------------------------------------------- */
.mpc-badge{
  position: absolute;
  z-index: 3;
  pointer-events: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: var(--mpc-flag);
  min-width: var(--mpc-flag);
  border-radius: 999px;
  box-sizing: border-box;

  background: linear-gradient(180deg, #0a5f47 0%, #034533 100%);
  color: #ecfff7;
  border: 2px solid var(--mpc-accent);
  box-shadow:
    0 2px 6px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08);

  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   9) FLAG
   --------------------------------------------------------- */
.mpc-badge--flag{
  right: -6px;
  bottom: -6px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
}

.mpc-flag-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
  background: #023e2f;
}

/* ---------------------------------------------------------
   10) POSICIÓN
   --------------------------------------------------------- */
.mpc-badge--pos{
  left: -6px;
  bottom: -6px;
  border-radius: 50%;
  font-size: 9px;
  letter-spacing: .2px;
}

/* ---------------------------------------------------------
   11) DORSAL
   --------------------------------------------------------- */
.mpc-badge--dorsal{
  top: -8px;
  left: -16px;
  padding: 0 6px;
  min-width: var(--mpc-flag);
  font-size: 9px;
}

/* ---------------------------------------------------------
   12) TEXTO
   --------------------------------------------------------- */
.mpc-text{
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mpc-title{
  min-width: 0;
  color: var(--mpc-text);
  font-size: var(--mpc-title);
  line-height: 1.15;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  max-height: 2.35em;
}

.mpc-title strong{
  font-weight: 800;
  color: var(--mpc-text);
}

.mpc-value{
  flex: 0 0 auto;
  margin-left: 8px;
  white-space: nowrap;
  font-weight: 800;
  font-size: calc(var(--mpc-title) + 1px);
  color: var(--mpc-text-soft);
  letter-spacing: .1px;
}

/* ---------------------------------------------------------
   13) BADGE EDAD
   --------------------------------------------------------- */
.mpc-age{
  position: absolute;
  right: -6px;
  bottom: -6px;
  z-index: 4;
  pointer-events: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 16px;
  height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  box-sizing: border-box;

  background: linear-gradient(180deg, #0a5f47 0%, #034533 100%);
  color: #ecfff7;
  border: 2px solid var(--mpc-accent);
  box-shadow:
    0 2px 6px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08);

  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   14) MOBILE
   --------------------------------------------------------- */
.mpc-card.is-mobile{
  --mpc-h: 44px;
  --mpc-pad-y: 4px;
  --mpc-pad-x: 8px;
  --mpc-avatar: 40px;
  --mpc-flag: 18px;
  --mpc-title: 13px;
}

.mpc-card.is-mobile .mpc-wm-img{
  width: 60px;
  height: 60px;
  top: -4px;
}

.mpc-card.is-mobile .mpc-avatar-fallback{
  font-size: 13px;
}

.mpc-card.is-mobile .mpc-badge--pos{
  font-size: 10px;
}

.mpc-card.is-mobile .mpc-badge--dorsal{
  font-size: 10px;
}

.mpc-card.is-mobile .mpc-age{
  min-width: 18px;
  height: 18px;
  font-size: 10px;
}

/* ---------------------------------------------------------
   15) CONTEXTO: grids, tablas, contenedores estrechos
   --------------------------------------------------------- */
.mpc-wrap,
.mpc-wrap *{
  box-sizing: border-box;
}

.mpc-wrap .btn{
  max-width: 100%;
}

.mpc-card .player-data{
  display: none !important;
}

/* ---------------------------------------------------------
   16) REDUCCIÓN SUAVE EN CONTENEDORES MUY ESTRECHOS
   --------------------------------------------------------- */
@media (max-width: 560px){
  .mpc-card{
    --mpc-title: 11px;
  }

  .mpc-value{
    font-size: calc(var(--mpc-title) + 1px);
  }
}

/* ---------------------------------------------------------
   17) MODO MÁS COMPACTO SI LA USAS DENTRO DE LISTAS DENSAS
   --------------------------------------------------------- */
.mpc-wrap.is-compact .mpc-card{
  --mpc-h: 36px;
  --mpc-avatar: 30px;
  --mpc-flag: 14px;
  --mpc-title: 11px;
  --mpc-pad-y: 3px;
  --mpc-pad-x: 7px;
}

.mpc-wrap.is-compact .mpc-wm-img{
  width: 48px;
  height: 48px;
}

/* ---------------------------------------------------------
   18) RESPETO A PREFERENCIAS DE MOVIMIENTO
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .mpc-card{
    transition: none;
  }
}