/* ══════════════════════════════════════════════════════════════════
   COP · GRUPOS DE MINIJUEGOS (20/10/2026) — ver cop-mgrupos.js
   Sólo el armado de este modo: las piezas son las del sistema
   (cop-tarjeta-grupo, cop-grupo-pagina, cop-tarjeta-ranking, cop-b).
   Sin cajas: todo sobre el fondo de la app, separado por líneas.
   ══════════════════════════════════════════════════════════════════ */
.mg-pag{ background:var(--bg, #0b0e14); color:#fff; font-family:'Inter', sans-serif }
/* el «volver» del grupo de Predicciones (grupo.html), con sus mismas medidas */
.mg-pag .volver{ display:inline-flex; align-items:center; gap:var(--gap-sm, .5rem); color:var(--text-dim, #8b93a7);
  text-decoration:none; font-weight:700; font-size:var(--fs-md, .88rem); margin:var(--gap-lg, 1rem) 0 var(--gap-md, .7rem) }
@media (hover:hover) and (pointer:fine){ .mg-pag .volver:hover{ color:#fff } }
.mg-nota{ margin:0; padding:var(--gap-2xl, 1.8rem) 0 var(--gap-lg, 1rem); text-align:center;
  font:600 var(--fs-md, .88rem)/1.45 Inter, sans-serif; color:var(--text-dim, #9aa3b5) }
.mg-acc{ display:flex; justify-content:center; flex-wrap:wrap; gap:var(--gap-sm, .5rem); margin:var(--gap-sm, .5rem) 0 var(--gap-lg, 1rem) }
.mg-msj{ min-height:1.2em; margin:var(--gap-sm, .5rem) 0 0; text-align:center; font:600 var(--fs-sm, .8rem) Inter, sans-serif; color:var(--primary-soft, #7cc8ff) }
.mg-msj:empty{ min-height:0 } .mg-msj.mal{ color:#ff6b7a }
.mg-pie{ margin:var(--gap-sm, .5rem) 0 var(--gap-lg, 1rem); font:600 var(--fs-sm, .8rem)/1.45 Inter, sans-serif; color:var(--text-dim, #9aa3b5); text-align:center }

/* vidriera */
.mg-botones{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-sm, .5rem); margin:var(--gap-md, .7rem) 0 var(--gap-sm, .5rem) }
.mg-botones .cop-b{ width:100%; min-width:0; padding-inline:var(--gap-sm, .5rem) }
.mg-form{ display:grid; gap:var(--gap-sm, .5rem); padding:var(--gap-md, .7rem) 0 var(--gap-lg, 1rem); border-bottom:1px solid rgba(255,255,255,.07) }
.mg-form[hidden]{ display:none }
.mg-form label{ display:grid; gap:6px; font:700 var(--fs-sm, .8rem) Inter, sans-serif; color:var(--text, #f4f6fb) }
.mg-form input[type=text]{ min-height:44px; padding:10px 12px; border-radius:var(--r-card, 14px); border:1px solid #1e2330; background:#0b0d12;
  color:var(--text, #f4f6fb); font:600 var(--fs-base, 1rem) Inter, sans-serif; box-sizing:border-box; width:100% }
.mg-form input[type=text]:focus{ outline:none; border-color:rgba(12,149,235,.8); box-shadow:0 0 0 3px rgba(12,149,235,.18) }
.mg-form .mg-check{ display:flex; align-items:center; gap:var(--gap-sm, .5rem); font-weight:600; color:var(--text-dim, #9aa3b5) }
.mg-form .mg-check input{ width:20px; height:20px; accent-color:var(--primary, #0c95eb) }
.mg-grupos{ display:grid; gap:0 }
.mg-g{ cursor:pointer }

/* el minijuego del día */
.mg-hoy{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:var(--gap-md, .7rem);
  padding:var(--gap-md, .7rem) 0; border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07) }
.mg-hoy-logo{ width:64px; height:64px; background:var(--tc-logo) center / contain no-repeat;
  filter:drop-shadow(0 8px 18px rgba(var(--tc-rgb, 12,149,235), .45)) }
.mg-hoy-tx{ display:grid; gap:2px; min-width:0 }
.mg-hoy-tx b{ font:400 var(--fs-xl, 1.3rem)/1.05 Anton, sans-serif; text-transform:uppercase; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere }
.mg-hoy-tx small{ font:700 var(--fs-sm, .8rem) Inter, sans-serif; color:var(--text-dim, #9aa3b5) }
.mg-hoy-tx small span{ color:var(--primary-soft, #7cc8ff) }
.mg-hoy-yo em{ font-style:normal; color:#fff }
@media (max-width:359px){ .mg-hoy{ grid-template-columns:48px minmax(0,1fr) auto } .mg-hoy-logo{ width:48px; height:48px } .mg-hoy-tx b{ font-size:var(--fs-xl, 1.3rem) } }

/* anteriores del mes */
.mg-ant-f{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:var(--gap-md, .7rem);
  padding:var(--gap-md, .7rem) 0; border-bottom:1px solid rgba(255,255,255,.07) }
.mg-ant-f time{ font:400 var(--fs-lg, 1.15rem)/1 Anton, sans-serif; color:var(--text-dim, #9aa3b5) }
.mg-ant-f span{ display:grid; gap:2px; min-width:0 }
.mg-ant-f b{ font:700 var(--fs-md, .88rem) Inter, sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mg-ant-f small{ font:600 var(--fs-sm, .8rem) Inter, sans-serif; color:var(--text-dim, #9aa3b5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mg-ant-f em{ font:400 var(--fs-xl, 1.3rem)/1 Anton, sans-serif; font-style:normal }

/* administrar */
#mgPanelAdmin[hidden]{ display:none }
.mg-adm{ display:grid; gap:var(--gap-sm, .5rem); padding:var(--gap-sm, .5rem) 0 var(--gap-md, .7rem); border-bottom:1px solid rgba(255,255,255,.07) }
.mg-adm-f{ display:flex; align-items:center; justify-content:space-between; gap:var(--gap-md, .7rem) }
.mg-adm-f span{ display:grid; gap:2px } .mg-adm-f small{ font:700 var(--fs-xs, .72rem) Inter, sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim, #9aa3b5) }
.mg-adm-f b{ font:400 var(--fs-xl, 1.3rem)/1 Anton, sans-serif; letter-spacing:.06em }
.mg-adm .mg-pie{ text-align:left; margin:0 }

/* la tarjeta del día ahora es un botón (abre el menú) */
button.mg-hoy{ all:unset; box-sizing:border-box; width:100%; cursor:pointer; display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center;
  gap:var(--gap-md, .7rem); padding:var(--gap-md, .7rem) 0; border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07) }
button.mg-hoy:focus-visible{ outline:2px solid var(--primary, #0c95eb); outline-offset:4px; border-radius:var(--r-card, 14px) }
@media (hover:hover) and (pointer:fine){ button.mg-hoy:hover .mg-hoy-logo{ transform:scale(1.06) } }
.mg-hoy-logo{ transition:transform .25s }
@media (max-width:359px){ button.mg-hoy{ grid-template-columns:48px minmax(0,1fr) auto } }

/* ── el menú del minijuego y la preparación: página entera ── */
.mg-menu{ position:fixed; inset:0; z-index:400; background:var(--bg, #0b0e14); overflow-y:auto; overflow-x:hidden;
  padding:env(safe-area-inset-top, 0px) var(--cop-aire, 1rem) calc(var(--gap-2xl, 1.8rem) + env(safe-area-inset-bottom, 0px)); box-sizing:border-box }
.mg-menu[hidden]{ display:none }
body.mg-menu-abierto{ overflow:hidden }
.mg-menu-cab{ display:flex; justify-content:flex-start; min-height:56px; align-items:center }
.mg-x{ all:unset; cursor:pointer; display:grid; place-items:center; width:44px; height:44px; font:400 30px/1 Inter, sans-serif; color:var(--text-dim, #9aa3b5) }
.mg-x:focus-visible{ outline:2px solid var(--primary, #0c95eb); border-radius:var(--r-card, 14px) }
.mg-menu-in{ max-width:520px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center;
  min-height:calc(100dvh - 56px - var(--gap-2xl, 1.8rem) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); justify-content:center; gap:var(--gap-sm, .5rem) }
.mg-hero{ position:relative; width:150px; height:150px; display:grid; place-items:center; margin-bottom:var(--gap-sm, .5rem) }
.mg-hero-luz{ position:absolute; inset:-35%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--tc-rgb, 12,149,235), .45), rgba(var(--tc-rgb, 12,149,235), .12) 55%, transparent) }
.mg-hero-logo, .mg-prep-logo{ position:relative; width:100%; height:100%; background:var(--tc-logo) center / contain no-repeat;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.55)) }
.mg-hero-t{ margin:0; font:800 var(--fs-xs, .72rem) Inter, sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--primary-soft, #7cc8ff) }
.mg-hero-n{ margin:0; font:400 2.4rem/1 Anton, sans-serif; text-transform:uppercase; text-wrap:balance }
.mg-ops{ width:100%; margin-top:var(--gap-xl, 1.2rem); display:grid; gap:0; text-align:left }
.mg-op{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--gap-md, .7rem);
  padding:var(--gap-lg, 1rem) 0; border-top:1px solid rgba(255,255,255,.07) }
.mg-op:last-child{ border-bottom:1px solid rgba(255,255,255,.07) }
.mg-op-tx{ display:grid; gap:3px; min-width:0 }
.mg-op-tx b{ font:400 var(--fs-2xl, 1.5rem)/1 Anton, sans-serif; text-transform:uppercase; display:flex; align-items:baseline; gap:.5rem }
.mg-cnt{ font:400 var(--fs-lg, 1.15rem)/1 Anton, sans-serif; color:var(--primary-soft, #7cc8ff) }
.mg-op-tx small{ font:600 var(--fs-sm, .8rem)/1.4 Inter, sans-serif; color:var(--text-dim, #9aa3b5) }
.mg-op-tx small em{ font-style:normal; color:#fff }
@media (max-width:399px){ .mg-op{ grid-template-columns:1fr } .mg-op .cop-b{ width:100% } }

/* la preparación */
.mg-prep .mg-prep-logo{ width:96px; height:96px; margin:var(--gap-md, .7rem) 0 }
.mg-prep-intro{ margin:0; max-width:46ch; font:600 var(--fs-base, 1rem)/1.5 Inter, sans-serif; color:var(--text, #f4f6fb) }
.mg-reglas{ list-style:none; counter-reset:r; margin:var(--gap-md, .7rem) 0 0; padding:0; width:100%; text-align:left; display:grid; gap:0 }
.mg-reglas li{ counter-increment:r; display:grid; grid-template-columns:28px minmax(0,1fr); gap:var(--gap-sm, .5rem); padding:var(--gap-md, .7rem) 0;
  border-top:1px solid rgba(255,255,255,.07); font:600 var(--fs-md, .88rem)/1.45 Inter, sans-serif; color:var(--text-dim, #9aa3b5) }
.mg-reglas li::before{ content:counter(r); font:400 var(--fs-lg, 1.15rem)/1.2 Anton, sans-serif; color:var(--primary-soft, #7cc8ff) }
.mg-prep-nota{ margin:var(--gap-md, .7rem) 0 0; font:700 var(--fs-sm, .8rem)/1.4 Inter, sans-serif; color:var(--primary-soft, #7cc8ff) }
.mg-jugar{ width:100%; max-width:360px; margin-top:var(--gap-lg, 1rem) }

/* entrada: una sola vez, escalonada; quieta con «menos movimiento» */
@keyframes mgSube{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@keyframes mgPop{ 0%{ opacity:0; transform:scale(.55) rotate(-12deg) } 70%{ opacity:1; transform:scale(1.06) rotate(2deg) } 100%{ transform:none } }
@keyframes mgLuz{ from{ opacity:0; transform:scale(.6) } to{ opacity:1; transform:none } }
.mg-entra > *{ animation:mgSube .5s cubic-bezier(.16,1,.3,1) both }
.mg-entra > :nth-child(2){ animation-delay:.08s } .mg-entra > :nth-child(3){ animation-delay:.14s }
.mg-entra > :nth-child(4){ animation-delay:.2s } .mg-entra > :nth-child(5){ animation-delay:.26s }
.mg-entra > :nth-child(6){ animation-delay:.32s } .mg-entra > :nth-child(7){ animation-delay:.38s } .mg-entra > :nth-child(8){ animation-delay:.44s }
.mg-entra .mg-hero-logo, .mg-entra .mg-prep-logo{ animation:mgPop .7s cubic-bezier(.16,1,.3,1) both .05s }
.mg-entra .mg-hero-luz{ animation:mgLuz .9s ease-out both }
@media (prefers-reduced-motion:reduce){ .mg-entra > *, .mg-entra .mg-hero-logo, .mg-entra .mg-prep-logo, .mg-entra .mg-hero-luz{ animation:none } }

/* ── copas relámpago (mgrupos2, 22/10/2026) ── */
.mg-copa{ margin-top:var(--gap-xl, 1.3rem) }
.mg-copa-cab{ display:grid; justify-items:center; gap:var(--gap-xs, .3rem); text-align:center; margin-bottom:var(--gap-md, .7rem) }
.mg-copa-chip{ font:800 var(--fs-xs, .72rem) Inter, sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim, #9aa3b5) }
.mg-copa-chip.on{ color:var(--primary-soft, #7cc8ff) }
.mg-copa-n{ margin:0; font:400 var(--fs-2xl, 1.5rem)/1.05 Anton, sans-serif; text-transform:uppercase; overflow-wrap:anywhere }
.mg-copa-t{ margin:0; font:600 var(--fs-sm, .8rem) Inter, sans-serif; color:var(--text-dim, #9aa3b5) }
.mg-copa-t span{ color:var(--primary-soft, #7cc8ff) }
.mg-copa-js{ display:grid; gap:var(--gap-sm, .5rem) }
.mg-copa-js .mg-hoy{ border:0; padding:var(--gap-xs, .3rem) 0; width:100%; background:none; color:inherit; text-align:left; font:inherit; cursor:pointer }
.mg-copa-js div.mg-hoy{ cursor:default }
.mg-copa-js .mg-hoy-logo{ width:48px; height:48px }
.mg-copa-js .mg-hoy{ grid-template-columns:48px minmax(0,1fr) auto }
.mg-copa-js .mg-hoy-tx b{ font-size:var(--fs-lg, 1.15rem) }
.mg-copa-form{ border-bottom:0 }
.mg-copa-lbl{ margin:var(--gap-sm, .5rem) 0 0; font:700 var(--fs-sm, .8rem) Inter, sans-serif; color:var(--text, #f4f6fb) }
.mg-copa-lbl small{ font-weight:600; color:var(--text-dim, #9aa3b5) }
.mg-chips{ display:flex; flex-wrap:wrap; gap:var(--gap-sm, .5rem) }
.mg-chips .cop-chip[disabled]{ opacity:.4 }