/* css/screens/coach/index.css */
/* #coachHost es position:fixed;inset:0 (ver layout.css), así que .co-wrap arranca
     pegado al borde físico de la pantalla — a diferencia de .topbar (header del
     cliente), que sí suma env(safe-area-inset-top). Sin ese mismo margen acá, el
     logo y "Salir" quedan tapados por el notch/status bar del celular. */
.co-wrap { max-width:1340px; margin:0 auto; padding:calc(22px + env(safe-area-inset-top)) 20px calc(60px + env(safe-area-inset-bottom)); }

@media (min-width: 900px){
    .co-grid { display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:start; }
    .co-col { min-width: 0; }
    .co-title { font-size:26px; }
    .co-client-name { font-size:30px; }
    .co-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
  }

.co-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:16px; }

/* Título del panel: mismo isotipo+wordmark que el header del cliente (.brand/.brand-ic/
     .wordmark, ver topbar) en vez de un título de texto aparte — así "GIZE" es siempre
     el mismo logo en toda la app. El sufijo "Panel de coach" va en la tipografía normal
     (no Orbitron, que es la fuente pesada/técnica reservada al wordmark) y en un tono más
     apagado, para que se lea como una aclaración de contexto y no compita con la marca. */
.co-brand { display:flex; align-items:center; gap:11px; flex-wrap:wrap; }

.co-brand-dash { color:var(--txt-3); font-size:20px; font-weight:300; }

.co-brand-tag { font-size:var(--text-emphasis); font-weight:600; color:var(--txt-2); }

.co-logout, .co-back { display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--border); color:var(--txt-2); font-size: var(--text-meta); padding:7px 12px; border-radius:4px; cursor:pointer; }

.co-back svg { width:var(--icon-sm); height:var(--icon-sm); flex-shrink:0; }

.co-head-actions { display:flex; align-items:center; gap:8px; }

/* Botón de tuerca (abre el panel de configuración del coach): mismo tratamiento visual
     que .co-logout/.co-back (cuadrado, borde, sin relleno) pero solo-ícono. */
.co-gear { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0; background:none; border:1px solid var(--border); color:var(--txt-2); border-radius:4px; cursor:pointer; }

.co-gear svg { width:var(--icon-md); height:var(--icon-md); }

.co-gear:active { color:var(--txt); }

.co-invite { background:var(--card); border:1px solid var(--border); border-radius:4px; padding:14px; text-align:center; font-size: var(--text-meta); color:var(--txt-2); margin-bottom:14px; }

.co-code { display:inline-block; font-family:var(--font-mono); font-size:22px; font-weight:800; color:var(--blue); letter-spacing:3px; margin-top:6px; }

.co-invite-sub { font-size:11px; color:var(--txt-3); margin-top:8px; }

.co-item { display:flex; align-items:center; justify-content:space-between; background:var(--card); border:1px solid var(--border); border-radius:4px; padding:15px 14px; margin-bottom:8px; cursor:pointer; }

/* Estado vacío de "Clientes" cuando el coach todavía no vinculó a nadie: antes era una
     sola línea de .cal-hint y dejaba el resto de la pantalla en negro sin nada — parecía
     rota, no "aire" premium. Ahora es un mini-onboarding de 3 pasos que usa la clase
     .co-item TAL CUAL (no una reimplementación): mismo fondo/borde/radio/padding, y de
     yapa hereda gratis el fondo de marca que ya tienen las cards reales de
     cliente, vía la familia :is(...) de arriba. Solo se le saca el cursor de click (estos
     pasos no son filas navegables) y se le pone una numeración circular en vez de la
     flecha/nombre de un cliente real. */
.co-onboard-lead { font-size:var(--text-body); color:var(--txt); font-weight:700; text-align:center; margin-bottom:14px; }

.co-onboard-step { cursor:default; justify-content:flex-start; gap:12px; }

.co-onboard-n { flex-shrink:0; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--gize-blue) 14%, transparent); border:1px solid color-mix(in srgb, var(--gize-blue) 35%, transparent); color:var(--blue-2);
    font-weight:800; font-size:var(--text-meta); font-family:var(--font-mono); }

.co-onboard-txt { font-size:var(--text-body); color:var(--txt-2); line-height:1.4; }

.co-onboard-txt b { color:var(--txt); font-weight:700; }

.co-item:active { background:var(--card-2); }

.co-name { font-size: var(--text-emphasis); color:var(--txt); font-weight:600; }

.co-arrow { color:var(--txt-3); font-size:20px; }

.co-client-name { font-size:22px; font-weight:800; color:var(--txt); margin-bottom:4px; }

.co-list { margin-top:10px; }

.co-row { display:flex; justify-content:space-between; align-items:center; padding:11px 14px; background:var(--card); border:1px solid var(--border); border-radius:4px; margin-bottom:6px; font-size: var(--text-body); color:var(--txt); }

.co-val { font-weight:700; font-variant-numeric:tabular-nums; font-family:var(--font-mono); }

.co-bottom { display:block; margin-top:26px; }

.co-tabs { display:flex; gap:8px; margin:4px 0 14px; }

.co-tab { flex:1; padding:10px 12px; background:var(--card-2); border:1px solid var(--border); border-radius:5px; color:var(--txt-2); font-size: var(--text-meta); font-weight:700; cursor:pointer; }

/* Color semántico del conteo, desacoplado de si la tab está seleccionada: gris/neutro
     cuando no hay datos (0), verde de marca cuando sí hay — así el número comunica algo
     por sí solo aunque no estés parado en esa tab. En estado .on el fondo ya es verde
     sólido, así que el número pasa a blanco (igual que el resto de la etiqueta) en vez
     de competir con ese fondo — la selección se sigue leyendo por el fill, no por el número. */
.co-tab-count { color:var(--txt-3); font-weight:700; }

.co-search { width:100%; background:var(--card-2); border:1px solid var(--border); border-radius:5px; padding:8px 12px; color:var(--txt); font-size: var(--text-meta); margin-bottom:10px; }

.co-item-meta { font-size:11px; color:var(--txt-3); margin-top:3px; }

.tpl-item .co-name { font-weight:700; }

/* Lista de clientes como tabla (nombre+avatar / email / última actividad / acciones), a
     pedido — ver boceto compartido. En mobile no hay ancho para 4 columnas reales, así
     que cada fila se apila como card (igual criterio que .co-item de siempre: bloque
     ancho, sin grid) y la flecha de "abrir" queda flotando en la esquina; recién a partir
     de 900px (mismo breakpoint que .co-items) pasa a grid de 4 columnas. En ese punto
     .co-table pasa a ser UN solo panel con borde (no cada fila con su propio borde+radio+
     margen, que quedaba viéndose como tarjetitas sueltas con huecos en vez de tabla): las
     filas se separan con un divisor fino y el hover marca la fila entera, como cualquier
     tabla de un dashboard. */
.co-table { margin-top:2px; }

.co-trow { position:relative; display:block; background:var(--card); border:1px solid var(--border); border-radius:4px; padding:13px 46px 13px 14px; margin-bottom:8px; cursor:pointer; transition:var(--transition-tap); }

.co-trow.co-thead { display:none; cursor:default; }

.co-trow:active { background:var(--card-2); }

.co-td-name { display:flex; align-items:center; gap:10px; margin-bottom:6px; }

.co-avatar { flex-shrink:0; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--gize-text); font-family:var(--font-mono);
    background:var(--gize-surface-2); border:1px solid var(--gize-border); } /* neutro: el color marca estado, no identidad */

/* Ficha del cliente: foto (o iniciales) al lado del nombre. Dos clases para ganarle al .co-avatar de 32px. */
.co-client-head { display:flex; align-items:center; gap:14px; margin-bottom:4px; }
.co-client-head .co-client-name { margin-bottom:0; min-width:0; overflow-wrap:anywhere; }
.co-avatar.co-avatar-client { width:64px; height:64px; font-size:20px; }

.co-cname { font-size:var(--text-emphasis); color:var(--txt); font-weight:600; }

.co-td-email { font-size:var(--text-meta); color:var(--txt-2); margin:0 0 4px 42px; }

.co-td-email.co-empty { color:var(--txt-3); }

.co-td-activity { margin-left:42px; }

.co-act-date { font-size:var(--text-meta); color:var(--txt-2); }

.co-act-status { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--txt-3); margin-top:2px; }

.co-dot { width:7px; height:7px; border-radius:50%; background:var(--txt-3); flex-shrink:0; }

.co-dot.on { background:var(--blue); box-shadow:0 0 6px var(--glow); }

.co-td-actions { position:absolute; top:50%; right:14px; transform:translateY(-50%); }

@media (min-width: 900px){
    .co-search { max-width:280px; }
    .co-table { background:var(--card); border:1px solid var(--border); border-radius:6px; overflow:hidden; }
    .co-trow.co-thead { display:grid; background:var(--card-2); }
    .co-trow { display:grid; grid-template-columns: 2.2fr 2fr 1.6fr 60px; align-items:center; column-gap:16px; padding:13px 16px;
        background:none; border:none; border-radius:0; margin:0; border-bottom:1px solid var(--border); }
    .co-trow:last-child { border-bottom:none; }
    .co-trow:not(.co-thead):hover { background:var(--card-2); }
    .co-th { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--txt-3); }
    .co-td-name, .co-td-email, .co-td-activity { margin:0; }
    .co-td-actions { position:static; transform:none; display:flex; justify-content:flex-end; }
    .co-td-actions .co-arrow { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; transition:var(--transition-tap); }
    .co-trow:hover .co-td-actions .co-arrow { background:var(--card); color:var(--txt); }
  }