/* Detalle de cancha: identidad y estado juntos; pelota decorativa de Horario.
   Los colores de identidad y de estado siguen viniendo de la pantalla. */
#detailModal > .detail-header {
  position: relative;
  min-width: 0;
  padding-bottom: 16px;
  gap: 12px;
}
#detailModal.court-identity > .detail-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 132px;
  max-width: 38%;
  height: 2px;
  background: var(--detail-court-color);
  box-shadow: 0 0 12px color-mix(in srgb, var(--detail-court-color) 30%, transparent);
  pointer-events: none;
}
#detailModal .detail-court-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 11px;
  flex: 1;
  min-width: 0;
}
#detailModal #detailTitle {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(22px, 1.6vw, 28px);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.5px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
#detailModal #detailStatusBadge {
  min-width: 0;
  max-width: 100%;
  font-size: 11px;
  line-height: 1.5;
  white-space: normal;
}
#detailModal #detailStatusBadge::before { flex: 0 0 7px; }
#detailModal #detailStatusBadge:empty { display: none; }
#detailModal #btnCloseDetail { flex-shrink: 0; }

/* Volumen, fibra y dos costuras recortadas sobre la superficie de la pelota. */
.court-time-ball {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 33% 24%, #f5ffcc 0, #e8f49a 13%, transparent 40%),
    repeating-radial-gradient(circle at 38% 32%, #ffffff17 0 .5px, transparent .8px 1.8px),
    radial-gradient(circle at 34% 30%, #dbea79 0, #b6cd43 48%, #7b962d 78%, #4b6224 100%);
  box-shadow: inset -2px -2px 4px #1d2e3759, inset 1px 1px 1px #f4ffd17a, 0 2px 5px #0005;
  pointer-events: none;
  vertical-align: middle;
}
.court-time-ball::before,
.court-time-ball::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 14px;
  height: 26px;
  border: 1.5px solid #f3f0ca;
  border-radius: 50%;
  transform: rotate(-24deg);
  box-shadow: 0 0 1px #58693880;
}
.court-time-ball::before { left: -8px; }
.court-time-ball::after { right: -8px; }
.premium-home #detailPanel .stat .icon.court-time-ball {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  font-size: 0;
}
#detailModal .detail-info-item.detail-time-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 11px;
  row-gap: 4px;
}
#detailModal .detail-time-item .court-time-ball {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
}
#detailModal .detail-time-item .dii-label,
#detailModal .detail-time-item .dii-value { grid-column: 2; }
@media (max-width: 640px) {
  .premium-home #detailPanel .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .premium-home #detailPanel .stat { min-width: 0; padding: 14px 9px 13px 39px; }
  .premium-home #detailPanel .stat:nth-child(2n) { border-right: 0; }
  .premium-home #detailPanel .stat .icon { margin-left: -28px; }
  .premium-home #detailPanel .stat .value { min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; }
  #detailModal #detailTitle { font-size: 22px; }
  #detailModal > .detail-header { align-items: flex-start; }
  #detailModal .detail-court-heading { column-gap: 8px; }
  #detailModal .detail-info-item.detail-time-item { column-gap: 8px; }
}