/* css/screens/coach/shared.css */
.co-grid { display:block; }

.co-title { font-family:var(--gize-font); font-size:20px; font-weight:800; color:var(--txt); }

/* .co-copy-btn.co-invite-copy (dos clases) a propósito: .co-copy-btn se define más
     abajo en la hoja con display:inline-flex y misma especificidad que un .co-invite-copy
     solo — perdería el empate por orden. Con las dos clases juntas gana seguro. */
.co-copy-btn.co-invite-copy { display:flex; width:fit-content; margin:10px auto 0; }

.co-sec { font-size: var(--text-meta); color:var(--txt-2); font-weight:600; margin:22px 2px 10px; }

.co-prog { margin-top:12px; padding:12px 14px; background:var(--card-2); border:1px solid var(--border); border-radius:4px; font-size: var(--text-body); font-weight:700; color:var(--blue-2); text-align:center; }

.co-set { font-size: var(--text-body); font-weight:600; color:var(--txt); background:var(--card-2); border:1px solid var(--border); border-radius:4px; padding:5px 9px; font-variant-numeric:tabular-nums; font-family:var(--font-mono); }

.co-rt-row { display:flex; flex-direction:column; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:4px; padding:10px; margin-bottom:8px; }

.co-rt-name { background:var(--card-2); border:1px solid var(--border); border-radius:4px; padding:11px 12px; color:var(--txt); font-size: var(--text-body); width:100%; }

.co-rt-ctl { display:flex; align-items:center; justify-content:space-between; }

.co-rt-sets { display:flex; align-items:center; gap:10px; }

.co-rt-sets button { width:30px; height:30px; border-radius:4px; background:var(--card-2); border:1px solid var(--border); color:var(--txt); font-size:16px; cursor:pointer; }

.co-rt-sets span { font-size: var(--text-meta); color:var(--txt-2); min-width:64px; text-align:center; }

.co-rt-del { background:none; border:none; color:var(--txt-3); font-size:16px; cursor:pointer; padding:4px 8px; }

.co-save-rt { display:block; width:100%; margin-top:14px; background:var(--blue); color:var(--gize-text); border:none; font-size: var(--text-emphasis); font-weight:700; padding:14px; border-radius:4px; cursor:pointer; }

.co-add-day { display:block; margin-top:10px; background:none; border:1px dashed var(--border); color:var(--blue-2); padding:10px 14px; border-radius:4px; cursor:pointer; }

.co-panel { min-width:0; margin-bottom:20px; }

.co-tbl { width:100%; border-collapse:collapse; margin-top:8px; font-variant-numeric:tabular-nums; }

.co-tbl th { text-align:left; font-size:10px; color:var(--txt-3); text-transform:uppercase; letter-spacing:.06em; font-weight:700; padding:6px 8px; border-bottom:1px solid var(--border); white-space:nowrap; }

.co-tbl td { font-size:12.5px; color:var(--txt); font-family:var(--font-mono); padding:7px 8px; border-bottom:1px solid var(--gize-border); white-space:nowrap; }

.co-tbl tr:last-child td { border-bottom:none; }

.co-tbl td.em { color:var(--txt-3); }

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

.ci-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-bottom:10px; }

.ci-f { margin-bottom:10px; }

.ci-f label { display:block; font-size:10px; color:var(--txt-3); text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:5px; }

/* Ficha del cliente: cards agrupadas por tema (Datos personales / Contexto de
     entrenamiento / Objetivos), cada una con ícono + título — ver renderCoachInfo(). */
.ci-card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:16px; margin-bottom:16px; }

.ci-card-head { display:flex; align-items:center; gap:8px; margin-bottom:14px; }

.ci-card-head svg { width:var(--icon-md); height:var(--icon-md); color:var(--blue-2); flex-shrink:0; }

.ci-card-head span { font-size: var(--text-meta); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--txt-2); }

.ci-grid-2, .ci-grid-3, .ci-grid-4 { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:0; }

.ci-grid-2 .ci-f, .ci-grid-3 .ci-f, .ci-grid-4 .ci-f { margin-bottom:0; }

@media (min-width: 640px){
    .ci-grid-3 { grid-template-columns:repeat(3,1fr); }
    .ci-grid-4 { grid-template-columns:repeat(4,1fr); }
  }

select.co-select { cursor:pointer; }

.co-copy-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; background:transparent; border:1px solid var(--border); border-radius:5px; color:var(--txt-3); font-size: var(--text-meta); font-weight:600; cursor:pointer; letter-spacing:.01em; }

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

.co-copy-btn:hover { border-color:var(--green); color:var(--green); background:var(--card-2); }

.co-pin2 { width:100%; background:var(--card-2); border:1px solid var(--border); border-radius:4px; padding:10px; color:var(--txt); font-size: var(--text-emphasis); text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }

.co-note { width:100%; margin-top:8px; background:var(--card-2); border:1px solid var(--border); border-radius:4px; padding:9px 10px; color:var(--txt); font-size: var(--text-meta); }

/* Panel de configuración del coach (ícono de tuerca): .cs-* es solo el contenido interno
     del modal — el modal en sí (.cp-bg/.cp-ccard/.cp-head/.cp-title/.cp-x) y la lista de
     opciones (.cp-clist/.cp-copt) ya existen y se reusan tal cual. */
.cs-avatar-row { display:flex; align-items:center; gap:14px; margin-bottom:18px; }

/* .co-avatar.cs-avatar-big (dos clases) a propósito: .co-avatar se define en index.css,
     que carga DESPUÉS de este archivo — con la misma especificidad que un .cs-avatar-big
     solo, ese orden de carga le haría ganar al .co-avatar de 32px de la tabla de clientes
     (mismo motivo que el comentario de .co-copy-btn.co-invite-copy más arriba). */
.co-avatar.cs-avatar-big { width:56px; height:56px; font-size:18px; flex-shrink:0; }

.cs-avatar-col { flex:1; min-width:0; }

/* "Cambiar foto" deshabilitado a propósito (no hay todavía dónde guardar la foto en
     Supabase): mismo .cp-copt de siempre pero sin el hover verde ni el cursor de link,
     para que se lea como "todavía no" y no como una opción rota. */
.cp-copt:disabled { opacity:.5; cursor:not-allowed; }

.cp-copt:disabled:hover { border-color:var(--border); color:var(--txt); }

.cs-hint { font-size:11px; color:var(--txt-3); margin-top:6px; }

.cs-field { margin-bottom:6px; }

.cs-field label { display:block; font-size:10px; color:var(--txt-3); text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:5px; }

/* ---- Escritorio: layout del panel del coach ---- */
@media (min-width: 1000px){
    .co-bottom { display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:start; }
    .co-bottom .co-panel { min-width:0; margin-bottom:0; }
  }

/* ===== Editor de preguntas para los clientes (app/screens/coach/preguntas.js) ===== */
.cs-q-btn { width:100%; text-align:left; }
.cp-ccard.cq-card { width:min(620px, 94vw); }
.cq-back { background:none; border:0; color:var(--txt-2); font-size:22px; line-height:1; cursor:pointer; padding:0 8px 0 0; }
.cq-tabs { display:flex; gap:6px; margin:4px 0 10px; }
.cq-tab { flex:1; padding:9px 10px; border-radius:10px; border:1px solid var(--gize-border); background:transparent;
    color:var(--txt-2); font:600 var(--text-body) var(--gize-font); cursor:pointer; }
.cq-tab.on { border-color:var(--gize-blue); color:var(--gize-text); background:color-mix(in srgb, var(--gize-blue) 14%, transparent); }
.cq-hint { font-size:var(--text-meta); color:var(--txt-3); margin-bottom:12px; line-height:1.45; }
.cq-warn { font-size:var(--text-meta); color:var(--gize-warning); background:var(--gize-warning-bg); border:1px solid color-mix(in srgb, var(--gize-warning) 35%, transparent);
    border-radius:8px; padding:9px 11px; margin-bottom:12px; line-height:1.45; }
.cq-item { background:var(--gize-surface-2); border:1px solid var(--gize-border); border-radius:10px; padding:10px; margin-bottom:8px; }
.cq-top { display:flex; gap:8px; align-items:flex-start; }
.cq-n { flex-shrink:0; width:22px; height:22px; margin-top:8px; border-radius:6px; border:1px solid var(--gize-border);
    font:600 11px var(--font-mono); color:var(--txt-2); display:flex; align-items:center; justify-content:center; }
.cq-label { flex:1; min-width:0; resize:vertical; font-family:var(--gize-font); line-height:1.4; }
.cq-row { display:flex; gap:6px; align-items:center; margin:8px 0 0 30px; }
.cq-type { flex:1; min-width:0; }
.cq-btn { flex-shrink:0; width:34px; height:34px; border-radius:8px; border:1px solid var(--gize-border); background:transparent;
    color:var(--txt-2); cursor:pointer; font-size:14px; }
.cq-btn:disabled { opacity:.35; cursor:default; }
.cq-btn.del:hover { color:var(--gize-danger); border-color:color-mix(in srgb, var(--gize-danger) 45%, transparent); }
.cq-opts { display:block; width:calc(100% - 30px); margin:8px 0 0 30px; }
.cq-add { width:100%; margin-top:4px; }
.cq-reset { margin-top:8px; }
/* Encabezados del registro diario: ahora son los textos de las preguntas del coach. */
.co-tbl th { max-width:140px; white-space:normal; line-height:1.25; vertical-align:bottom; }

/* Títulos de "Seguimiento diario" / "Check-in semanal" con la ruedita del editor. */
.co-sec-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.co-sec-gear { width:32px; height:32px; border-radius:8px; border:1px solid var(--btn-line, var(--gize-border)); background:transparent;
    color:var(--txt-2); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.co-sec-gear svg { width:16px; height:16px; }
.co-sec-gear:hover { color:var(--gize-text); border-color:var(--gize-blue); }
/* Selector de día / semana / entreno de la ficha del cliente. Select propio (sin el
   aspecto del sistema): Outfit, pastilla con borde de marca y flecha dibujada. */
.co-pick { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.co-pick span { font-size:var(--text-meta); color:var(--txt-3); font-weight:600; letter-spacing:.02em; flex-shrink:0; min-width:52px; }
.co-select { -webkit-appearance:none; appearance:none; min-width:0; width:min(320px, 100%);
    font:600 var(--text-body) var(--gize-font); color:var(--gize-text); letter-spacing:.01em;
    background:var(--gize-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238F98A6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    border:1px solid rgba(255,255,255,.14); border-radius:var(--gize-radius-pill); padding:10px 40px 10px 16px; cursor:pointer;
    transition:border-color .15s, box-shadow .15s; }
.co-select:hover { border-color:rgba(255,255,255,.28); }
.co-select:focus-visible { outline:none; border-color:var(--gize-blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--gize-blue) 18%, transparent); }
.co-select option { background:var(--gize-surface); color:var(--gize-text); }

/* Gráfico a la izquierda y registros a la derecha (promedio semanal y peso diario).
   La lista tiene su propio scroll para no estirar la sección; en celular van apiladas. */
.co-split { display:grid; gap:16px; align-items:start; }
.co-split-side { max-height:340px; overflow-y:auto; border:1px solid var(--gize-border); border-radius:10px; padding:0 10px 6px; background:var(--gize-surface); }
.co-split-side .co-tbl { margin-top:0; }
.co-split-side .co-tbl th { position:sticky; top:0; background:var(--gize-surface); z-index:1; padding-top:10px; }
@media (min-width: 900px){
  .co-split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .co-split .w-chart { margin-bottom:0; }
}

/* --- Notificación al cliente (app/screens/coach/notificar.js) --- */
.nt-panel .nt-text { font-family:var(--gize-font); min-height:84px; resize:vertical; font-size:var(--text-body); line-height:1.4; }
.nt-status { font-size:var(--text-meta); color:var(--gize-text-2); line-height:1.45; display:flex; gap:8px; align-items:flex-start; }
.nt-status.ok { color:var(--gize-text); }
.nt-status.warn { color:var(--gize-warning); }
.nt-dot { flex-shrink:0; width:8px; height:8px; margin-top:5px; border-radius:50%; background:var(--gize-success);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--gize-success) 60%, transparent); animation:nt-live 1.8s ease-out infinite; }
@keyframes nt-live { to { box-shadow:0 0 0 8px transparent; } }
.nt-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; }
.nt-count { font:500 var(--text-meta) var(--gize-font-data); color:var(--gize-text-2); }
.nt-send { background:var(--gize-blue); color:#fff; border:0; border-radius:999px; padding:11px 22px; font:700 var(--text-body) var(--gize-font); cursor:pointer; }
.nt-send:disabled { opacity:.5; cursor:default; }
.nt-send:not(:disabled):hover { filter:brightness(1.1); }
.nt-hist { margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.nt-list { max-width:580px; display:flex; flex-direction:column; gap:8px; position:relative; overflow-y:auto; overscroll-behavior:contain; }
.nt-list.scrolls { padding-right:6px; scrollbar-width:thin; scrollbar-color:var(--gize-border) transparent; }
.nt-hist-t { font-size:var(--text-meta); color:var(--gize-text-2); font-weight:600; }
.nt-msg { background:var(--gize-surface-2); border:1px solid var(--gize-border); border-radius:12px 12px 12px 4px; padding:9px 12px; max-width:560px; }
.nt-msg-body { color:var(--gize-text); font-size:var(--text-body); white-space:pre-wrap; overflow-wrap:anywhere; }
.nt-msg-meta { margin-top:4px; font-size:11px; color:var(--gize-text-2); }
.nt-msg-meta .ok { color:var(--gize-success); }
.nt-msg-meta .warn { color:var(--gize-warning); }
@media (prefers-reduced-motion: reduce) { .nt-dot { animation:none; } }