/* css/ui/invitacion-coach.css
   La hoja «Entrená con …» (app/ui/invitacion-coach.js, #coachInvHost): la invitación de un coach que
   llegó por su link. Es la hoja de abajo de siempre (.sheet de components.css, opaca en cada
   apariencia con lo de sus archivos), encima de todo (también de la bienvenida y del panel), como la
   del socio del gimnasio. Sin sombras ni animaciones propias: en GIZE básico queda igual, plana. */
#coachInvHost .sheet-bg { z-index:640; }
#coachInvHost .sheet { z-index:641; }
/* Con la hoja abierta, la pantalla de atrás queda quieta (como con #sheetHost). */
html:has(#coachInvHost .sheet:not(.closing)), html:has(#coachInvHost .sheet:not(.closing)) body { overflow:hidden; }

.cinv-sheet .sheet-title { margin-bottom:10px; overflow-wrap:anywhere; line-height:1.3; text-align:center; }
.cinv-sheet .sheet-title:focus { outline:none; }
.cinv-p { margin:8px 2px 16px; font-size:var(--text-body); color:var(--txt); line-height:1.45; text-align:center; overflow-wrap:anywhere; }
.cinv-err { margin:0 0 14px; }
.cinv-sheet .ctrl:disabled { opacity:.5; cursor:default; }

/* La foto del coach (o sus iniciales), arriba y al centro. */
.cinv-cara { display:flex; justify-content:center; margin:2px 0 12px; }
.cinv-foto { display:flex; align-items:center; justify-content:center; width:76px; height:76px; border-radius:50%; overflow:hidden; flex:none;
  background:var(--card-2); border:1px solid var(--border); color:var(--txt); font-size:26px; font-weight:700; }
.cinv-foto img { width:100%; height:100%; object-fit:cover; display:block; }