/* ══════════════════════════════════════════════════════════════════
   COP · MENÚ DE INGRESO Y ADMINISTRAR (07/10/2026) — cop-grupo-menu.js
   Página entera por encima de todo, con la cabecera de la app. Las
   piezas son las del sistema (cop-b, cop-chip, cop-tsec, cop-ranking):
   acá sólo va el armado.
   ══════════════════════════════════════════════════════════════════ */
.cop-pag{position:fixed;inset:0;z-index:300;background:var(--bg,#0f0f0f);overflow-y:auto;
  padding:env(safe-area-inset-top,0) 0 calc(var(--gap-2xl,1.8rem) + env(safe-area-inset-bottom,0));
  box-sizing:border-box;-webkit-overflow-scrolling:touch}
.cop-pag[hidden]{display:none}
body.cop-pag-abierta{overflow:hidden}
.cop-pag-cab{min-height:56px;margin-bottom:var(--gap-sm,.45rem)}
.cop-pag-der{position:absolute;right:var(--cop-aire,1rem);top:50%;translate:0 -50%;display:flex;align-items:center}
.cop-pag-der:empty{display:none}
.cop-pag-cuerpo{max-width:640px;margin:0 auto;padding:0 var(--cop-aire,1rem)}
.cop-pag-nota{color:var(--text-dim,#9aa3b5);font-size:var(--fs-md,.88rem);text-align:center;padding:var(--gap-2xl,1.8rem) 0}

/* ── Unirse: celeste si se puede, gris y quieto si no ── */
.cop-b.cop-gm-unirse.cop-gm-unirse.cop-borde.cop-borde{--borde-rgb:12,149,235;color:#fff}
.cop-b.cop-gm-unirse.cop-gm-unirse.cop-borde.cop-borde[disabled]{--borde-rgb:120,128,145;color:var(--text-dim,#9aa3b5);
  opacity:.75;filter:grayscale(1)}
.cop-gm-unirse[disabled]::after{content:"";display:inline-block;width:.75em;height:.75em;margin-left:.45em;vertical-align:-.05em;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1Zm2 0h6V7a3 3 0 0 0-6 0v3Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1Zm2 0h6V7a3 3 0 0 0-6 0v3Z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ── la cabeza: la tarjeta del grupo, fija ── */
.cop-gm-tarjeta{margin:0 0 var(--gap-md,.7rem)}
.cop-gm-tarjeta .gr-card{cursor:default}
/* (respaldo sin componente) */
.cop-gm-cabeza{display:flex;align-items:center;gap:var(--gap-lg,1rem);padding:var(--gap-lg,1rem) 0 var(--gap-md,.7rem)}
.cop-gm-cam{flex:0 0 auto;width:72px;height:72px;display:grid;place-items:center;position:relative}
.cop-gm-cam::before{content:"";position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle,var(--gm-color,rgba(12,149,235,.45)) 0,transparent 70%);opacity:.55}
.cop-gm-cam img{position:relative;width:100%;height:100%;object-fit:contain}
.cop-gm-cabeza h2{margin:0;font:400 var(--fs-xl,1.3rem)/1.1 Anton,sans-serif;letter-spacing:.3px;text-transform:uppercase;
  color:var(--text,#f4f6fb);overflow-wrap:anywhere}
.cop-gm-cabeza span{display:block;margin-top:var(--gap-xs,.3rem);font-size:var(--fs-sm,.8rem);font-weight:600;color:var(--primary,#0c95eb)}
.cop-gm-desc{margin:0 0 var(--gap-md,.7rem);color:var(--text-dim,#9aa3b5);font-size:var(--fs-md,.88rem);line-height:1.45}

/* ── los tres datos ── */
/* ⚠ SIN RECUADROS (Franco, 13/10/2026): los tres datos sobre el fondo, con
   líneas verticales entre ellos, el rótulo en UNA línea y el valor grande. */
.cop-gm-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:var(--gap-md,.7rem) 0 var(--gap-lg,1rem)}
.cop-gm-datos>div{display:flex;flex-direction:column;align-items:center;gap:var(--gap-sm,.45rem);padding:var(--gap-xs,.3rem) var(--gap-sm,.45rem);text-align:center;min-width:0}
.cop-gm-datos>div+div{border-left:1px solid rgba(255,255,255,.12)}
.cop-gm-datos i{font-style:normal;font-size:var(--fs-xs,.72rem);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-dim,#9aa3b5);white-space:nowrap}
.cop-gm-datos b{display:flex;align-items:center;justify-content:center;gap:.25em;min-height:2.2rem;font:400 var(--fs-2xl,1.5rem)/1 Anton,sans-serif;
  color:var(--text,#f4f6fb);min-width:0;white-space:nowrap}
.cop-gm-datos b small{font:inherit;font-size:.7em;color:var(--text-dim,#9aa3b5)}
.cop-gm-datos .cop-rel{width:.95em;height:.95em}
.cop-gm-band{height:1.15em;width:1.6em;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.12);flex:0 0 auto}
.cop-gm-globo{width:2.1rem;height:2.1rem;filter:drop-shadow(0 0 8px rgba(var(--cop-acento-rgb,12,149,235),.45))}
@media (max-width:359px){.cop-gm-datos b{font-size:var(--fs-xl,1.3rem)} .cop-gm-datos i{font-size:.62rem}}

.cop-gm-porque{margin:0 0 var(--gap-lg,1rem);padding:var(--gap-md,.7rem) var(--gap-lg,1rem);border-radius:var(--r-card,14px);
  background:rgba(255,255,255,.04);color:var(--text,#f4f6fb);font-size:var(--fs-md,.88rem);font-weight:600;line-height:1.4;
  border-left:3px solid rgba(160,168,185,.7)}

/* ── administrar ── */
.cop-gm-yo{padding:var(--gap-lg,1rem) 0 var(--gap-sm,.45rem);font-size:var(--fs-md,.88rem);color:var(--text-dim,#9aa3b5)}
.cop-gm-rol{font-weight:800;color:var(--text,#f4f6fb)}
.cop-gm-rol--dueno{color:#f2c94c}
.cop-gm-rol--admin{color:var(--primary,#0c95eb)}
.cop-gm-codigo{display:flex;align-items:center;gap:var(--gap-md,.7rem);margin:var(--gap-sm,.45rem) 0 var(--gap-md,.7rem);
  padding:var(--gap-md,.7rem) var(--gap-lg,1rem);border-radius:var(--r-card,14px);background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.cop-gm-codigo i{font-style:normal;font-size:var(--fs-xs,.72rem);font-weight:600;color:var(--text-dim,#9aa3b5)}
.cop-gm-codigo b{flex:1 1 auto;font:400 var(--fs-lg,1.15rem) Anton,sans-serif;letter-spacing:2px;color:var(--text,#f4f6fb)}

.cop-gm-form{display:flex;flex-direction:column;gap:var(--gap-md,.7rem)}
.cop-gm-form label,.cop-gm-campo{display:flex;flex-direction:column;gap:var(--gap-xs,.3rem);min-width:0}
.cop-gm-form i,.cop-gm-campo>i{font-style:normal;font-size:var(--fs-sm,.8rem);font-weight:600;color:var(--text-dim,#9aa3b5)}
.cop-gm-form input,.cop-gm-form textarea,.cop-gm-form select{width:100%;box-sizing:border-box;padding:var(--gap-md,.7rem) var(--gap-lg,1rem);
  border-radius:var(--r-card,14px);border:1.5px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);
  color:var(--text,#f4f6fb);font:500 var(--fs-base,1rem) Inter,sans-serif;resize:none;-webkit-appearance:none;appearance:none}
.cop-gm-form select{background-image:linear-gradient(45deg,transparent 50%,#9aa3b5 50%),linear-gradient(135deg,#9aa3b5 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
.cop-gm-form select option{background:#14171e;color:#f4f6fb}
.cop-gm-form input:focus,.cop-gm-form textarea:focus,.cop-gm-form select:focus{outline:none;border-color:var(--primary,#0c95eb)}
.cop-gm-form input:disabled{opacity:.55}
.cop-gm-dos{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-md,.7rem)}
.cop-gm-form .cop-chips{display:flex;flex-wrap:wrap;gap:var(--gap-sm,.45rem);margin:0;padding:0;overflow:visible}
.cop-gm-msg{margin:0;min-height:1.2em;font-size:var(--fs-sm,.8rem);font-weight:600;color:#ff6b6b}
.cop-gm-msg.bien{color:#3ddc84}
.cop-gm-guardar{width:100%}

.cop-gm-miembros{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cop-gm-miembros li{display:flex;align-items:center;gap:var(--gap-md,.7rem);padding:var(--gap-md,.7rem) 0;
  border-bottom:1px solid rgba(255,255,255,.06);min-width:0;flex-wrap:wrap}
.cop-gm-m-kit{flex:0 0 auto;width:40px;height:40px}
.cop-gm-m-kit img{width:100%;height:100%;object-fit:contain}
.cop-gm-m-nom{flex:1 1 8rem;min-width:0;display:flex;flex-direction:column;gap:2px}
.cop-gm-m-nom b{font-size:var(--fs-base,1rem);color:var(--text,#f4f6fb);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cop-gm-m-nom em{font-style:normal;font-size:var(--fs-xs,.72rem);font-weight:700;color:var(--primary,#0c95eb)}
.cop-gm-m-nom small{font-size:var(--fs-sm,.8rem);color:var(--text-dim,#9aa3b5)}
.cop-gm-m-acc{display:flex;gap:var(--gap-sm,.45rem);margin-left:auto}
.cop-b.confirmar.confirmar.cop-borde.cop-borde{--borde-rgb:255,90,90;color:#ff8a8a}

.cop-gm-texto{margin:0 0 var(--gap-md,.7rem);color:var(--text-dim,#9aa3b5);font-size:var(--fs-md,.88rem);line-height:1.5}
.cop-gm-lista{margin:0 0 var(--gap-md,.7rem);padding-left:1.1rem;color:var(--text-dim,#9aa3b5);font-size:var(--fs-md,.88rem);line-height:1.5}
.cop-gm-lista li+li{margin-top:var(--gap-xs,.3rem)}
.cop-gm-salir{width:100%;margin-top:var(--gap-2xl,1.8rem)}
.cop-b.cop-gm-salir.cop-gm-salir.cop-borde.cop-borde{--borde-rgb:255,90,90;color:#ff8a8a}
.cop-gm-salir-nota{margin:var(--gap-sm,.45rem) 0 0;text-align:center;font-size:var(--fs-xs,.72rem);color:var(--text-dim,#9aa3b5)}
.cop-gm-salir-nota:empty{display:none}