/* =========================================================
   MIS PARTIDOS · TIMELINE MENSUAL ULTRAMINIMAL
   ========================================================= */

.mpm-tl-wrap{
  position: relative;
  overflow: visible;
}

.mpm-tl-card{
  position: relative;
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  height: 46px;
  padding: 3px 4px 2px 4px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  overflow: visible;
  box-sizing: border-box;
  box-shadow:
    0 4px 10px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.03);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    border-color .14s ease;
}

.mpm-tl-card:hover{
  transform: translateY(-1px) scale(1.03);
}

.mpm-tl-card.is-match{
  background:
    linear-gradient(180deg, rgba(22,28,32,.96), rgba(14,18,22,.98));
}

.mpm-tl-card.is-event{
  background:
    linear-gradient(180deg, rgba(19,25,31,.96), rgba(12,16,20,.98));
}

.mpm-tl-card.is-km{
  border: 2px solid #39FF14;
  box-shadow:
    0 0 8px rgba(57,255,20,.18),
    0 4px 10px rgba(0,0,0,.26);
}

.mpm-tl-card.is-nokm{
  border: 2px solid #8f98a3;
  box-shadow:
    0 0 6px rgba(143,152,163,.14),
    0 4px 10px rgba(0,0,0,.26);
}

/* =========================
   PARTIDOS
   ========================= */

.mpm-tl-shields-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  margin-top: 1px;
}

.mpm-tl-shield{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #2f3438;
  border: 1.4px solid rgba(233,255,247,.92);
  box-shadow: 0 1px 2px rgba(0,0,0,.32);
  flex: 0 0 auto;
}

/* =========================
   EVENTOS
   ========================= */

.mpm-tl-event-icon-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  margin-top: 0;
  margin-bottom: 1px;
}

.mpm-tl-event-icon{
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

/* =========================
   HORA
   ========================= */

.mpm-tl-time{
  margin-top: 4px;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  color: #effff4;
  text-shadow: 0 1px 0 rgba(0,0,0,.30);
  letter-spacing: -.01em;
  white-space: nowrap;
}

.mpm-tl-card.is-event .mpm-tl-time{
  margin-top: 3px;
}

/* móvil */
@media (max-width: 860px){
  .mpm-tl-card{
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    height: 44px;
    padding: 3px 3px 2px 3px;
  }

  .mpm-tl-shield{
    width: 17px;
    height: 17px;
  }

  .mpm-tl-event-icon{
    width: 18px;
    height: 18px;
  }

  .mpm-tl-time{
    font-size: 9px;
    margin-top: 3px;
  }
}