/* =========================================================
   EXCLUSION LEAGUE · V204 · CALENDARIO PREMIUM
   Capa exclusivamente visual para #cal-grid.
   No modifica calendario, resultados, reportes, asistencia,
   administración, Supabase ni Race Weekend.
   ========================================================= */

#cal-grid{
  --cal-pink:var(--brand-primary);
  --cal-pink-soft:var(--brand-primary-soft);
  --cal-panel:var(--surface-card);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;
  align-items:stretch;
}

#cal-grid .rcard{
  min-height:392px;
  padding:17px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(var(--color-white-rgb),.09);
  border-left:1px solid rgba(var(--color-white-rgb),.09);
  border-radius:18px;
  background:
    radial-gradient(circle at 104% -8%,rgba(var(--brand-primary-rgb),.24),transparent 34%),
    radial-gradient(circle at -12% 112%,rgba(var(--brand-primary-rgb),.08),transparent 35%),
    linear-gradient(150deg,rgba(31,31,45,.98),rgba(18,18,29,.99));
  box-shadow:0 14px 36px rgba(var(--color-black-rgb),.22),inset 0 1px 0 rgba(var(--color-white-rgb),.025);
  isolation:isolate;
  cursor:pointer;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

/* Línea institucional rosada: se conserva en todas las carreras. */
#cal-grid .rcard::after{
  content:'';
  position:absolute;
  z-index:0;
  left:0;
  top:18px;
  bottom:18px;
  width:3px;
  border-radius:0 5px 5px 0;
  background:linear-gradient(180deg,var(--cal-pink),rgba(var(--brand-primary-rgb),.28));
  box-shadow:0 0 16px rgba(var(--brand-primary-rgb),.42);
  pointer-events:none;
}

#cal-grid .rcard::before{
  top:8px;
  right:15px;
  z-index:0;
  font-size:66px;
  color:rgba(var(--brand-primary-rgb),.055);
  text-shadow:0 0 28px rgba(var(--brand-primary-rgb),.08);
  pointer-events:none;
}

#cal-grid .rcard>*{position:relative;z-index:1}

#cal-grid .rcard:hover{
  transform:translateY(-6px);
  border-color:rgba(var(--brand-primary-rgb),.58);
  background:
    radial-gradient(circle at 104% -8%,rgba(var(--brand-primary-rgb),.31),transparent 36%),
    radial-gradient(circle at -12% 112%,rgba(var(--brand-primary-rgb),.11),transparent 38%),
    linear-gradient(150deg,rgba(33,32,48,.99),rgba(18,18,29,.99));
  box-shadow:0 22px 52px rgba(var(--color-black-rgb),.34),0 0 28px rgba(var(--brand-primary-rgb),.13),inset 0 1px 0 rgba(var(--color-white-rgb),.04);
}

#cal-grid .race-card-head{
  margin-bottom:10px;
  min-height:25px;
}

#cal-grid .rnum{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  letter-spacing:2.3px;
  color:var(--cal-pink-soft);
}

#cal-grid .rnum::before{
  content:'';
  width:18px;
  height:2px;
  border-radius:99px;
  background:var(--cal-pink);
  box-shadow:0 0 10px rgba(var(--brand-primary-rgb),.7);
}

#cal-grid .rname{
  margin:1px 0 3px;
  padding-right:34px;
  font-size:21px;
  line-height:1.05;
  letter-spacing:.15px;
  color:var(--color-white);
  text-shadow:0 2px 14px rgba(var(--color-black-rgb),.42);
}

#cal-grid .rcirc{
  margin-bottom:11px;
  font-size:12px;
  line-height:1.35;
  color:rgba(240,240,240,.52);
}

#cal-grid .sta{
  min-height:25px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(7,7,13,.48);
  backdrop-filter:blur(7px);
  box-shadow:inset 0 0 0 1px rgba(var(--color-white-rgb),.025);
}

#cal-grid .s-done{
  color:rgba(240,240,240,.48);
  border-color:rgba(var(--color-white-rgb),.16);
  background:rgba(var(--color-white-rgb),.025);
}

#cal-grid .s-soon{
  color:#72d8ff;
  border-color:rgba(var(--status-info-rgb),.62);
  background:rgba(var(--status-info-rgb),.07);
  box-shadow:0 0 16px rgba(var(--status-info-rgb),.08),inset 0 0 0 1px rgba(var(--status-info-rgb),.04);
}

#cal-grid .s-next{
  color:var(--color-white);
  border-color:var(--cal-pink);
  background:linear-gradient(135deg,rgba(var(--brand-primary-rgb),.92),rgba(196,17,119,.92));
  box-shadow:0 0 22px rgba(var(--brand-primary-rgb),.28),inset 0 1px 0 rgba(var(--color-white-rgb),.18);
  animation:calendarNextPulse 2.2s ease-in-out infinite;
}

@keyframes calendarNextPulse{
  0%,100%{box-shadow:0 0 18px rgba(var(--brand-primary-rgb),.22),inset 0 1px 0 rgba(var(--color-white-rgb),.18)}
  50%{box-shadow:0 0 30px rgba(var(--brand-primary-rgb),.38),inset 0 1px 0 rgba(var(--color-white-rgb),.22)}
}

#cal-grid .race-card-map{
  position:relative;
  height:168px;
  margin:7px 0 13px;
  padding:10px 12px;
  border:1px solid rgba(var(--brand-primary-rgb),.16);
  border-radius:15px;
  background:
    radial-gradient(circle at 50% 42%,rgba(var(--brand-primary-rgb),.12),transparent 50%),
    linear-gradient(145deg,rgba(7,7,13,.62),rgba(18,18,28,.84));
  box-shadow:inset 0 0 28px rgba(var(--color-black-rgb),.3),0 10px 22px rgba(var(--color-black-rgb),.13);
  overflow:hidden;
}

#cal-grid .race-card-map::before{
  content:'';
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:
    linear-gradient(rgba(var(--color-white-rgb),.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--color-white-rgb),.055) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:linear-gradient(135deg,rgba(var(--color-black-rgb),.62),transparent 82%);
  pointer-events:none;
}

#cal-grid .race-card-map::after{
  content:'';
  position:absolute;
  left:18%;
  right:18%;
  bottom:0;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--cal-pink),transparent);
  opacity:.72;
  box-shadow:0 0 12px rgba(var(--brand-primary-rgb),.45);
  pointer-events:none;
}

#cal-grid .race-card-map .track-visual{z-index:1}
#cal-grid .race-card-map .track-visual-image{
  padding:3px;
  background:transparent;
}

/* Los mapas actuales tienen fondo negro: screen los integra visualmente
   sin editar ni reemplazar ningún archivo del calendario. */
#cal-grid .race-card-map .track-img.thumb{
  width:100%;
  max-height:142px;
  object-fit:contain;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 7px rgba(var(--color-white-rgb),.2)) drop-shadow(0 0 12px rgba(var(--brand-primary-rgb),.07));
  transition:transform .24s ease,filter .24s ease;
}

#cal-grid .rcard:hover .track-img.thumb{
  transform:scale(1.035);
  filter:drop-shadow(0 0 8px rgba(var(--color-white-rgb),.26)) drop-shadow(0 0 16px rgba(var(--brand-primary-rgb),.12));
}

#cal-grid .rdate{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 11px;
  min-height:22px;
  color:rgba(var(--color-white-rgb),.88);
  font-size:10px;
  line-height:1.35;
}

#cal-grid .rdate::before{
  content:'';
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--cal-pink);
  box-shadow:0 0 12px rgba(var(--brand-primary-rgb),.65);
}

#cal-grid .race-card-tags{
  display:flex;
  align-items:flex-start;
  align-content:flex-start;
  flex-wrap:wrap;
  gap:6px;
  min-height:28px;
}

#cal-grid .tag{
  margin:0;
  padding:4px 8px;
  border-radius:7px;
  line-height:1.15;
  background:rgba(var(--color-white-rgb),.025);
}

#cal-grid .tag.tr{
  border-color:rgba(var(--brand-primary-rgb),.72);
  color:var(--brand-primary-soft);
  background:rgba(var(--brand-primary-rgb),.08);
}

#cal-grid .race-card-cta{
  margin-top:auto;
  padding-top:13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid rgba(var(--color-white-rgb),.07);
  color:var(--brand-primary-soft);
  font-size:10px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:1.35px;
  transition:color .2s ease,border-color .2s ease;
}

#cal-grid .race-card-cta::after{
  content:'→';
  flex:0 0 auto;
  font-family:'Orbitron',monospace;
  font-size:15px;
  color:var(--cal-pink);
  transition:transform .2s ease;
}

#cal-grid .rcard:hover>.race-card-cta{
  color:var(--color-white);
  border-top-color:rgba(var(--brand-primary-rgb),.27);
}

#cal-grid .rcard:hover>.race-card-cta::after{transform:translateX(4px)}

/* Carrera finalizada: conserva presencia, pero cede protagonismo. */
#cal-grid .rcard:has(.s-done){
  background:
    radial-gradient(circle at 104% -8%,rgba(var(--brand-primary-rgb),.11),transparent 34%),
    linear-gradient(150deg,rgba(28,28,40,.92),rgba(17,17,26,.96));
}

/* Próxima carrera: tarjeta editorial destacada en escritorio. */
#cal-grid .rcard:has(.s-next){
  border-color:rgba(var(--brand-primary-rgb),.58);
  box-shadow:0 18px 48px rgba(var(--color-black-rgb),.3),0 0 30px rgba(var(--brand-primary-rgb),.13),inset 0 1px 0 rgba(var(--color-white-rgb),.04);
}

#cal-grid .rcard:has(.s-next)::after{
  width:4px;
  background:linear-gradient(180deg,#ff74c1,var(--cal-pink),rgba(var(--brand-primary-rgb),.28));
  box-shadow:0 0 24px rgba(var(--brand-primary-rgb),.65);
}

@media(min-width:1200px){
  #cal-grid .rcard:has(.s-next){
    grid-column:span 2;
    min-height:392px;
    display:grid;
    grid-template-columns:minmax(0,.86fr) minmax(300px,1.14fr);
    grid-template-rows:auto auto auto minmax(18px,1fr) auto auto auto;
    column-gap:22px;
    align-items:start;
  }
  #cal-grid .rcard:has(.s-next)>.race-card-head{grid-column:1;grid-row:1}
  #cal-grid .rcard:has(.s-next)>.rname{grid-column:1;grid-row:2;font-size:28px;margin-top:3px}
  #cal-grid .rcard:has(.s-next)>.rcirc{grid-column:1;grid-row:3;font-size:13px}
  #cal-grid .rcard:has(.s-next)>.race-card-map{
    grid-column:2;
    grid-row:1 / 8;
    align-self:stretch;
    width:100%;
    height:auto;
    min-height:342px;
    margin:0;
    padding:18px;
  }
  #cal-grid .rcard:has(.s-next)>.race-card-map .track-img.thumb{max-height:292px}
  #cal-grid .rcard:has(.s-next)>.rdate{grid-column:1;grid-row:5;margin-bottom:10px}
  #cal-grid .rcard:has(.s-next)>.race-card-tags{grid-column:1;grid-row:6}
  #cal-grid .rcard:has(.s-next)>.race-card-cta{grid-column:1;grid-row:7;width:100%;margin-top:14px}
}

@media(max-width:768px){
  #cal-grid{grid-template-columns:1fr;gap:14px}
  #cal-grid .rcard{min-height:0;border-radius:15px;padding:15px}
  #cal-grid .race-card-map{height:158px}
  #cal-grid .rname{font-size:20px}
}

@media(prefers-reduced-motion:reduce){
  #cal-grid .rcard,#cal-grid .track-img.thumb,#cal-grid .race-card-cta::after{transition:none!important}
  #cal-grid .s-next{animation:none!important}
}