/* =========================================================
   Futbol Chapín Web - fc-lineups.css (UNIFICADO)
   Incluye SOLO lo de:
   ✅ PITCH (PC + móvil)
   ✅ TITULARES (spots con foto)
   ✅ SUPLENTES (PC + móvil)
   ========================================================= */

/* =========================================================
   0) Variables base (por si no carga fc.css)
   ========================================================= */
:root{
  --fcw-card-bg:#fff;
  --fcw-text:#0f172a;
  --fcw-muted:#64748b;
  --fcw-border:rgba(0,0,0,.10);

  --fcw-green-1:#277947;
  --fcw-green-2:#2f8d4e;

  --fcw-white:#ffffff;
}

/* =========================================================
   1) VISIBILIDAD: DESKTOP vs MÓVIL
   ========================================================= */
.fcw-lineups-desktop{ display:block; }
.fcw-lineups-mobile{ display:none; }

@media (max-width: 500px){
  .fcw-lineups-desktop{ display:none !important; }
  .fcw-lineups-mobile{ display:block !important; }
}

/* =========================================================
   2) WRAP + HEADER (PC)
   ========================================================= */
.fcw-lineups-wrap{
  background:var(--fcw-card-bg);
  border-top:1px solid var(--fcw-border);
  border-radius:12px;
  padding:0;
  margin:12px 0;
  width:100%;
}

.fcw-lineups-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.fcw-lineups-team{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.fcw-lineups-teamname{
  font-weight:900;
  color:var(--fcw-text);
  font-size:13px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.fcw-lineups-sub{
  font-weight:800;
  color:#334155;
  font-size:12px;
  white-space:nowrap;
}

/* Logo en header de alineaciones */
.fcw-pitch-teamlogo{
  width:38px;
  height:38px;
  border-radius:10px;
  object-fit:contain;
  display:block;
  background:rgba(255,255,255,.20);
  padding:2px;
}

/* =========================================================
   3) PITCH PC (Horizontal FIFA 105x68)
   ========================================================= */
.fcw-pitch{
  position:relative;
  width:100%;
  border-radius:12px;
  overflow:hidden;
  margin:0 0 10px;
  border:1px solid var(--fcw-border);
  background:var(--fcw-green-2);

  /* tokens internos */
  --cc-size: clamp(70px, 26%, 100px);

  --pen-depth: 15.7143%;
  --pen-height: 59.2941%;

  --ga-depth: 5.2381%;
  --ga-height: 26.9412%;

  --spot: 8px;
}

.fcw-pitch.fcw-pitch--horizontal{
  display:block;
  aspect-ratio: 105 / 68;
  min-height:220px;
  max-height:420px;
  height:auto;
}

/* fallback aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .fcw-pitch.fcw-pitch--horizontal:before{
    content:"";
    display:block;
    padding-top:64.7619%;
  }
}

/* Fondo franjas verticales */
.fcw-pitch-bg{
  position:absolute;
  inset:0;
  --stripe: clamp(22px, 4.2vw, 48px);

  background-image: linear-gradient(
    to right,
    var(--fcw-green-1) 0 50%,
    var(--fcw-green-2) 50% 100%
  );
  background-size: calc(var(--stripe) * 2) 100%;
  background-repeat: repeat;
  background-position: center;
}

/* borde cancha */
.fcw-pitch-bg:before{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid var(--fcw-white);
  border-radius:12px;
  opacity:.95;
}

/* línea de medio campo */
.fcw-pitch.fcw-pitch--horizontal .fcw-pitch-bg:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  transform:translateX(-1px);
  background:var(--fcw-white);
  opacity:.95;
}

/* círculo y punto central */
.fcw-pitch-center-circle{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--cc-size);
  height:var(--cc-size);
  border:2px solid var(--fcw-white);
  border-radius:999px;
  transform:translate(-50%, -50%);
  opacity:.95;
}

.fcw-pitch-center-spot{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--spot);
  height:var(--spot);
  background:var(--fcw-white);
  border-radius:999px;
  transform:translate(-50%, -50%);
  opacity:.95;
}

/* áreas */
.fcw-pitch-box{
  position:absolute;
  top:50%;
  width:var(--pen-depth);
  height:var(--pen-height);
  border:2px solid var(--fcw-white);
  opacity:.95;
  transform:translateY(-50%);
}
.fcw-pitch-box--left{ left:0; border-left:none; }
.fcw-pitch-box--right{ right:0; border-right:none; }

.fcw-pitch-smallbox{
  position:absolute;
  top:50%;
  width:var(--ga-depth);
  height:var(--ga-height);
  border:2px solid var(--fcw-white);
  opacity:.95;
  transform:translateY(-50%);
}
.fcw-pitch-smallbox--left{ left:0; border-left:none; }
.fcw-pitch-smallbox--right{ right:0; border-right:none; }

/* =========================================================
   4) TITULARES PC (spots con FOTO + badge número)
   ========================================================= */
.fcw-pitch-players{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
}

.fcw-spot{
  position:absolute;
  transform:translate(-50%, -50%);
  width:80px;
  text-align:center;
  pointer-events:none;
}

/* ✅ AVATAR circular real (arregla fotos cuadradas con fondo blanco) */
.fcw-spot-avatar{
  width:34px;
  height:34px;
  margin:0 auto;
  border-radius:999px;
  overflow:hidden;

  background:#fff; /* círculo blanco detrás */
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 2px 8px rgba(0,0,0,.28);

  position:relative;
  z-index:6;
}

/* 👇 esto evita que se vean “esquinas” aunque la imagen venga cuadrada */
.fcw-spot-photo{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;

  border-radius:999px !important;
  clip-path:circle(50% at 50% 50%);
  transform:translateZ(0);
}


/* ✅ RATING arriba del círculo (tipo app) */
.fcw-spot-rating{
  position:absolute;
  left:50%;
  top:40px;                    /* ajusta si querés más pegado */
  transform:translate(-50%, -100%);
  z-index:9;

  min-width:29px;
  height:10px;
  padding:0 6px;
  border-radius:999px;

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

  font-weight:500;
  font-size:8px;              /* ✅ más pequeño */
  line-height:1;
  color:#fff;

  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* colores */
.fcw-spot-rating--hi{  background:#1e8f4c; }
.fcw-spot-rating--mid{ background:#e0b000; }
.fcw-spot-rating--low{ background:#d26a19; }

/* ✅ número debajo del nombre */
.fcw-spot-num-below{
  margin-top:2px;
  font-size:9px;
  font-weight:800;
  color:rgba(255,255,255,.90);
  text-shadow:0 1px 2px rgba(0,0,0,.75);
  line-height:1;
}

/* 🚫 apagamos el número viejo arriba */
.fcw-spot-badge-num{ display:none !important; }

/* badge número */
.fcw-spot-badge-num{
  position:absolute;
  right:-7px;
  top:-7px;

  width:18px;
  height:18px;
  border-radius:999px;

  background:rgba(15, 23, 42, .92);
  border:2px solid rgba(255,255,255,.92);

  color:#fff;
  font-weight:900;
  font-size:10px;
  line-height:1;

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

/* ✅ nombre más abajo (para que no lo tape el rating) */
.fcw-spot-name{
  margin-top:6px;              /* ✅ baja un poco el nombre */
  font-size:10px;
  font-weight:900;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
  line-height:1.05;
}


/* por si quedó CSS viejo */
.fcw-spot-num{ display:none !important; }

/* ✅ número debajo del nombre (pequeño) */
.fcw-spot-jersey{
  margin-top:2px;
  font-size:9px;
  font-weight:900;
  color:#fff;
  opacity:.92;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
  line-height:1;
}

/* Responsive PC pequeño */
@media (max-width: 640px){
  .fcw-spot{ width:72px; }
  .fcw-spot-avatar{ width:30px; height:30px; }
  .fcw-spot-rating{ font-size:9px; height:15px; min-width:28px; top:-3px; }
  .fcw-spot-name{ font-size:9px; margin-top:6px; }
  .fcw-spot-jersey{ font-size:8px; }
}

/* PC pequeño */
@media (max-width: 640px){
  .fcw-spot{ width:70px; }
  .fcw-spot-avatar{ width:30px; height:30px; }
  .fcw-spot-name{ font-size:9px; }
}

/* =========================================================
   5) SUPLENTES PC (dos columnas)
   ========================================================= */
.fcw-subs-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  margin-top:12px;
}

.fcw-subs-title{
  font-weight:900;
  font-size:12px;
  letter-spacing:.04em;
  color:#111;
  margin:4px 10px 8px 10px;
}

/* DT */
.fcw-coach{
  font-weight:900;
  font-size:12px;
  color:#111;
  margin:0 0 6px 0;
  display:flex;
  gap:6px;
  align-items:center;
}
.fcw-coach--away{
  justify-content:flex-end;
  text-align:right;
}
.fcw-coach-label{ opacity:.75; }
.fcw-coach-name{ color:#111; }

/* fila suplente */
.fcw-subs-row{
  display:flex;
  align-items:center !important;
  gap:10px;
  background:#f3f3f3;
  border-radius:6px;
  padding:8px 10px;
  margin-bottom:6px;

  min-height:36px;
  line-height:1;
}

.fcw-subs-num{
  width:22px;
  height:22px;
  border-radius:999px;
  background:#1e5aa8;
  color:#fff;
  font-weight:900;
  font-size:12px;

  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;

  line-height:1;
}

/* foto suplente */
.fcw-subs-row .fcw-subs-photo{
  width:34px;
  height:34px;
  border-radius:999px;
  object-fit:cover;

  display:block !important;
  flex:0 0 auto;

  margin:0 !important;
  align-self:center !important;
  vertical-align:middle !important;

  position:relative;
  top:0;
}

/* evita baseline si envuelven la img */
.fcw-subs-row a:has(.fcw-subs-photo),
.fcw-subs-row span:has(.fcw-subs-photo){
  display:flex;
  align-items:center;
  line-height:0;
}

.fcw-subs-name{
  font-size:12px;
  font-weight:500;
  color:#111;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1;
}

/* meta derecha */
.fcw-subs-meta{
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1;
  flex:0 0 auto;
  margin-left:auto;
}

/* rating */
.fcw-subs-rating{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:20px;
  padding:0 8px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  color:#fff;
  line-height:1;
}
.fcw-subs-rating--hi{  background:#1e8f4c; }
.fcw-subs-rating--mid{ background:#e0b000; }
.fcw-subs-rating--low{ background:#d26a19; }

/* pos */
.fcw-subs-pos{
  display:inline-block;
  min-width:34px;
  font-weight:900;
  font-size:12px;
  color:#111;
  opacity:.75;
  line-height:1;
  text-align:right;
}

/* AWAY espejo (row-reverse) */
.fcw-subs-row--away{
  flex-direction:row-reverse;
  justify-content:flex-start;
  align-items:center !important;
}
.fcw-subs-row--away .fcw-subs-name{ text-align:right; }
.fcw-subs-row--away .fcw-subs-meta{
  margin-left:0;
  margin-right:auto;
}
.fcw-subs-row--away .fcw-subs-pos{ text-align:left; }

/* =========================================================
   6) MÓVIL: CARD + SWITCH + FORMACIÓN
   ========================================================= */
@media (max-width: 500px){

  .fcw-lineups-mobile{
    width:100%;
    margin:0;
    padding:0;
    background:#fff;
    border:1px solid rgba(0,0,0,0.06);
    border-radius:16px;
    overflow:visible;
  }

  /* switch */
  .fcw-mtoggle{
    display:flex;
    gap:6px;
    padding:10px 10px 6px 10px;
    background:transparent;
  }

  .fcw-mtoggle-btn{
    flex:1;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:999px;

    background:#fff;
    border:1px solid #d7d7d7;
    cursor:pointer;
    padding:0 10px;
  }

  .fcw-mtoggle-btn.is-active{
    background:#e53935;
    border-color:#e53935;
  }

  .fcw-mtoggle-text{
    font-weight:900;
    font-size:12px;
    color:#333;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }

  .fcw-mtoggle-btn.is-active .fcw-mtoggle-text{ color:#fff; }

  /* pill formación */
  .fcw-mform{
    display:flex;
    justify-content:flex-end;
    padding:0 10px 10px 10px;
  }

  .fcw-mform-pill{
    display:none;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid #e6e6e6;
    background:#f7f7f7;
    font-weight:900;
    font-size:12px;
  }

  .fcw-lineups-mobile[data-active="home"] .fcw-mform-pill[data-for="home"]{ display:inline-flex; }
  .fcw-lineups-mobile[data-active="away"] .fcw-mform-pill[data-for="away"]{ display:inline-flex; }

  /* =========================================================
     7) MÓVIL: PITCH FULL-BLEED (100vw)
     ========================================================= */
  .fcw-mpitches{
    position:relative;
    width:100vw;
    left:50%;
    margin-left:-50vw;
    margin-right:-50vw;
    padding:0;
    overflow:hidden;
  }

  .fcw-halfpitch{
    position:relative;
    width:100%;
    margin:0;
    border-radius:0;
    overflow:hidden;
    aspect-ratio: 67 / 65;
  }

  /* solo uno visible según switch */
  .fcw-halfpitch--away{ display:none; }
  .fcw-lineups-mobile[data-active="away"] .fcw-halfpitch--away{ display:block; }
  .fcw-lineups-mobile[data-active="away"] .fcw-halfpitch--home{ display:none; }

  /* fondo franjas horizontales */
  .fcw-halfpitch-bg{
    position:absolute;
    inset:0;
    background: repeating-linear-gradient(
      180deg,
      #2f8d4e 0px,
      #2f8d4e 34px,
      #277947 34px,
      #277947 68px
    );
  }

  /* líneas (ocultas por ahora) */
  .fcw-halfpitch-perimeter{ display:none; }
  .fcw-halfpitch-midline{ display:none; }

  /* portería y áreas */
  .fcw-halfpitch-goal{
    position:absolute;
    left:40%;
    width:20%;
    height:2px;
    background:rgba(255,255,255,0.95);
    pointer-events:none;
  }

  .fcw-halfpitch-box{
    position:absolute;
    left:12%;
    width:76%;
    height:36%;
    border:2px solid rgba(255,255,255,0.95);
    pointer-events:none;
  }

  .fcw-halfpitch-smallbox{
    position:absolute;
    left:32%;
    width:36%;
    height:12%;
    border:2px solid rgba(255,255,255,0.95);
    pointer-events:none;
  }

  .fcw-halfpitch[data-side="top"] .fcw-halfpitch-goal{ top:0px; }
  .fcw-halfpitch[data-side="bottom"] .fcw-halfpitch-goal{ bottom:0px; }

  .fcw-halfpitch[data-side="top"] .fcw-halfpitch-box{ top:0px; }
  .fcw-halfpitch[data-side="bottom"] .fcw-halfpitch-box{ bottom:0px; }

  .fcw-halfpitch[data-side="top"] .fcw-halfpitch-smallbox{ top:0px; }
  .fcw-halfpitch[data-side="bottom"] .fcw-halfpitch-smallbox{ bottom:0px; }

  /* arco medio círculo */
  .fcw-halfpitch-arc{
    position:absolute;
    left:50%;
    width:56%;
    height:56%;
    border:2px solid rgba(255,255,255,0.95);
    border-radius:999px;
    transform:translateX(-50%);
    pointer-events:none;
  }

  .fcw-halfpitch[data-side="top"] .fcw-halfpitch-arc{
    bottom:-28%;
    clip-path: inset(0 0 50% 0);
  }

  .fcw-halfpitch[data-side="bottom"] .fcw-halfpitch-arc{
    top:-28%;
    clip-path: inset(50% 0 0 0);
  }

  /* SAFE AREA players */
  .fcw-halfpitch-players{
    position:absolute;
    left:0; right:0;
    top:38px;
    bottom:38px;
    pointer-events:none;
  }

  /* =========================================================
     8) TITULARES MÓVIL (spots con FOTO + badge número)
     (tu helper usa: fcw-mspot-avatar / fcw-mspot-photo / fcw-mspot-badge-num)
     ========================================================= */
  .fcw-mspot{
    position:absolute;
    transform:translate(-50%,-50%);
    width:96px;
    text-align:center;
    pointer-events:none;
  }

  /* ✅ AVATAR circular real */
.fcw-mspot-avatar{
  width:34px;
  height:34px;
  margin:0 auto;
  border-radius:999px;
  overflow:hidden;

  background:#fff; /* círculo blanco detrás */
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 2px 8px rgba(0,0,0,.28);

  position:relative;
  z-index:6;
}

  /* ✅ evita esquinas aunque la foto venga cuadrada */
.fcw-mspot-photo{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;

  border-radius:999px !important;
  clip-path:circle(50% at 50% 50%);
  transform:translateZ(0);
}

/* ✅ RATING arriba del círculo (tipo app) */
.fcw-mspot-rating{
  position:absolute;
  left:50%;
  top:40px; /* controla qué tan pegado va */
  transform:translate(-50%, -100%);
  z-index:9;

  min-width:29px;
  height:10px;
  padding:0 6px;
  border-radius:999px;

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

  font-weight:500;
  font-size:8px;
  line-height:1;
  color:#fff;

  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.fcw-mspot-rating--hi{  background:#1e8f4c; }
.fcw-mspot-rating--mid{ background:#e0b000; }
.fcw-mspot-rating--low{ background:#d26a19; }

/* ✅ nombre un poco más abajo */
.fcw-mspot-name{
  margin-top:6px;
  font-size:10px;
  font-weight:500;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.5;
}

/* ✅ número debajo del nombre */
.fcw-mspot-jersey{
  margin-top:2px;
  font-size:9px;
  font-weight:500;
  color:rgba(255,255,255,.90);
  text-shadow:0 1px 2px rgba(0,0,0,.75);
  line-height:1;
}

/* 🚫 apagar badge viejo */
.fcw-mspot-badge-num{ display:none !important; }

@media (max-width: 380px){
  .fcw-mspot{ width:88px; }
  .fcw-mspot-name{ font-size:10px; }
}
  /* =========================================================
     9) SUPLENTES MÓVIL (1 columna, sigue el switch)
     ========================================================= */
  .fcw-msubs{
    margin-top:10px;
    border-top:1px solid rgba(0,0,0,.08);
    padding:10px 0 0 0;
  }

  .fcw-msubs-panel{ display:none; }
  .fcw-msubs-panel.is-active{ display:block; }

  .fcw-msubs-coach{
    font-weight:900;
    font-size:12px;
    margin:0 0 6px 0;
  }
  .fcw-msubs-label{ opacity:.75; }

  .fcw-msubs-title{
    font-weight:900;
    font-size:12px;
    letter-spacing:.04em;
    margin:0 0 8px 0;
  }

  .fcw-msubs-list{
    display:grid;
    gap:6px;
    width:100%;
  }

  .fcw-msubs-row{
    display:flex;
    align-items:center !important;
    gap:10px;

    width:100%;
    box-sizing:border-box;

    background:#f3f3f3;
    border-radius:12px;
    padding:10px 12px;

    min-height:36px;
    line-height:1;
  }

  .fcw-msubs-num{
    width:28px;
    height:28px;
    border-radius:999px;
    background:#1e5aa8;
    color:#fff;
    font-weight:900;
    font-size:12px;

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

    flex:0 0 28px;
    line-height:1;
  }
  .fcw-msubs-num:empty{ display:none; }

  .fcw-msubs-row .fcw-msubs-photo{
    width:35px;
    height:35px;
    border-radius:999px;
    object-fit:cover;

    display:block !important;
    flex:0 0 40px;

    margin:0 !important;
    align-self:center !important;
    vertical-align:middle !important;

    position:relative;
    top:0;
    background:#fff;
  }

  .fcw-msubs-row a:has(.fcw-msubs-photo),
  .fcw-msubs-row span:has(.fcw-msubs-photo){
    display:flex;
    align-items:center;
    line-height:0;
  }

  .fcw-msubs-name{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:13px;
    font-weight:500;
    color:#111;
    line-height:1;
  }

  .fcw-msubs-meta{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
    line-height:1;
  }

  .fcw-msubs-rating{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    height:20px;
    padding:0 8px;
    border-radius:999px;
    font-weight:900;
    font-size:12px;
    color:#fff;
    line-height:1;

    background:#d26a19; /* default */
  }

  .fcw-msubs-rating--hi{  background:#1e8f4c; }
  .fcw-msubs-rating--mid{ background:#e0b000; }
  .fcw-msubs-rating--low{ background:#d26a19; }

  .fcw-msubs-pos{
    display:inline-block;
    min-width:34px;
    text-align:right;

    font-weight:900;
    font-size:12px;
    color:#111;
    opacity:.75;
    line-height:1;
  }

  .fcw-msubs-coach--away,
  .fcw-msubs-title--away,
  .fcw-msubs-empty--away{
    text-align:right;
  }
}