/* ============================================================
   CONFIRMAR · TARJETAS NUEVAS BASADAS EN mp-match-card
   ------------------------------------------------------------
   Ajustes:
   - kms como botón pill
   - glow verde más intenso cuando está activo
   - gris apagado cuando no está activo
   - glow azul de cambios no guardados más intenso y palpitante
   - SOLO palpita el brillo, no la tarjeta
   - nombres centrados de verdad cuando ocupan 1 línea
   - nombres en 2 líneas cuando hace falta
   - nombres ocultos solo en ancho pequeño real
   - badges edad/liga más abajo
   ============================================================ */

.cf-week-item{
  display:flex;
  flex-direction:column;
  gap:0;
  transition:opacity .22s ease;
  margin-bottom:20px;
}

.cf-week-item:last-child{
  margin-bottom:0;
}

.cf-week-item.is-unselected{
  opacity:.46;
}

.cf-week-item.is-selected{
  opacity:1;
}

/* glow de cambios SOLO sobre el bloque visual */
.cf-week-card-visual{
  position:relative;
  border-radius:16px;
}

.cf-week-item.is-changed .cf-week-card-visual{
  border-radius:16px;
  animation:cfWeekUnsavedGlowPulse 1.45s ease-in-out infinite;
  box-shadow:
    0 0 10px rgba(0,231,255,.42),
    0 0 22px rgba(0,231,255,.22),
    0 0 38px rgba(0,231,255,.10),
    inset 0 0 8px rgba(0,231,255,.10);
}

@keyframes cfWeekUnsavedGlowPulse{
  0%{
    box-shadow:
      0 0 10px rgba(0,231,255,.42),
      0 0 22px rgba(0,231,255,.22),
      0 0 38px rgba(0,231,255,.10),
      inset 0 0 8px rgba(0,231,255,.10);
  }

  50%{
    box-shadow:
      0 0 18px rgba(0,231,255,.78),
      0 0 40px rgba(0,231,255,.46),
      0 0 66px rgba(0,231,255,.24),
      inset 0 0 16px rgba(0,231,255,.18);
  }

  100%{
    box-shadow:
      0 0 10px rgba(0,231,255,.42),
      0 0 22px rgba(0,231,255,.22),
      0 0 38px rgba(0,231,255,.10),
      inset 0 0 8px rgba(0,231,255,.10);
  }
}

/* área clicable REAL */
.cf-week-card-clickarea{
  position:relative;
  width:100%;
  min-height:92px;
  border-radius:16px;
  cursor:pointer;
  overflow:visible;
  padding:14px 14px 14px 14px;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.cf-week-item.is-partido .cf-week-card-clickarea{
  background:
    linear-gradient(180deg, rgba(8,29,24,.82), rgba(9,20,18,.92)),
    linear-gradient(90deg, rgba(6,190,132,.16), rgba(6,190,132,.08));
  border:1px solid rgba(41,217,163,.48);
  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.cf-week-item.is-evento .cf-week-card-clickarea{
  background:
    linear-gradient(180deg, rgba(7,20,24,.84), rgba(8,17,20,.92)),
    linear-gradient(90deg, rgba(1,77,78,.22), rgba(1,77,78,.10));
  border:1px solid rgba(31,143,144,.50);
  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.cf-week-card-clickarea:hover{
  transform:translateY(-1px);
  box-shadow:
    0 12px 24px rgba(0,0,0,.28),
    0 0 0 1px rgba(83,255,173,.10);
}

/* si tiene cambios, borde más visible */
.cf-week-item.is-changed .cf-week-card-clickarea{
  border-color:rgba(96,233,255,.92) !important;
}

/* ============================================================
   MAIN
   ============================================================ */

.cf-week-card-main{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 40px 30px 40px minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-height:64px;
}

.cf-week-card-main-event{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
}

/* capa exterior: centra verticalmente */
.cf-week-team-name{
  min-width:0;
  height:34px;
  display:flex;
  align-items:center;
  margin:0;
}

/* alineación lateral */
.cf-week-team-left{
  justify-self:end;
  justify-content:flex-end;
  text-align:right;
}

.cf-week-team-right{
  justify-self:start;
  justify-content:flex-start;
  text-align:left;
}

/* capa interior: clamp real */
.cf-week-team-name-text{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
  overflow-wrap:anywhere;
  line-height:1.08;
  font-size:.90rem;
  font-weight:800;
  color:#f5fff9;
  max-width:100%;
}

.cf-week-shield{
  width:38px;
  height:38px;
  border-radius:50%;
  object-fit:cover;
  border:1.8px solid #E9FFF7;
  box-shadow:0 1px 4px rgba(0,0,0,.34);
  background:#0d1516;
}

.cf-week-vs{
  min-width:30px;
  text-align:center;
  font-size:.92rem;
  font-weight:900;
  color:rgba(245,255,249,.92);
  letter-spacing:.04em;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cf-week-event-icon{
  height:34px;
  width:auto;
  object-fit:contain;
  display:block;
}

.cf-week-event-title{
  font-size:.92rem;
  font-weight:800;
  color:#f2fffb;
  line-height:1.15;
  max-width:92%;
  margin-top:4px;
}

/* ============================================================
   CHIPS FLOTANTES
   ============================================================ */

.cf-week-floating-chip{
  position:absolute;
  z-index:20;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(83,255,173,.34);
  background:rgba(2,87,64,.94);
  color:#ecfff6;
  font-size:11px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}

.cf-week-floating-chip-hour{
  top:-12px;
  left:10px;
  width:auto;
  min-width:0;
  max-width:72px;
  padding:0 8px;
}

/* ============================================================
   KMS COMO BOTÓN PILL
   ============================================================ */

.cf-week-floating-chip-kms{
  position:absolute;
  top:-12px;
  right:10px;
  left:auto;
  z-index:40;

  min-height:22px;
  height:22px;
  min-width:56px;
  padding:0 10px;
  border-radius:999px;

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

  font-size:11px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  text-align:center;

  cursor:pointer;
  user-select:none;
  pointer-events:auto;

  appearance:none;
  -webkit-appearance:none;
  outline:none;

  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease,
    transform .18s ease,
    opacity .18s ease;
}

/* encendido */
.cf-week-floating-chip-kms.is-on{
  background:linear-gradient(180deg, rgba(14,145,92,.99), rgba(5,96,61,.99));
  border:1px solid rgba(140,255,196,.92);
  color:#f7fff9;
  box-shadow:
    0 0 12px rgba(57,255,20,.50),
    0 0 24px rgba(57,255,20,.34),
    0 0 40px rgba(57,255,20,.18),
    0 2px 8px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* apagado */
.cf-week-floating-chip-kms.is-off{
  background:linear-gradient(180deg, rgba(70,77,84,.95), rgba(48,54,60,.97));
  border:1px solid rgba(141,150,158,.42);
  color:rgba(236,245,240,.84);
  box-shadow:
    0 2px 8px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* deshabilitado */
.cf-week-floating-chip-kms.is-disabled,
.cf-week-floating-chip-kms:disabled{
  cursor:not-allowed;
  opacity:.72;
}

/* hover */
.cf-week-floating-chip-kms:not(:disabled):hover{
  transform:translateY(-1px);
}

/* focus */
.cf-week-floating-chip-kms:focus-visible{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.10),
    0 0 0 4px rgba(57,255,20,.22);
}

.cf-week-floating-chip-field{
  bottom:-12px;
  left:50%;
  transform:translateX(-50%);
  max-width:72%;
  padding-left:10px;
  padding-right:10px;
  justify-content:flex-start;
  text-align:left;
}

.cf-week-field-chip-text{
  display:block;
  width:100%;
  text-align:left;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ============================================================
   OPCIÓN
   ============================================================ */

.cf-week-option-badge{
  position:absolute;
  right:-5px;
  bottom:-5px;
  z-index:25;
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  font-weight:900;
  line-height:1;
  box-shadow:
    0 2px 8px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.cf-week-option-text{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
  line-height:1;
  user-select:none;
}

.cf-week-option-badge.is-option-a{
  background:radial-gradient(circle at 30% 30%, rgba(120,255,190,.95), rgba(28,180,95,.96));
  border:2px solid rgba(195,255,220,.95);
  color:#04160c;
  box-shadow:
    0 0 8px rgba(57,255,20,.55),
    0 0 16px rgba(57,255,20,.28),
    0 2px 8px rgba(0,0,0,.38);
}

.cf-week-option-badge.is-option-b{
  background:radial-gradient(circle at 30% 30%, rgba(255,233,120,.98), rgba(255,181,32,.96));
  border:2px solid rgba(255,245,190,.95);
  color:#1d1404;
  box-shadow:
    0 0 8px rgba(255,193,7,.48),
    0 0 16px rgba(255,193,7,.24),
    0 2px 8px rgba(0,0,0,.38);
}

.cf-week-option-badge.is-option-coor{
  background:radial-gradient(circle at 30% 30%, rgba(222,140,255,.98), rgba(145,58,255,.96));
  border:2px solid rgba(238,205,255,.95);
  color:transparent;
  box-shadow:
    0 0 8px rgba(181,74,255,.62),
    0 0 16px rgba(181,74,255,.30),
    0 2px 8px rgba(0,0,0,.38);
}

.cf-week-option-badge.is-option-unknown{
  background:radial-gradient(circle at 30% 30%, rgba(180,188,196,.98), rgba(108,116,124,.96));
  border:2px solid rgba(228,232,236,.88);
  color:#101316;
  box-shadow:
    0 0 6px rgba(185,197,205,.20),
    0 2px 8px rgba(0,0,0,.38);
}

/* ============================================================
   BADGES LATERALES
   ============================================================ */

.cf-week-side-badges{
  position:absolute;
  top:8px;
  left:-12px;
  z-index:25;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.cf-week-side-badge{
  width:30px;
  height:30px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #06BE84;
  background:#023e2f;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px){
  .cf-week-item{
    margin-bottom:12px;
  }

  .cf-week-card-clickarea{
    min-height:88px;
    padding:14px 10px 14px 10px;
  }

  .cf-week-card-main{
    grid-template-columns:minmax(0,1fr) 34px 26px 34px minmax(0,1fr);
    gap:6px;
  }

  .cf-week-team-name{
    height:30px;
  }

  .cf-week-team-name-text{
    font-size:.78rem;
  }

  .cf-week-shield{
    width:32px;
    height:32px;
  }

  .cf-week-vs{
    min-width:26px;
    font-size:.84rem;
  }

  .cf-week-floating-chip{
    font-size:10px;
    min-height:21px;
    height:21px;
  }

  .cf-week-floating-chip-field{
    max-width:78%;
  }

  .cf-week-floating-chip-kms{
    right:8px;
    min-width:52px;
    min-height:21px;
    height:21px;
    padding:0 9px;
    font-size:10px;
  }

  .cf-week-option-badge{
    width:24px;
    height:24px;
    right:-3px;
    bottom:-3px;
  }

  .cf-week-option-text{
    font-size:12px;
  }

  .cf-week-side-badges{
    left:-8px;
    top:10px;
  }

  .cf-week-side-badge{
    width:28px;
    height:28px;
  }
}

@media (max-width: 520px){
  .cf-week-team-name{
    display:none !important;
  }

  .cf-week-card-main{
    grid-template-columns:34px 26px 34px;
    justify-content:center;
  }

  .cf-week-card-main .cf-week-shield:first-of-type{
    grid-column:1;
  }

  .cf-week-card-main .cf-week-vs{
    grid-column:2;
  }

  .cf-week-card-main .cf-week-shield:last-of-type{
    grid-column:3;
  }

  .cf-week-floating-chip-kms{
    right:8px;
    min-width:48px;
    min-height:20px;
    height:20px;
    padding:0 8px;
    font-size:10px;
  }
}

/* ============================================================
   OCULTAR NOMBRES GLOBALMENTE SEGÚN ANCHO
   ============================================================ */

.cf-week-hide-team-names .cf-week-team-name{
  display:none !important;
}

.cf-week-hide-team-names .cf-week-card-main{
  grid-template-columns:34px 26px 34px;
  justify-content:center;
}

.cf-week-hide-team-names .cf-week-card-main .cf-week-shield:first-of-type{
  grid-column:1;
}

.cf-week-hide-team-names .cf-week-card-main .cf-week-vs{
  grid-column:2;
}

.cf-week-hide-team-names .cf-week-card-main .cf-week-shield:last-of-type{
  grid-column:3;
}