/* Grupos Padel web · «Equipo» (mod-club.js), «Clubes y suscripciones» (mod-idc.js) y el acceso
   de un profe en su ficha (mod-grupos.js). Prefijo cl-. Sólo tokens de idc.css.
   Ley del color: azul = lo que se busca primero · verde = funciona, confirmado · ámbar = pendiente,
   atención, sólo consulta. Nada más. */

/* ---------------------------------------------------------------- piezas comunes */
.cl-cab { margin-bottom: 6px; align-items: center; }
.cl-sub { margin: 0 0 10px; }
.cl-correo { overflow-wrap: anywhere; }
.cl-meta { display: block; font-size: 12.5px; color: var(--muted-2); margin-top: 2px; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.cl-error p { margin: 0 0 10px; }
.cl-2fa { max-width: 60ch; }
.cl-ayuda { margin: -6px 0 0; }
.cl-falta { color: var(--warn); font-size: 13.5px; margin: 0; }
.cl-falta:empty { display: none; }
.cl-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 6px; }
.cl-fieldset legend { font-size: 13px; color: var(--muted); font-weight: 500; margin-bottom: 6px; padding: 0; }
.cl-opcion:has(input:disabled) { opacity: 0.75; cursor: default; }

/* los paneles laterales (abrirDetalle) */
.cl-detalle__h { margin: 4px 0 6px; padding-right: 40px; overflow-wrap: anywhere; }
.cl-detalle__p { margin: 0 0 14px; }

/* ---------------------------------------------------------------- «Equipo» */
.cl-rejilla { align-items: start; }
.cl-buscador { margin: 4px 0 10px; }
.cl-filtro { margin-bottom: 4px; }
.cl-filtro .dia-btn { display: inline-flex; gap: 6px; align-items: baseline; }
.cl-persona .lista__que b { overflow-wrap: anywhere; }
.cl-persona .cl-correo { display: block; }
/* una invitación: el correo entero arriba (la columna es estrecha) y el estado y «Anular» debajo */
.cl-inv { flex-wrap: wrap; gap: 8px 10px; }
.cl-inv > .lista__que { flex: 1 1 100%; }
.cl-inv .lista__que b { font-weight: 600; }
.cl-ficha { display: grid; gap: 8px; }
.cl-ficha .cl-ayuda { margin: 0; }
.cl-recientes { margin-top: 12px; }
.cl-recientes summary { cursor: pointer; color: var(--muted); font-size: 13.5px; padding: 6px 0; }
.cl-recientes summary:hover { color: var(--ink); }
.cl-recientes .lista { opacity: 0.85; }

/* ---------------------------------------------------------------- el acceso de un profe (su ficha) */
.cl-acceso { margin-top: 16px; }
.cl-acceso__que { margin: 6px 0 10px; color: var(--ink-2); }
.cl-acceso__que .chip { margin-right: 6px; vertical-align: 1px; }
.cl-acceso__mas { margin: 0; }
.cl-acceso .acciones { margin-top: 4px; }

/* ---------------------------------------------------------------- «Clubes y suscripciones» */
.cl-clubes { padding: 2px 18px; }
.cl-club { flex-wrap: wrap; align-items: flex-start; }
.cl-club > .lista__que { flex: 1 1 280px; }
.cl-club__siglas { background: var(--accent-soft); color: var(--ink); border: 1px solid rgba(79, 140, 255, 0.4); }
.cl-club__estado { flex: none; padding-top: 2px; }
.cl-club__acciones { flex: none; }
.cl-modulos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cl-enlace { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.cl-enlace input { font-family: var(--f-mono); font-size: 13px; }
.cl-vc { margin-top: 14px; }
.cl-vc__lista .lista__que b { overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .cl-chips { justify-content: flex-start; }
  .cl-clubes { padding: 2px 14px; }
  .cl-enlace { grid-template-columns: 1fr; }
}