/* Grupos Padel · la cuenta (mod-cuenta.js) y las franjas del núcleo. Prefijo cu-. */

/* Las franjas fijas de arriba: la demo pública (?demo, spec §0.0.1), «entrar como» (soporte) y el
   club en modo consulta. Van fuera de #app. La barra, el lado y los menús bajan lo que la franja
   ocupa: app.js mide su alto en --cu-franja-h (en el móvil puede ocupar dos líneas). */
:root { --cu-franja-h: 0px; }
body.cu-con-franja { --cu-franja-h: 34px; }
.cu-franja { position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px;
  min-height: 34px; padding: 6px var(--edge); text-align: center;
  background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--bg); border-bottom: 1px solid rgba(245, 165, 36, 0.35);
  color: var(--warn); font-size: 13px; font-weight: 500; line-height: 1.35; }
.cu-franja__texto { min-width: 0; }
.cu-franja a { flex: none; color: var(--ink); font-weight: 600; white-space: nowrap; }
.cu-franja__boton { flex: none; padding: 3px 10px; border-radius: 8px; border: 1px solid rgba(245, 165, 36, 0.55); background: transparent;
  color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cu-franja__boton:hover { background: rgba(245, 165, 36, 0.12); }
.cu-franja__boton[disabled] { opacity: .55; cursor: wait; }
body.cu-con-franja .barra { top: var(--cu-franja-h); }
body.cu-con-franja .lado { top: calc(var(--barra-h) + var(--cu-franja-h)); height: calc(100vh - var(--barra-h) - var(--cu-franja-h)); }
body.cu-con-franja .menu-usuario { top: calc(var(--barra-h) + var(--cu-franja-h) - 4px); }
body.cu-con-franja .menu-club { top: calc(var(--barra-h) + var(--cu-franja-h) - 4px); }

/* El menú del avatar: los perfiles de la cuenta (yo y mis hijos). */
.cu-menu-tit { padding: 4px 10px 2px; margin: 0; }
.menu-usuario .cu-menu-perfil { display: flex; align-items: center; gap: 10px; }
.cu-menu-perfil .avatar { width: 28px; height: 28px; font-size: 11px; flex: none; }
.cu-menu-perfil__que { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cu-menu-perfil__que b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-menu-perfil__que small { color: var(--muted); font-size: 12px; }
.menu-usuario .cu-menu-perfil[aria-checked="true"] { box-shadow: inset 2px 0 0 var(--accent); background: var(--panel-2); }

/* Las pantallas de la cuenta. */
.cu-suelta { width: min(520px, 100%); }
.cu-casilla { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.cu-casilla input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.cu-aviso { border-color: rgba(245, 165, 36, 0.45); color: var(--ink-2); margin-bottom: 16px; }
p.cu-aviso { border: 1px solid rgba(245, 165, 36, 0.45); border-radius: 12px; padding: 12px 14px; background: var(--warn-soft); }
.cu-perfiles li { flex-wrap: wrap; }
.cu-perfiles .avatar { flex: none; }
.cu-perfiles .lista__que { min-width: 0; }
.cu-docs a { color: var(--ink); }