/**
 * Sport Durazno Puntuación
 * Estilo del cuadro de plantel/puntuación de SportPress:
 * encabezado del equipo, borde gris, e íconos de gol/tarjetas/cambios.
 */

/* =========================================================
   CUADRO DE PUNTUACIÓN (un solo cuadro, marcador arriba,
   dos columnas con minuto centrado)
   ========================================================= */
.sdp-wrap{
  border-radius: 8px;
  overflow: hidden;
  margin: 28px 0;
  border: 1.5px solid #9ca3af !important;
  max-width: 100%;
  container-type: inline-size;
}

.sdp-wrap,
.sdp-wrap *{
  text-transform: none !important;
  letter-spacing: normal !important;
  box-sizing: border-box;
}

.sdp-header,
.sdp-team{
  text-transform: uppercase !important;
}

.sdp-header{
  position: relative;
  background: #fff !important;
  color: #111 !important;
  font-weight: 800;
  font-size: 1rem;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.sdp-header-side,
.sdp-header-score{
  display: flex;
  align-items: center;
  min-width: 0;
}

.sdp-header-home{
  justify-content: flex-end;
  gap: 8px;
  text-align: right;
}

.sdp-header-away{
  justify-content: flex-start;
  gap: 8px;
  text-align: left;
}

.sdp-header-score{
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
}

.sdp-team{
  color: #111 !important;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sdp-wrap img.sdp-team-logo,
.sdp-team-logo{
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  float: none !important;
  vertical-align: middle;
}

.sdp-score-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #052c54 !important;
  color: #fff !important;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
}

.sdp-score-sep{
  color: #9aa3ad;
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 700;
}

.sdp-columns{
  display: flex;
  background: #fff !important;
}

.sdp-col{
  flex: 1 1 50%;
  min-width: 0;
  background: #fff !important;
}

.sdp-col-home{
  border-right: 1px solid #e5e7eb;
}

.sdp-item{
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #e5e7eb;
  color: #333 !important;
  font-size: .88rem;
  gap: 8px;
}

.sdp-col .sdp-item:last-child{
  border-bottom: none;
}

.sdp-section:last-child .sdp-item:last-child{
  border-bottom: none;
}

.sdp-section:not(:last-child) .sdp-item:last-child{
  border-bottom: 1px solid #e5e7eb;
}

.sdp-col-home .sdp-item{
  justify-content: flex-end;
  text-align: right;
}

.sdp-col-away .sdp-item{
  justify-content: flex-start;
  text-align: left;
}

.sdp-section-title{
  padding: 8px 14px 4px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase !important;
  color: #6b7280 !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e5e7eb;
}

.sdp-col-home .sdp-section-title{
  text-align: right;
}

.sdp-col-away .sdp-section-title{
  text-align: left;
}

.sdp-section-bench{
  border-top: 1px solid #e5e7eb;
  background: #fafbfc !important;
}

.sdp-section-bench .sdp-section-title{
  background: #f1f5f9 !important;
  color: #64748b !important;
}

.sdp-item-bench{
  color: #64748b !important;
  font-size: .84rem;
}

.sdp-item-bench .sdp-player{
  color: #64748b !important;
  font-weight: 400;
}

.sdp-item-content{
  min-width: 0;
  overflow-wrap: break-word;
  display: block;
}

.sdp-item-minute{
  flex: 0 0 auto;
  font-weight: 700;
  color: #333 !important;
  font-size: .8rem;
}

.sdp-player{
  color: #333 !important;
  font-weight: 500;
}

.sdp-sub-out-name{
  color: #333 !important;
}

.sdp-icon{
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 4px;
}
.sdp-icon svg{ display: block; }

.sdp-swap-mirror{
  transform: scaleX(-1);
}

.sdp-yellow{
  display: inline-block;
  width: 12px;
  height: 16px;
  border-radius: 2px;
  background: #f4d21e;
}

.sdp-red{
  display: inline-block;
  width: 12px;
  height: 16px;
  border-radius: 2px;
  background: #e30613;
}

@media (max-width: 480px){
  .sdp-item{ font-size: .75rem; padding: 8px 10px; gap: 5px; }
  .sdp-item-minute{ font-size: .7rem; }
  .sdp-team{ font-size: .75rem; }
  .sdp-header{ padding: 10px 8px; column-gap: 6px; }
  .sdp-header-home,
  .sdp-header-away{ gap: 5px; }
  .sdp-header-score{ gap: 5px; }
  .sdp-wrap img.sdp-team-logo,
  .sdp-team-logo{ width: 22px !important; height: 22px !important; }
  .sdp-score-badge{ width: 28px; height: 28px; font-size: .95rem; }
}

@container (max-width: 520px){
  .sdp-item{ font-size: .78rem; padding: 9px 12px; gap: 6px; }
  .sdp-item-minute{ font-size: .72rem; }
  .sdp-team{ font-size: .78rem; }
  .sdp-header{ padding: 12px 10px; column-gap: 8px; }
}

/* =========================================================
   Se oculta la tabla nativa de SportsPress: el cuadro propio
   ([sdp_puntuacion]) la reemplaza.
   ========================================================= */
.sp-section-content-performance,
.sp-event-performance-tables{
  display: none !important;
}

.sp-section-content-performance .sp-table-caption,
.sp-event-performance-tables .sp-table-caption,
.sp-template-event-performance .sp-table-caption{
  display: none !important;
}

/* =========================================================
   Tarjeta contenedora: borde gris exterior
   ========================================================= */
.sdp-roster-card{
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  border: 1.5px solid #9ca3af !important;
}

/* =========================================================
   Íconos: balón de gol (ícono de fuente, se puede recolorear
   con "color")
   ========================================================= */
i.sp-icon-soccerball.sdp-icon-goal,
.sdp-icon-goal{
  color: #222 !important;
}

.sdp-icon-yellow{
  color: #f4d21e !important;
}

.sdp-icon-red{
  color: #e30613 !important;
}

/* =========================================================
   sub-in / sub-out: son <span> vacíos con imagen de fondo,
   así que se dibuja un triángulo en CSS puro en vez de
   depender de recolorear una imagen. Selectores compuestos
   (clase nativa + nuestra) para ganarle en especificidad al
   CSS propio de SportsPress.
   ========================================================= */
span.sub-in.sdp-icon-in,
span.sub-out.sdp-icon-out,
.sdp-icon-in,
.sdp-icon-out{
  background: none !important;
  background-image: none !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  vertical-align: middle !important;
  overflow: visible !important;
}

span.sub-in.sdp-icon-in,
.sdp-icon-in{
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-bottom: 8px solid #16a34a !important;
  border-top: none !important;
}

span.sub-out.sdp-icon-out,
.sdp-icon-out{
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 8px solid #e30613 !important;
  border-bottom: none !important;
}

/* =========================================================
   Tarjeta amarilla / roja (si vienen como span vacío también)
   ========================================================= */
.sdp-icon-yellow-bg{
  background: #f4d21e !important;
  display: inline-block !important;
  width: 12px !important;
  height: 16px !important;
  border-radius: 2px !important;
}

.sdp-icon-red-bg{
  background: #e30613 !important;
  display: inline-block !important;
  width: 12px !important;
  height: 16px !important;
  border-radius: 2px !important;
}