/* Fútbol Fallas V10 - centrado definitivo de fichas de equipo en móvil */
@media (max-width:820px){
  /* El problema era la combinación container + cards + grid anterior */
  body[data-page="team"] .team-body--compact{
    width:100%!important;
    margin:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  body[data-page="team"] .team-body--compact > .container{
    width:auto!important;
    max-width:none!important;
    margin-left:12px!important;
    margin-right:12px!important;
    padding:0!important;
  }
  body[data-page="team"] .team-layout--compact,
  body[data-page="team"] .team-pitch-stack,
  body[data-page="team"] .team-info-stack{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
  }
  body[data-page="team"] .team-layout--compact{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }
  body[data-page="team"] .team-info-stack{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }
  body[data-page="team"] .team-about-card,
  body[data-page="team"] .team-pitch-card,
  body[data-page="team"] .team-bench-card,
  body[data-page="team"] .team-location-card{
    position:relative!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    left:auto!important;
    right:auto!important;
    translate:none!important;
    transform:none!important;
    box-sizing:border-box!important;
    border-radius:18px!important;
  }
  body[data-page="team"] .team-pitch-card .pitch{
    width:100%!important;
    max-width:100%!important;
    margin:9px auto 0!important;
    box-sizing:border-box!important;
  }
  body[data-page="team"] .team-about-card .team-brief{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
  }
  body[data-page="team"] .team-nav{
    width:100%!important;
    max-width:100%!important;
    margin:8px 0 0!important;
    box-sizing:border-box!important;
    transform:none!important;
  }
}

/* === FUTBOL FALLAS V12 EQUIPOS === */
/*
   OBJETIVO DESKTOP
   fila 1: DESCRIPCION a todo el ancho
   fila 2-3: SIETE INICIAL izquierda | RESERVAS derecha
                               | UBICACION derecha
   La columna derecha se estira exactamente hasta el final de Siete Inicial.
*/
body[data-page="team"] .team-about-card{
  height:auto!important;
  min-height:0!important;
  align-self:start!important;
  align-content:start!important;
  padding-bottom:20px!important;
}
body[data-page="team"] .team-about-card .desc{
  white-space:pre-line!important;
  margin-bottom:0!important;
  padding-bottom:0!important;
}
body[data-page="team"] .team-about-card .staff:empty{display:none!important;}

@media (min-width:821px){
  body[data-page="team"] .team-layout--compact{
    display:grid!important;
    grid-template-columns:minmax(0,1.42fr) minmax(345px,.78fr)!important;
    grid-template-rows:auto minmax(0,auto) minmax(0,1fr)!important;
    grid-template-areas:
      "about about"
      "pitch bench"
      "pitch location"!important;
    align-items:stretch!important;
    gap:14px!important;
  }
  body[data-page="team"] .team-about-card{grid-area:about!important;}
  body[data-page="team"] .team-pitch-stack{
    grid-area:pitch!important;
    display:block!important;
    height:100%!important;
    min-height:0!important;
  }
  body[data-page="team"] .team-info-stack{display:contents!important;}
  body[data-page="team"] .team-bench-card{
    grid-area:bench!important;
    margin:0!important;
    align-self:start!important;
  }
  body[data-page="team"] .team-location-card{
    grid-area:location!important;
    margin:0!important;
    align-self:stretch!important;
    display:flex!important;
    flex-direction:column!important;
  }

  /* Card y campo más verticales: corrige la sensación de campo aplastado. */
  body[data-page="team"] .team-pitch-card{
    height:100%!important;
    min-height:760px!important;
    display:flex!important;
    flex-direction:column!important;
  }
  body[data-page="team"] .team-pitch-card .pitch{
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:650px!important;
    max-height:none!important;
    aspect-ratio:.98 / 1!important;
    margin:10px auto 0!important;
  }

  /* Reservas ARRIBA como en el diseño correcto. */
  body[data-page="team"] .team-bench-card .roster{
    grid-template-columns:1fr 1fr!important;
    margin-top:12px!important;
  }
  /* Ubicación ABAJO y su card ocupa el hueco restante hasta la base del campo. */
  body[data-page="team"] .team-location-card .map{
    flex:1 1 auto!important;
    min-height:260px!important;
    width:100%!important;
    aspect-ratio:auto!important;
    margin-top:10px!important;
  }
  body[data-page="team"] .team-location-card .btn{
    align-self:flex-start!important;
  }
}

/* MÓVIL/WEB APP: orden inequívoco y forzado con order.
   1 descripcion, 2 siete inicial, 3 reservas, 4 ubicacion.
*/
@media (max-width:820px){
  body[data-page="team"] .team-body--compact > .container{
    width:auto!important;
    max-width:none!important;
    margin:0 12px!important;
    padding:0!important;
  }
  body[data-page="team"] .team-layout--compact{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
    width:100%!important;
    margin:0!important;
  }
  /* display:contents permite ordenar las tres cards que viven en team-info-stack */
  body[data-page="team"] .team-pitch-stack,
  body[data-page="team"] .team-info-stack{
    display:contents!important;
  }
  body[data-page="team"] .team-about-card{order:1!important;}
  body[data-page="team"] .team-pitch-card{order:2!important;}
  body[data-page="team"] .team-bench-card{order:3!important;}
  body[data-page="team"] .team-location-card{order:4!important;}

  body[data-page="team"] .team-about-card,
  body[data-page="team"] .team-pitch-card,
  body[data-page="team"] .team-bench-card,
  body[data-page="team"] .team-location-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    translate:none!important;
    transform:none!important;
    box-sizing:border-box!important;
  }
  body[data-page="team"] .team-pitch-card{
    min-height:0!important;
    height:auto!important;
    display:block!important;
  }
  /* También en móvil damos un 15-18% más de altura que el campo anterior. */
  body[data-page="team"] .team-pitch-card .pitch{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:.82 / 1!important;
    margin:9px auto 0!important;
  }
  body[data-page="team"] .team-about-card{
    padding-bottom:16px!important;
  }
  body[data-page="team"] .team-about-card .desc{
    line-height:1.55!important;
  }
}
