/* ─────────────────────────────────────────────────
   coach.css — App Maestra (panel de coach, Fase 1)
   Reusa los tokens de css/styles.css (colores, tipografía), pero styles.css asume el
   "shell" de una app móvil de una sola pantalla (body con overflow:hidden/height:100vh/
   flex y user-select:none en todo). Este panel es de escritorio, con contenido que puede
   crecer y texto que el coach necesita poder seleccionar — se resetea acá, con más
   especificidad que styles.css, en vez de tocar ese archivo (lo usa toda la app móvil).
   ───────────────────────────────────────────────── */

/* Variables de diseño de la App Maestra (REGLAS_DISENO_APP_MAESTRA.md, sección 3). coach.css solo lo carga
   coach.html, así que no afectan a la app del cliente. B5-1 las usa en la barra superior y la franja de filtros;
   el resto de la pantalla las irá adoptando en B5-2 a B5-4. */
:root {
  /* Fondos */
  --gf-bg: #070A0D;
  --gf-surface: #0B1015;
  --gf-surface-2: #10161D;
  --gf-surface-selected: #11170A;
  /* Bordes y separadores */
  --gf-border: #293541;
  --gf-border-button: #34414D;
  --gf-divider: #26313B;
  /* Acento */
  --gf-accent: #CCFF00;
  --gf-accent-text: #0B1015;
  /* Estados */
  --gf-urgent: #FF4557;
  --gf-attention: #FFB020;
  --gf-pending: #359BFF;
  --gf-on-track: #32C779;
  /* Texto e íconos */
  --gf-text: #F1F5F9;
  --gf-text-muted: #B3BFCC;
  --gf-icon: #CBD5DF;
  --gf-placeholder: #465463;
  /* Macros (solo en el gráfico de la Dieta) */
  --gf-macro-protein: #48A7FF;
  --gf-macro-carbs: #CCFF00;
  --gf-macro-fat: #FFB020;
  /* Tipografía */
  --gf-font-display: "Barlow Condensed", sans-serif;
  --gf-font-ui: "Inter", sans-serif;
  --gf-text-min: 13px;
  --gf-text-body: 14px;
  --gf-text-title: 15px;
  --gf-text-client: 26px;
  --gf-text-brand: 30px;
  --gf-text-metric: 30px;
  /* Espaciado y bordes */
  --gf-gap-xs: 4px;
  --gf-gap-sm: 8px;
  --gf-gap-md: 12px;
  --gf-gap-lg: 16px;
  --gf-radius: 7px;
  --gf-radius-btn: 5px;
  --gf-border-width: 1px;
  /* Medidas de la barra superior y de la franja de filtros (de la sección 5 y 6) */
  --gf-topbar-h: 60px;
  --gf-topbar-pad-x: 24px;
  --gf-search-w: 458px;
  --gf-search-h: 42px;
  --gf-pill-h: 32px;
  --gf-pill-gap: 10px;
}

body {
  overflow: auto;
  height: auto;
  min-height: 100vh;
  width: auto;
  display: block;
}

.coach-app, .coach-app * {
  user-select: text;
}

/* ─── Guard de acceso ─── */
.coach-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.coach-gate-msg {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ─── Estructura general ─── */
.coach-topbar {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 var(--gf-topbar-pad-x);
  height: var(--gf-topbar-h);
  background: var(--gf-bg);
  border-bottom: var(--gf-border-width) solid var(--gf-border);
}
.coach-topbar-title {
  font-family: var(--gf-font-display);
  font-weight: 900;
  font-style: italic;
  font-size: var(--gf-text-brand);
  letter-spacing: 1px;
  color: var(--gf-accent);
}
.coach-topbar .coach-link-volver { margin-left: auto; white-space: nowrap; }
.coach-link-volver {
  color: var(--gf-text-muted);
  font-size: var(--gf-text-title);
  text-decoration: none;
}
.coach-link-volver:hover {
  color: var(--gf-text);
}

.coach-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 32px 64px;
}

.coach-section {
  margin-top: 32px;
}
.coach-section-title {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #666;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ─── Franja de indicadores (chips chicos) ─── */
.coach-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.coach-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  background: var(--bg-card);
  border: 1px solid #222;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.coach-chip-n {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: var(--color-acento);
}
.coach-chip.estado-urgente  { border-color: rgba(255, 90, 90, 0.5); }
.coach-chip.estado-urgente .coach-chip-n  { color: #ff5a5a; }
.coach-chip.estado-atencion { border-color: rgba(255, 159, 67, 0.5); }
.coach-chip.estado-atencion .coach-chip-n { color: #ff9f43; }
.coach-chip.estado-porarmar { border-color: rgba(90, 169, 255, 0.5); }
.coach-chip.estado-porarmar .coach-chip-n { color: #5aa9ff; }
.coach-chip.estado-aldia    { border-color: rgba(127, 224, 127, 0.5); }
.coach-chip.estado-aldia .coach-chip-n    { color: #7fe07f; }

/* ─── Pestañas (App Maestra — Biblioteca de Programas) ─── */
.coach-tabs {
  display: flex;
  align-self: stretch;
  gap: 24px;
}
/* Pestañas principales: Inter 400 de 15 px, sin mayúsculas. Activa: texto, ícono y línea inferior de 4 px en lima. */
.coach-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  border-bottom: 4px solid transparent;
  color: var(--gf-text-muted);
  font-family: var(--gf-font-ui);
  font-size: var(--gf-text-title);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  padding: 0 4px;
  cursor: pointer;
}
.coach-tab-ico { width: 22px; height: 22px; flex-shrink: 0; color: var(--gf-icon); }
.coach-tab:hover { color: var(--gf-text); }
.coach-tab.active {
  color: var(--gf-accent);
  border-bottom-color: var(--gf-accent);
}
.coach-tab.active .coach-tab-ico { color: var(--gf-accent); }

/* ─── Panel de alertas (App Maestra Fase A) ─── */
.coach-alertas {
  background: var(--bg-card);
  border: 1px solid #222;
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.coach-alertas-titulo {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.coach-alertas-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coach-alerta-item {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: none;
  font-family: inherit;
}
.coach-alerta-item.rojo {
  background: rgba(255, 90, 90, 0.12);
  color: #ff5a5a;
  border: 1px solid rgba(255, 90, 90, 0.4);
}
.coach-alerta-item.amarillo {
  background: rgba(255, 207, 90, 0.12);
  color: #ffcf5a;
  border: 1px solid rgba(255, 207, 90, 0.4);
}
.coach-alerta-item.info {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  border: 1px solid #333;
}
.coach-alerta-item:hover {
  filter: brightness(1.25);
}
.coach-alertas-ok {
  color: var(--text-muted);
  font-size: 14px;
}

/* ─── Lista de clientes ─── */
.coach-clients-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.coach-client-row {
  background: var(--bg-card);
  border: 1px solid #222;
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.coach-client-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
}
.coach-client-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-white);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.coach-client-badge-inactivo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid #444;
  border-radius: 6px;
  padding: 2px 8px;
}
.coach-client-badge-alimentacion {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-acento);
  border: 1px solid var(--color-acento);
  border-radius: 6px;
  padding: 2px 8px;
}
.coach-list-filtro {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;
}
.coach-client-meta {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.coach-client-meta strong {
  color: var(--text-white);
  font-weight: 700;
}
.coach-client-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.coach-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1a1a1a;
  border: 1px solid var(--color-acento);
  color: var(--color-acento);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.coach-pill:hover {
  background: var(--color-acento);
  color: #000;
}
.coach-pill-badge {
  background: var(--color-acento);
  color: #000;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─── Dos columnas: lista (izquierda) y panel del cliente (derecha) ─── */
.coach-avisos { display: flex; flex-direction: column; gap: 4px; }
.coach-avisos:empty { display: none; }
.coach-alerta-item.info {
  display: block; width: 100%; text-align: left; border-radius: 10px; padding: 6px 10px;
  font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
  background: rgba(255, 255, 255, 0.05); color: var(--text-muted); border: 1px solid #333;
}
.coach-clientes-layout { display: block; }
.coach-col-lista { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.coach-lista-scroll { min-height: 0; }
.coach-lista-pie { flex: 0 0 auto; margin-top: 8px; padding: 10px 6px 0; border-top: 1px solid #222; font-size: 13px; color: var(--text-muted); }
.coach-kpis { margin-bottom: 12px; }
.coach-chip { cursor: pointer; font-family: inherit; white-space: nowrap; flex: 0 0 auto; }
.coach-chip:hover { border-color: #555; }
.coach-chip.cero { opacity: 0.55; }
.coach-chip.activo { background: #1d2308; border-color: var(--color-acento); color: #fff; opacity: 1; }

.coach-panel {
  background: var(--bg-card);
  border: 1px solid #222;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
}
.coach-panel.activa { border-color: var(--color-acento); }
.coach-panel-vacio { color: var(--text-muted); font-size: 15px; text-align: center; padding: 24px 0; }
.coach-panel-nombre { font-size: 20px; font-weight: 700; color: var(--text-white); word-break: break-word; }
.coach-panel-x {
  background: none; border: 1px solid #444; color: var(--text-muted); border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; font-size: 14px; flex-shrink: 0;
}
.coach-panel-x:hover { color: #fff; border-color: #888; }
.coach-panel-estado { --estado-color: #7fe07f; display: flex; align-items: center; gap: 7px; margin: 8px 0 14px; font-size: 13px; color: var(--text-muted); }
.coach-panel-estado strong { color: var(--estado-color); text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; }
.coach-panel-estado.estado-urgente  { --estado-color: #ff5a5a; }
.coach-panel-estado.estado-atencion { --estado-color: #ff9f43; }
.coach-panel-estado.estado-porarmar { --estado-color: #5aa9ff; }
.coach-panel-estado.estado-aldia    { --estado-color: #7fe07f; }
.coach-panel-estado.estado-inactivo { --estado-color: #888; }
.coach-panel-datos { margin: 0 0 16px; display: grid; gap: 6px; }
.coach-panel-datos div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.coach-panel-datos dt { color: var(--text-muted); }
.coach-panel-datos dd { margin: 0; color: var(--text-white); text-align: right; }
/* Acciones: un solo bloque con tres grupos (trabajo del coach / contacto y ajustes / aparte). Los
   botones son compactos y se acomodan solos en filas. */
.coach-panel-botones { display: flex; flex-direction: column; gap: 10px; }
.coach-panel .coach-pill {
  justify-content: center; height: 35px; padding: 0 14px; font-size: 13px; line-height: 1;
  text-decoration: none; border-radius: 10px; flex: 0 0 auto;
}
.coach-panel .coach-pill.resaltado { background: transparent; border-color: var(--gf-accent); color: var(--gf-accent); }
.coach-panel .coach-pill.resaltado:hover { background: var(--gf-surface-selected); border-color: var(--gf-accent); color: var(--gf-accent); filter: none; }
.coach-panel .coach-pill.suave { height: 30px; padding: 0 12px; font-size: 12px; font-weight: 600; border-color: #333; color: #777; }
.coach-panel .coach-pill.suave:hover { background: #2a2a2a; color: #fff; }

/* Botones deshabilitados: más contraste de texto, pero claramente apagados. */
.coach-panel .coach-pill:disabled,
.coach-panel .coach-pill:disabled:hover {
  opacity: 1;
  background: #141414;
  border-color: #3a3a3a;
  color: #a0a0a0;
  cursor: not-allowed;
}

/* Pantallas angostas (<1000px): una sola columna; el panel va fijo abajo solo con cliente elegido.
   Botones en cuadrícula de 3 columnas (todos visibles, sin scroll horizontal) y "Marcar inactivo"
   aparte, a todo el ancho. El panel ocupa cerca de un tercio de la pantalla como máximo. */
@media (max-width: 999px) {
  .coach-panel { display: none; }
  /* Con un cliente elegido, la ficha ocupa toda la pantalla (encima de la lista) con "← Volver".
     Los modales (z-index 4000) quedan por encima. */
  .coach-panel.activa {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    margin: 0;
    padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    border: none;
    border-radius: 0;
    background: #0b0b0b;
    overflow-y: auto;
  }
  .coach-volver {
    display: inline-flex; align-items: center; margin-bottom: 10px; padding: 8px 12px;
    background: none; border: 1px solid #444; border-radius: 10px; color: var(--text-white);
    font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
  }
  .coach-panel-x { display: none; }
  .coach-panel-nombre { font-size: 18px; }
  .coach-panel-estado { margin: 0 0 10px; }
  .coach-panel-datos { display: grid; }
  /* Celular: mismos grupos, botones un poco más altos para tocarlos bien (mínimo ~40 px). */
  .coach-panel .coach-pill { height: auto; min-height: 40px; padding: 0 14px; font-size: 13px; }
  .coach-panel .coach-pill.suave { min-height: 36px; background: none; border-color: #2a2a2a; color: #888; }
}

@media (min-width: 1000px) {
  /* Página sin scroll general: cada columna se desplaza sola. */
  .coach-app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
  .coach-main { flex: 1; min-height: 0; max-width: none; width: 100%; box-sizing: border-box; padding: 16px 32px 20px; display: flex; flex-direction: column; overflow-y: auto; }
  /* Mis clientes: franja fija arriba y, debajo, lista (~40%) y ficha (mínimo 480 px) a la misma altura. */
  .coach-clientes-layout { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .coach-clientes-cuerpo {
    flex: 1; min-height: 0;
    display: grid; grid-template-columns: minmax(430px, 40%) minmax(480px, 1fr); grid-template-rows: minmax(0, 1fr); gap: 20px;
  }
  .coach-col-lista { height: 100%; }
  .coach-lista-scroll { flex: 1; overflow-y: auto; padding-right: 6px; container-type: inline-size; }
  .coach-panel { align-self: stretch; margin-bottom: 0; min-height: 0; overflow-y: auto; }
  .coach-volver { display: none; }
}

/* Franja de filtros: a lo ancho, fija bajo la barra superior (no se desplaza con la lista). */
.coach-franja {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #222;
}
.coach-franja .coach-buscador { flex: 0 1 340px; margin-bottom: 0; }
.coach-franja .coach-list-filtro { margin: 0; white-space: nowrap; }
/* Las píldoras van en una sola fila; si no caben, se desplazan de lado. */
.coach-franja .coach-kpis {
  flex: 1 1 560px; min-width: 0; margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.coach-franja .coach-kpis::-webkit-scrollbar { display: none; }
.coach-franja .coach-kpis.fade-der {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
.coach-franja .coach-avisos { flex: 1 1 100%; }

/* ─── Lista compacta de clientes (rediseño "Mis clientes") ─── */
.coach-buscador {
  display: block;
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  color: var(--text-white);
  font-size: 14px;
  padding: 9px 12px;
  margin-bottom: 10px;
}
.coach-buscador:focus { outline: none; border-color: var(--color-acento); }
.coach-cli-row {
  --estado-color: #7fe07f;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) minmax(0, 190px) 130px;
  align-items: center;
  gap: 4px 14px;
  background: var(--bg-card);
  border: 1px solid #222;
  border-radius: 10px;
  padding: 6px 14px;
  margin-bottom: 4px;
  cursor: pointer;
}
.coach-cli-row:hover { border-color: #444; }
.coach-cli-row:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 1px; }
.coach-cli-row.seleccionado {
  border-color: var(--color-acento);
  background: #161a08;
}
.coach-cli-row.estado-urgente  { --estado-color: #ff5a5a; }
.coach-cli-row.estado-atencion { --estado-color: #ff9f43; }
.coach-cli-row.estado-porarmar { --estado-color: #5aa9ff; }
.coach-cli-row.estado-aldia    { --estado-color: #7fe07f; }
.coach-cli-row.estado-inactivo { --estado-color: #888; opacity: 0.6; }
.coach-cli-estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--estado-color);
}
.coach-cli-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--estado-color);
  flex-shrink: 0;
}
.coach-cli-nombre { display: flex; flex-direction: column; min-width: 0; }
.coach-cli-nombre-txt {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coach-cli-motivo { font-size: 12px; color: var(--text-muted); }
.coach-cli-plan { font-size: 12px; color: var(--text-muted); }
.coach-cli-vence { font-size: 12px; color: var(--text-muted); text-align: right; }
.coach-cli-vence.venciendo { color: #ff9f43; }

/* Avatar y flecha: solo en PC (en celular la fila sigue como antes). */
.coach-cli-avatar, .coach-cli-flecha { display: none; }

/* PC: fila siempre de dos líneas.
   Avatar (color del estado) · estado arriba y motivo abajo · nombre arriba y plan abajo (el nombre manda:
   mínimo 160 px) · vencimiento · flecha. Todo en una sola línea, con "…" si no cabe. */
@media (min-width: 1000px) {
  .coach-cli-row {
    grid-template-columns: 40px minmax(110px, 150px) minmax(160px, 1fr) minmax(90px, 120px) 16px;
    grid-template-rows: auto auto;
    gap: 1px 14px;
    padding: 8px 14px;
  }
  .coach-cli-avatar {
    display: flex; grid-column: 1; grid-row: 1 / 3; align-self: center; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; background: var(--estado-color); color: #000;
    font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 900;
  }
  .coach-cli-estado { grid-column: 2; grid-row: 1; min-width: 0; }
  .coach-cli-nombre { display: contents; }
  .coach-cli-nombre-txt { grid-column: 3; grid-row: 1; min-width: 0; }
  .coach-cli-motivo { grid-column: 2; grid-row: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .coach-cli-plan { grid-column: 3; grid-row: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .coach-cli-vence { grid-column: 4; grid-row: 1 / 3; align-self: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .coach-cli-flecha { display: flex; grid-column: 5; grid-row: 1 / 3; align-self: center; color: var(--text-muted); }
  .coach-cli-row.seleccionado .coach-cli-flecha { color: var(--color-acento); }

  /* Lista angosta (menos de ~520 px de ancho): sin avatar ni flecha, para que el nombre conserve sus 160 px. */
}
@media (max-width: 640px) {
  .coach-main { padding: 20px 16px 48px; }
}

/* ─── Celular / pantallas angostas (<1000px): rediseño compacto. El escritorio no se toca. ─── */
.coach-cli-meta-movil, .coach-bib-filtros, .coach-bib-mas, .coach-client-meta .solo-movil { display: none; }
@media (max-width: 999px) {
  /* Chips: una sola fila con scroll horizontal, más chicos, y degradado a la derecha si hay más. */
  .coach-kpis {
    flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin-bottom: 8px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .coach-kpis::-webkit-scrollbar { display: none; }
  .coach-kpis.fade-der {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
  .coach-franja { gap: 8px; padding-bottom: 8px; margin-bottom: 8px; }
  .coach-franja .coach-buscador { flex: 1 1 100%; max-width: none; }
  .coach-franja .coach-kpis { flex: 1 1 100%; }
  .coach-chip { flex: 0 0 auto; padding: 3px 9px; font-size: 11px; white-space: nowrap; }
  .coach-chip-n { font-size: 12px; }

  /* Fila de cliente: línea 1 = punto + estado + nombre; línea 2 = motivo · plan · vencimiento. */
  .coach-cli-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1px 8px;
    padding: 6px 10px;
    margin-bottom: 4px;
  }
  .coach-cli-estado { grid-column: 1; grid-row: 1; font-size: 10px; }
  .coach-cli-nombre { display: contents; }
  .coach-cli-nombre-txt { grid-column: 2; grid-row: 1; font-size: 14px; }
  .coach-cli-motivo, .coach-cli-plan, .coach-cli-vence { display: none; }
  .coach-cli-meta-movil {
    display: block; grid-column: 1 / -1; grid-row: 2;
    font-size: 11px; font-weight: 400; line-height: 1.3; color: var(--text-muted);
  }
  .coach-cli-meta-movil span { font-size: inherit; font-weight: inherit; }
  .coach-cli-meta-movil .vence-pronto-m { color: #ff9f43; }

  /* Biblioteca: buscador + chips de nivel; cada programa en un bloque compacto. */
  .coach-bib-filtros { display: block; margin-bottom: 10px; }
  .coach-bib-filtros .coach-buscador { max-width: none; margin-bottom: 8px; }
  .coach-bib-filtros .coach-kpis { margin-bottom: 0; }
  #btn-nueva-biblioteca { margin-bottom: 10px !important; }
  #coach-biblioteca-list { gap: 8px; }
  #coach-biblioteca-list .coach-client-row {
    position: relative; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    gap: 8px; padding: 10px 12px; border-radius: 12px;
  }
  #coach-biblioteca-list .coach-client-info { min-width: 0; gap: 2px; }
  #coach-biblioteca-list .coach-client-name { font-size: 15px; }
  #coach-biblioteca-list .coach-client-meta { display: block; font-size: 12px; font-weight: 400; }
  #coach-biblioteca-list .coach-client-meta span { font-size: inherit; font-weight: inherit; }
  #coach-biblioteca-list .coach-client-meta strong { display: none; }
  #coach-biblioteca-list .coach-client-meta .solo-movil { display: inline; }
  #coach-biblioteca-list .coach-client-meta .bib-nivel { text-transform: capitalize; }
  #coach-biblioteca-list .coach-client-meta > span + span::before { content: " · "; white-space: pre; }
  #coach-biblioteca-list .coach-client-actions { flex-wrap: wrap; gap: 8px; }
  #coach-biblioteca-list .coach-pill { min-height: 38px; padding: 6px 14px; font-size: 13px; justify-content: center; }
  #coach-biblioteca-list .coach-pill[data-action="editar"] { flex: 0 0 auto; }
  #coach-biblioteca-list .coach-bib-mas { display: inline-flex; flex: 0 0 auto; min-width: 44px; border-color: #444; color: var(--text-muted); font-size: 18px; line-height: 1; }
  /* "Eliminar" queda escondido tras el menú ⋯ y, al abrirlo, aparece separado, a todo el ancho. */
  #coach-biblioteca-list .coach-pill[data-action="eliminar"] { display: none; }
  #coach-biblioteca-list .menu-abierto .coach-pill[data-action="eliminar"] { display: inline-flex; flex: 1 0 100%; margin-top: 4px; }
}

/* ─── Selector de días (editor de fase, App Maestra Fase 3) ─── */
.dow-pill {
  background: #1a1a1a;
  border: 1px solid #333;
  color: var(--text-muted);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.dow-pill.selected {
  background: var(--color-acento);
  border-color: var(--color-acento);
  color: #000;
}

.coach-empty {
  color: var(--text-muted);
  font-size: 14px;
  padding: 24px 0;
  text-align: center;
}

/* ─── Base de todas las ventanas (el marco común usa esta capa de fondo) ─── */
.coach-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ─── Plan de alimentación: mensajes del panel ─── */
.pa-mensaje { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.pa-mensaje.error { color: #ff5a5a; }
.pa-mensaje.ok { color: var(--color-acento); }

/* ─── Pestaña "Plan de alimentación" (dos paneles): "nunca" en rojo e historial de planes ─── */
.coach-cli-row.pa-nunca .coach-cli-plan,
.coach-cli-row.pa-nunca .coach-cli-meta-movil { color: #ff5a5a; font-weight: 700; }
.pa-cuerpo-ficha { margin-top: 14px; }
.pa-cuerpo-ficha > .pa-mensaje { margin-bottom: 10px; }
.pa-version { padding: 10px 0; border-bottom: 1px solid #1a1a1a; }
.pa-version:last-child { border-bottom: none; }
.pa-version-cab { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-white); }
.pa-vigente { padding: 1px 8px; border: 1px solid var(--color-acento); border-radius: 999px; color: var(--color-acento); font-size: 12px; }
.pa-version-nota { margin-top: 4px; font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.pa-version-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.pa-sin-excel { font-size: 13px; color: var(--text-muted); }
.coach-panel .coach-pill.pa-peligro { border-color: var(--gf-urgent); color: var(--gf-urgent); }
.coach-panel .coach-pill.pa-peligro:hover { background: #2a2a2a; border-color: var(--gf-urgent); color: var(--gf-urgent); }
.coach-panel .coach-pill.pa-peligro:disabled { border-color: #3a3a3a; color: #a0a0a0; }

/* Formulario "Nuevo plan" dentro del panel (mismos campos y botones que la ventana, con IDs pa2-*) */
.pa-form { display: flex; flex-direction: column; gap: var(--gf-gap-md); }
.pa-form .cv-nuevo-acc #pa2-avisar { display: contents; }
.pa-form .cv-btn:disabled, .pa-form .cv-nota:disabled { opacity: 0.7; cursor: not-allowed; }
.pa-bloqueada { pointer-events: none; opacity: 0.6; }
/* Pantalla de confirmación bajo el selector del Excel (números leídos, avisos, Cancelar / Confirmar y subir) y números del plan */
.pa-revision { padding: var(--gf-gap-md); background: var(--gf-surface); border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius); }
.pa-revision[hidden] { display: none; }
.pa-rev-tit { font-size: var(--gf-text-body); color: var(--gf-text); overflow-wrap: anywhere; }
.pa-rev-estado { margin-top: 8px; font-size: var(--gf-text-min); color: var(--gf-text-muted); }
.pa-rev-estado.error { color: var(--gf-urgent); }
.pa-rev-estado.aviso { color: var(--gf-attention); }
.pa-rev-lista { margin: 6px 0 0; padding-left: 18px; font-size: var(--gf-text-min); line-height: 1.4; overflow-wrap: anywhere; }
.pa-rev-lista.error li { color: var(--gf-urgent); }
.pa-rev-lista.aviso li { color: var(--gf-attention); }
.pa-rev-nota { margin-top: 10px; font-size: var(--gf-text-min); color: var(--gf-text-muted); }
.pa-rev-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* Con la confirmación abierta, el PDF, el Excel y la nota quedan bloqueados (se reactivan con Cancelar) */
.pa-form.pa-congelado .cv-file, .pa-form.pa-congelado .cv-nota { opacity: 0.6; }
.pa-form.pa-congelado .cv-file label { cursor: not-allowed; }
/* Números del plan: tarjeta "Plan vigente" y filas del historial */
.pa-macros { margin-top: 8px; }
.pa-sin-macros { margin-top: 8px; font-size: var(--gf-text-min); color: var(--gf-text-muted); }
.pa-version-kcal { margin-top: 2px; font-size: var(--gf-text-min); color: var(--gf-text); }
.pa-version-kcal.pa-sin { color: var(--gf-text-muted); }
/* "Leer números del Excel": bajo "Sin datos de macros" en Plan vigente y junto a los botones de cada fila. La lectura del Excel
   de un plan se confirma en un bloque arriba del panel. Los textos envuelven para no desbordar en pantallas de 360 px o menos. */
.pa-macros-leer { margin-top: 10px; }
.pa-lectura { margin-bottom: 12px; }
.pa-version-btns .coach-pill, .pa-macros-leer .coach-pill { white-space: normal; max-width: 100%; text-align: center; }
.pa-rev-acc .cv-btn { white-space: normal; max-width: 100%; height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; line-height: 1.25; text-align: center; }
@media (max-width: 999px) {
  /* Celular: una columna y botones de al menos 40 px para tocarlos bien */
  .pa-form .cv-btn, .pa-form .cv-btn-principal, .pa-rev-acc .cv-btn { min-height: 40px; }
  .pa-form .cv-file { flex-wrap: wrap; }
  /* Solo el panel y la lista de Plan de alimentación (Mis clientes no cambia): botones táctiles de 40 px y
     espacio bajo el campo enfocado para que el teclado no lo tape */
  #coach-alim-panel .coach-volver, #coach-alim-panel .coach-panel-act { min-height: 40px; }
  #coach-alim-lista .coach-pill { min-height: 40px; }
  #coach-alim-panel { scroll-padding-bottom: 40vh; }
}

/* Con tres pestañas, en celular se acomodan en una fila con scroll horizontal si no caben. */
@media (max-width: 999px) {
  .coach-topbar { flex-wrap: wrap; gap: 0 12px; padding: 8px 16px 0; height: auto; }
  .coach-topbar-title { font-size: 18px; }
  .coach-topbar .coach-link-volver { font-size: 13px; }
  .coach-tabs { order: 3; width: 100%; align-self: auto; }
  .coach-tab { padding: 10px 10px; }
}
@media (max-width: 999px) {
  .coach-tabs { overflow-x: auto; scrollbar-width: none; gap: 14px; }
  .coach-tabs::-webkit-scrollbar { display: none; }
  .coach-tab { white-space: nowrap; flex: 0 0 auto; }
}
@media (max-width: 640px) {
  .coach-tab-extra { display: none; }
}


/* Permiso de imagen y testimonio: la insignia siempre dice algo; "Sin respuesta" y "No autoriza" = no publicar. */
.coach-imagen-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 8px;
  margin-top: 2px;
  white-space: nowrap;
  border: 1px solid #444;
  color: var(--text-muted);
}
.coach-imagen-badge.autoriza { color: var(--color-acento); border-color: var(--color-acento); }
.coach-imagen-badge.no-autoriza { color: #ff6b6b; border-color: #ff6b6b; }
.coach-imagen-badge.sin-respuesta { color: var(--text-muted); border-color: #444; }
.coach-imagen-fecha { font-size: 11px; color: var(--text-muted); }
.coach-imagen-op { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #fff; padding: 6px 0; cursor: pointer; }

/* ─── Ficha del cliente (B2b-2): encabezado, pestañas y tarjetas ─── */
.coach-panel { container-type: inline-size; container-name: ficha; }
.coach-ico { width: 18px; height: 18px; flex-shrink: 0; }
.coach-panel-vacio { display: flex; align-items: center; justify-content: center; min-height: 160px; }

.coach-ficha-cab { --estado-color: #7fe07f; display: flex; align-items: center; gap: 14px; }
.coach-ficha-cab.estado-urgente  { --estado-color: #ff5a5a; }
.coach-ficha-cab.estado-atencion { --estado-color: #ff9f43; }
.coach-ficha-cab.estado-porarmar { --estado-color: #5aa9ff; }
.coach-ficha-cab.estado-aldia    { --estado-color: #7fe07f; }
.coach-ficha-cab.estado-inactivo { --estado-color: #888; }
.coach-ficha-avatar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--estado-color); color: #000;
  font-family: 'Inter', system-ui, sans-serif; font-size: 18px; font-weight: 900;
}
.coach-ficha-cab-txt { flex: 1; min-width: 0; }
.coach-ficha-plan { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.coach-ficha-cab .coach-panel-estado { margin: 6px 0 0; }
.coach-panel-cab-btns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.coach-panel-act {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px;
  background: none; border: 1px solid var(--color-acento); color: var(--color-acento);
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.coach-panel-act:hover { background: var(--color-acento); color: #000; }
.coach-panel-x { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; }

.coach-ficha-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 14px 0 12px; padding: 4px;
  border: 1px solid #222; border-radius: 12px; background: #0b0b0b;
}
.coach-ficha-tabs::-webkit-scrollbar { display: none; }
.coach-ftab {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 9px 14px; border: none;
  border-radius: 9px; background: none; color: var(--text-muted); cursor: pointer; white-space: nowrap;
  font-family: 'Barlow Condensed', system-ui, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
.coach-ftab:hover { color: var(--text-white); }
.coach-ftab.activa { background: var(--color-acento); color: #000; }
.coach-ftab-num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #ff9f43; color: #000; font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 900;
}
.coach-ftab-num[hidden] { display: none; }

.coach-ficha-pane { display: flex; flex-direction: column; gap: 12px; }
.coach-ficha-pane[hidden] { display: none; }

.coach-card { background: #0d0d0d; border: 1px solid #222; border-radius: 12px; padding: 12px 14px; min-width: 0; }
.coach-card-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.coach-card-ico { display: inline-flex; color: var(--color-acento); }
.coach-card-tit {
  margin: 0; flex: 1; font-family: 'Barlow Condensed', system-ui, sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-white);
}
.coach-card-ir { display: inline-flex; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.coach-card-ir:hover { color: var(--color-acento); }
/* Datos como planilla: etiqueta a la izquierda, valor a la derecha, una línea fina entre filas. */
.coach-card .coach-panel-datos { gap: 0; margin: 0 0 4px; }
.coach-card .coach-panel-datos div { padding: 7px 0; border-bottom: 1px solid #1a1a1a; }
.coach-card .coach-panel-datos div:last-child { border-bottom: none; }
.coach-card .coach-panel-datos dd { overflow-wrap: anywhere; }
.coach-card-texto { font-size: 13px; color: var(--text-muted); line-height: 1.45; margin-top: 8px; }
.coach-card-pie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.coach-ficha-nota { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.coach-ficha-lista { display: flex; flex-direction: column; gap: 8px; }
.coach-ficha-item { border: 1px solid #222; border-radius: 10px; padding: 8px 10px; background: #111; }
.coach-ficha-item-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.coach-ficha-item-txt { font-size: 13px; color: var(--text-white); line-height: 1.4; overflow-wrap: anywhere; }
.coach-ficha-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid #444; border-radius: 999px; padding: 2px 8px; }
.coach-ficha-tag.ok { color: #7fe07f; border-color: rgba(127, 224, 127, 0.5); }
.coach-ficha-tag.pend { color: #ff9f43; border-color: rgba(255, 159, 67, 0.5); }
@media (max-width: 999px) {
  .coach-panel-x { display: none; }
}

/* ─────────────────────────────────────────────────
   B2b-3 — Diseño más liviano para trabajar horas seguidas.
   Sin mayúsculas ni negrita pesada, bordes finos y verde lima solo para lo activo o principal.
   La tipografía condensada gruesa queda solo para "APP MAESTRA" y el nombre del cliente en la ficha.
   Todo texto de datos mide 13 px o más. Solo estilo: no cambia estructura ni funciones.
   (Va al final del archivo para pisar las reglas anteriores; las pestañas de la barra superior no cambian.)
   ───────────────────────────────────────────────── */
:where(.coach-app) :where(button, input, textarea) { font-family: inherit; }

/* CAUSA de los textos grandes y en negrita: css/styles.css (compartido con la app móvil) tiene la regla
   `p, label, span, select, input, button { font-size: 18px; font-weight: 700 }`. Una regla directa sobre
   <span> gana a la herencia: el <span> dentro de un botón de 13 px seguía midiendo 18 px y en negrita.
   Acá se devuelve la herencia a los span y label de la barra superior y de "Mis clientes" (especificidad
   cero con :where: las clases propias, como .coach-cli-nombre-txt, siguen mandando). */
:where(.coach-topbar, #coach-tab-clientes) :is(span, label) { font-size: inherit; font-weight: inherit; }
:where(#coach-tab-clientes) input { font-weight: 400; }
/* Plan de alimentación: lo mismo que Mis clientes (la regla global de styles.css también lo afectaba). Con :where las
   clases propias (.cv-btn, .cv-file-nombre, .coach-cli-nombre-txt…) siguen mandando. */
:where(#coach-tab-alimentacion) :is(span, label) { font-size: inherit; font-weight: inherit; }
:where(#coach-tab-alimentacion) input { font-weight: 400; }
.pa-version-cab strong { font-weight: 400; }

/* Títulos de sección (Biblioteca de Programas y Plan de alimentación) */
.coach-section-title { font-family: inherit; font-size: 15px; font-weight: 600; color: #9a9a9a; letter-spacing: 0; text-transform: none; margin-bottom: 10px; }

/* Píldoras de filtro */
.coach-chip { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; padding: 4px 12px; border-color: #2a2a2a; }
.coach-chip-n { font-size: 13px; font-weight: 700; }
.coach-chip.estado-urgente  { border-color: rgba(255, 90, 90, 0.35); }
.coach-chip.estado-atencion { border-color: rgba(255, 159, 67, 0.35); }
.coach-chip.estado-porarmar { border-color: rgba(90, 169, 255, 0.35); }
.coach-chip.estado-aldia    { border-color: rgba(127, 224, 127, 0.35); }
.coach-chip.activo { border-color: var(--color-acento); }
.coach-buscador { font-size: 14px; padding: 8px 12px; }

/* Botones: borde fino y gris; el verde queda para lo principal */
.coach-pill { background: #161616; border-color: #3a3a3a; color: #d6d6d6; font-weight: 500; padding: 6px 14px; }
.coach-pill:hover { background: #222; border-color: var(--color-acento); color: #fff; }
.coach-pill.resaltado { background: var(--color-acento); border-color: var(--color-acento); color: #000; }
.coach-pill.resaltado:hover { filter: brightness(1.1); color: #000; background: var(--color-acento); }
#btn-nueva-biblioteca { border-color: var(--color-acento); color: var(--color-acento); }
.coach-pill-badge { font-weight: 700; }
.coach-pill-sm { background: #161616; border-color: #3a3a3a; color: #d6d6d6; font-weight: 500; font-size: 13px; padding: 4px 10px; }
.coach-pill-sm:hover { background: #222; border-color: var(--color-acento); color: #fff; }
.coach-panel .coach-pill { height: 32px; padding: 0 12px; border-radius: 8px; }
.coach-panel .coach-pill.suave { height: 28px; font-size: 13px; font-weight: 500; color: #8a8a8a; border-color: #2c2c2c; }
.coach-alerta-item.info { font-size: 13px; font-weight: 500; }

/* Insignias y etiquetas */
.coach-client-badge-alimentacion { font-size: 13px; font-weight: 500; text-transform: none; padding: 1px 8px; border-color: rgba(204, 255, 0, 0.4); }
.coach-client-badge-inactivo { font-size: 13px; font-weight: 500; text-transform: none; }
.coach-ficha-tag { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; padding: 1px 8px; }
.coach-ficha-nota { font-size: 13px; }
.coach-ficha-item-cab { font-size: 13px; }

/* Lista de clientes */
.coach-cli-row { border-radius: 8px; }
.coach-cli-estado { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.coach-cli-nombre-txt { font-size: 14px; font-weight: 600; }
.coach-cli-motivo, .coach-cli-plan, .coach-cli-vence { font-size: 13px; }
.coach-cli-meta-movil { font-size: 13px; white-space: normal; }
.coach-cli-avatar { font-weight: 700; }
.coach-client-name { font-size: 15px; font-weight: 600; }

/* Fila de PC: el nombre toma todo el espacio libre; estado y vencimiento conservan un ancho justo. */
@media (min-width: 1000px) {
  .coach-cli-row { grid-template-columns: 36px 152px minmax(160px, 1fr) minmax(100px, 124px) 16px; gap: 1px 12px; padding: 7px 12px; }
  .coach-cli-avatar { width: 36px; height: 36px; font-size: 13px; }
}

/* Ficha: encabezado */
.coach-panel.activa { border-color: #2a2a2a; }
.coach-panel { padding: 16px; }
.coach-panel-nombre { font-family: 'Barlow Condensed', system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.15; }
.coach-panel-estado strong { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.coach-ficha-avatar { width: 48px; height: 48px; font-size: 16px; font-weight: 700; }
.coach-ficha-cab { gap: 12px; }
.coach-ficha-cab .coach-panel-estado { margin-top: 4px; }
/* "Actualizar" discreto y compacto */
.coach-panel-act { height: 28px; padding: 0 10px; gap: 6px; font-size: 13px; font-weight: 500; border-color: #3a3a3a; color: #bdbdbd; border-radius: 8px; }
.coach-panel-act .coach-ico { width: 15px; height: 15px; }
.coach-panel-act:hover { background: #222; border-color: var(--color-acento); color: #fff; }
.coach-panel-x { width: 28px; height: 28px; }
.coach-panel-x .coach-ico { width: 15px; height: 15px; }

/* Ficha: pestañas livianas (tipografía normal, peso medio) con degradado si no caben */
.coach-ficha-tabs { gap: 2px; margin: 12px 0 10px; padding: 3px; border-radius: 10px; }
.coach-ftab { gap: 6px; padding: 7px 10px; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.coach-ftab .coach-ico { width: 16px; height: 16px; }
.coach-ftab.activa { font-weight: 500; }
.coach-ftab-num { font-weight: 700; }
.coach-ficha-tabs.fade-der {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

/* Tarjetas: más bajas, títulos pequeños, etiqueta gris y valor blanco */
.coach-card { padding: 10px 12px; border-radius: 10px; }
.coach-card-cab { margin-bottom: 4px; gap: 8px; }
.coach-card-tit { font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.coach-card .coach-panel-datos div { padding: 5px 0; }
.coach-panel-datos dt { color: #8a8a8a; }
.coach-panel-datos dd { color: #eaeaea; font-weight: 400; }
.coach-card-texto { font-size: 13px; margin-top: 6px; }
.coach-card-pie { margin-top: 10px; }
.coach-ficha-pane { gap: 10px; }
.coach-ficha-item { padding: 6px 10px; }

.coach-perfil-et { display: block; font-size: 13px; color: #8a8a8a; }
.coach-perfil-val { display: block; font-size: 14px; color: #eaeaea; }
.coach-perfil-marca { margin-left: 6px; padding: 0 6px; border: 1px solid #333; border-radius: 6px; font-size: 13px; color: #777; cursor: help; }

/* Pestaña Historial: aviso centrado dentro de su tarjeta */
.coach-vacio-centro { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 12px; text-align: center; font-size: 14px; color: #8a8a8a; }
.coach-vacio-centro .coach-ico { width: 32px; height: 32px; color: #555; }


/* Celular: se mantienen los tamaños pensados para tocar */
@media (max-width: 999px) {
  .coach-panel .coach-pill { height: auto; min-height: 40px; }
  .coach-panel .coach-pill.suave { min-height: 36px; }
  .coach-panel-nombre { font-size: 20px; }
  .coach-panel.activa { padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* ─────────────────────────────────────────────────
   B2b-5 — Pesos de letra (opción A). Inter solo existe en 400 y 700 (500 se dibuja como 400 y 600 como 700),
   así que se usan solo esos dos: 700 únicamente para el nombre del cliente (lista y ficha) y el estado
   (Urgente, Por armar…); todo lo demás en 400. Las pestañas de la barra superior y "APP MAESTRA" no cambian.
   ───────────────────────────────────────────────── */
.coach-chip, .coach-chip-n, .coach-cli-avatar, .coach-ficha-avatar, .coach-volver,
.coach-ftab, .coach-ftab.activa, .coach-ftab-num,
.coach-card-tit, .coach-section-title, .pa-titulo,
.coach-pill, .coach-pill-sm, .coach-pill-badge, .coach-panel .coach-pill, .coach-panel .coach-pill.suave, .coach-panel-act,
.coach-client-badge-alimentacion, .coach-client-badge-inactivo, .coach-ficha-tag, .coach-imagen-badge,
.coach-alerta-item.info, .coach-client-name { font-weight: 400; }

/* Lo que se escanea primero: nombre del cliente y estado */
.coach-cli-nombre-txt, .coach-cli-estado, .coach-panel-estado strong, .coach-panel-nombre { font-weight: 700; }

/* ─────────────────────────────────────────────────
   B2b-5 — Detalles finales. Solo estilo. Pesos: 400 y 700 (700 solo en nombre y estado).
   ───────────────────────────────────────────────── */
:root { --linea-ficha: #1a1a1a; } /* la línea gris fina que separa filas y celdas en todas las tarjetas */
.coach-card .coach-panel-datos div { border-bottom-color: var(--linea-ficha); }

/* 1) Lista: la columna del vencimiento toma solo el ancho de su contenido; el nombre usa todo el resto */
@media (min-width: 1000px) {
  .coach-cli-row { grid-template-columns: 36px 152px minmax(160px, 1fr) max-content 16px; }
  .coach-cli-vence { text-align: right; }
}

/* 3) Nota de programas extra: una línea corta, gris, pequeña */
.coach-nota-corta { color: #8a8a8a; margin-top: 2px; cursor: help; }

/* 4) Último entrenamiento: fecha y "hace N días" en una línea; la rutina debajo, gris y cortada con "…" */
.coach-panel-datos dd.coach-dd-doble { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; flex: 1; }
.coach-dd-linea { white-space: nowrap; }
.coach-dd-detalle { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #8a8a8a; }

/* 5) "Actualizar": globo de ayuda propio, alineado al borde derecho del botón (no se pega ni se corta) */
.coach-panel-act { position: relative; }
.coach-panel-act[data-ayuda]:hover::after,
.coach-panel-act[data-ayuda]:focus-visible::after {
  content: attr(data-ayuda); position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  padding: 6px 10px; border: 1px solid #333; border-radius: 8px; background: #1c1c1c; color: #d6d6d6;
  font-size: 13px; font-weight: 400; white-space: nowrap; pointer-events: none;
}

/* 7) Acciones: cuadrícula de 2 columnas iguales, botones idénticos con el texto centrado */
.coach-card-acciones .coach-card-cuerpo { container-type: inline-size; }
.coach-panel-botones { gap: 8px; }
.coach-acciones-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.coach-acciones-grid .coach-pill {
  display: block; width: 100%; min-width: 0; height: 32px; padding: 0 8px; line-height: 30px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; box-sizing: border-box;
}
.coach-acciones-grid .coach-pill.suave { height: 32px; }
.coach-acciones-aparte { margin-top: 2px; }
@container (max-width: 335px) {
  .coach-acciones-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 999px) {
  .coach-acciones-grid .coach-pill, .coach-acciones-grid .coach-pill.suave { height: 40px; min-height: 40px; line-height: 38px; }
}

/* Las filas de datos nunca pasan del ancho de la tarjeta: una sola columna que puede achicarse (minmax 0) */
.coach-card .coach-panel-datos { grid-template-columns: minmax(0, 1fr); }

/* ─────────────────────────────────────────────────
   B5-1 — Franja de filtros según REGLAS_DISENO_APP_MAESTRA.md (6.2). Solo dentro de la franja: las píldoras y
   el buscador de la Biblioteca no cambian hasta B5-5.
   ───────────────────────────────────────────────── */
.coach-franja { border-bottom-color: var(--gf-border); }
.coach-franja .coach-buscador {
  flex: 0 1 var(--gf-search-w); width: var(--gf-search-w); max-width: 100%; height: var(--gf-search-h); padding: 0 12px;
  font-size: var(--gf-text-body); color: var(--gf-text); background: var(--gf-surface);
  border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius);
}
.coach-franja .coach-buscador::placeholder { color: var(--gf-placeholder); }
.coach-franja .coach-buscador:focus { border-color: var(--gf-accent); }
.coach-franja .coach-list-filtro { font-size: var(--gf-text-min); color: var(--gf-text-muted); }
.coach-franja .coach-list-filtro input { width: 16px; height: 16px; }

/* Seis píldoras: 32 px de alto, radio 16, 12 px a los lados, 10 px entre ellas, borde de 1 px */
.coach-franja .coach-kpis { gap: var(--gf-pill-gap); }
.coach-franja .coach-chip {
  align-items: center; height: var(--gf-pill-h); padding: 0 12px; gap: 5px; border-radius: 16px;
  background: var(--gf-surface); border: var(--gf-border-width) solid var(--gf-border);
  color: var(--gf-text-muted); font-size: var(--gf-text-min); font-weight: 400;
}
.coach-franja .coach-chip-n { font-size: var(--gf-text-min); font-weight: 400; color: var(--gf-text); }
/* Borde (y número) del color de su estado; Activos y Vencen en 7 días, en gris */
.coach-franja .coach-chip.estado-urgente  { border-color: var(--gf-urgent); }
.coach-franja .coach-chip.estado-atencion { border-color: var(--gf-attention); }
.coach-franja .coach-chip.estado-porarmar { border-color: var(--gf-pending); }
.coach-franja .coach-chip.estado-aldia    { border-color: var(--gf-on-track); }
.coach-franja .coach-chip.estado-urgente .coach-chip-n  { color: var(--gf-urgent); }
.coach-franja .coach-chip.estado-atencion .coach-chip-n { color: var(--gf-attention); }
.coach-franja .coach-chip.estado-porarmar .coach-chip-n { color: var(--gf-pending); }
.coach-franja .coach-chip.estado-aldia .coach-chip-n    { color: var(--gf-on-track); }
.coach-franja .coach-chip:hover { background: var(--gf-surface-2); }
/* Seleccionada: borde lima */
.coach-franja .coach-chip.activo { background: var(--gf-surface-selected); border-color: var(--gf-accent); color: var(--gf-text); }
@media (max-width: 999px) {
  .coach-franja .coach-buscador { flex: 1 1 100%; width: 100%; max-width: none; }
}

/* ─────────────────────────────────────────────────
   B5-2 — Fondo, franja de filtros en dos filas y fila de la lista, según REGLAS_DISENO_APP_MAESTRA.md
   (secciones 5, 6.2 y 6.3). Pantalla de referencia: 1536 × 729 px.
   ───────────────────────────────────────────────── */
.coach-main { background: var(--gf-bg); }

/* Franja: arriba el buscador y "Ocultar clientes inactivos"; abajo, las seis píldoras en una sola fila */
.coach-franja .coach-kpis { flex: 1 1 100%; }

@media (min-width: 1000px) {
  /* Franja de ≈ 94 px (6 + 42 + 8 + 32 + 5 + 1 de línea). El cuerpo arranca 8 px más abajo. */
  .coach-main { padding: 0 var(--gf-topbar-pad-x) 6px; }
  .coach-franja { padding: 6px 0 5px; margin-bottom: 8px; gap: 8px var(--gf-gap-lg); border-bottom: var(--gf-border-width) solid var(--gf-border); }

  /* Fila de la lista: avatar de 56 px, cuatro líneas apiladas (estado, motivo, nombre, plan), vencimiento y flecha */
  .coach-cli-row {
    grid-template-columns: 56px minmax(0, 1fr) max-content 18px;
    grid-template-rows: repeat(4, auto);
    column-gap: 14px; row-gap: 0; align-items: center;
    padding: 15px var(--gf-gap-lg);
    background: var(--gf-surface); border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius);
    margin-bottom: 10px;
  }
  .coach-cli-row:hover { border-color: var(--gf-border-button); }
  /* Seleccionada: borde de 2 px lima (el relleno baja 1 px para que la fila no cambie de alto) */
  .coach-cli-row.seleccionado { border: 2px solid var(--gf-accent); padding: 14px 15px; background: var(--gf-surface-selected); }
  .coach-cli-row.estado-urgente  { --estado-color: var(--gf-urgent); }
  .coach-cli-row.estado-atencion { --estado-color: var(--gf-attention); }
  .coach-cli-row.estado-porarmar { --estado-color: var(--gf-pending); }
  .coach-cli-row.estado-aldia    { --estado-color: var(--gf-on-track); }

  .coach-cli-avatar {
    grid-column: 1; grid-row: 1 / 5; width: 56px; height: 56px; font-size: 18px; font-weight: 700; color: var(--gf-bg);
  }
  .coach-cli-estado { grid-column: 2; grid-row: 1; min-width: 0; font-size: var(--gf-text-min); font-weight: 700; line-height: 18px; }
  .coach-cli-motivo { grid-column: 2; grid-row: 2; font-size: var(--gf-text-min); line-height: 18px; color: var(--gf-text-muted); }
  .coach-cli-nombre-txt { grid-column: 2; grid-row: 3; font-size: 16px; font-weight: 700; line-height: 22px; color: var(--gf-text); }
  .coach-cli-plan { grid-column: 2; grid-row: 4; font-size: var(--gf-text-min); line-height: 18px; color: var(--gf-text-muted); }
  .coach-cli-vence { grid-column: 3; grid-row: 1 / 5; align-self: center; font-size: var(--gf-text-min); color: var(--gf-text-muted); text-align: right; }
  .coach-cli-flecha { grid-column: 4; grid-row: 1 / 5; align-self: center; color: var(--gf-icon); }
  .coach-cli-flecha svg { width: 18px; height: 18px; }
  .coach-cli-row.seleccionado .coach-cli-flecha { color: var(--gf-accent); }

  /* Lista angosta (menos de 520 px de ancho, según la regla): sin avatar ni flecha, para que el nombre no se corte */
  @container (max-width: 519px) {
    .coach-cli-row { grid-template-columns: minmax(0, 1fr) max-content; }
    .coach-cli-avatar, .coach-cli-flecha { display: none; }
    .coach-cli-estado, .coach-cli-motivo, .coach-cli-nombre-txt, .coach-cli-plan { grid-column: 1; }
    .coach-cli-vence { grid-column: 2; }
  }
}

/* ─────────────────────────────────────────────────
   B5-3 — Encabezado de la ficha, pestañas y fila 1 del Resumen (tres indicadores), según
   REGLAS_DISENO_APP_MAESTRA.md (6.4, 6.5 y 6.6). Pantalla de referencia: 1536 × 729 px.
   ───────────────────────────────────────────────── */

/* Encabezado (≈ 60 px): a la izquierda avatar de 56, nombre en Barlow Condensed 600 de 26 y plan de 14; a la derecha,
   botones arriba y debajo el estado de 13 (alineado a la derecha, a la altura del plan) */
.coach-ficha-cab { min-height: 60px; gap: var(--gf-gap-md); align-items: flex-start; }
.coach-ficha-avatar { width: 56px; height: 56px; font-size: 18px; font-weight: 700; color: var(--gf-bg); }
.coach-ficha-cab-txt { align-self: center; }
.coach-panel-nombre { font-family: var(--gf-font-ui); font-size: 16px; font-weight: 700; line-height: 22px; color: var(--gf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coach-ficha-plan { font-size: var(--gf-text-body); color: var(--gf-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coach-ficha-cab-der { flex: 0 1 auto; min-width: 0; max-width: 55%; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.coach-ficha-cab-der .coach-panel-cab-btns { align-items: flex-start; }
.coach-ficha-cab .coach-panel-estado { margin: 0; max-width: 100%; justify-content: flex-end; text-align: right; line-height: 17px; }
.coach-estado-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Actualizar" (≈ 114 × 38) y cerrar (38 × 38): discretos, con borde fino */
.coach-panel-act { height: 38px; min-width: 114px; justify-content: center; padding: 0 14px; font-size: var(--gf-text-body); border: var(--gf-border-width) solid var(--gf-border-button); border-radius: var(--gf-radius-btn); color: var(--gf-text); }
.coach-panel-act .coach-ico { width: 16px; height: 16px; }
.coach-panel-x { width: 38px; height: 38px; border: var(--gf-border-width) solid var(--gf-border-button); border-radius: var(--gf-radius-btn); }
.coach-panel-x .coach-ico { width: 18px; height: 18px; }

/* Pestañas (≈ 48 px): texto de 14 px, íconos de 18 px; activa en lima con texto oscuro */
.coach-ficha-tabs { height: 48px; padding: 4px; gap: 4px; margin: var(--gf-gap-md) 0 var(--gf-gap-lg); box-sizing: border-box; align-items: stretch; background: var(--gf-surface); border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius); }
.coach-ftab { height: 100%; padding: 0 14px; gap: 8px; font-size: var(--gf-text-body); font-weight: 400; border-radius: var(--gf-radius-btn); color: var(--gf-text-muted); }
.coach-ftab .coach-ico { width: 18px; height: 18px; color: var(--gf-icon); }
.coach-ftab:hover { color: var(--gf-text); }
.coach-ftab.activa { background: var(--gf-accent); color: var(--gf-accent-text); font-weight: 400; }
.coach-ftab.activa .coach-ico { color: var(--gf-accent-text); }
/* Contador de check-ins sin revisar: círculo lima de 22 px con texto oscuro (se oculta si son 0) */
.coach-ftab-num { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--gf-accent); color: var(--gf-accent-text); font-size: var(--gf-text-min); font-weight: 700; }
.coach-ftab-num[hidden] { display: none; }
/* En la pestaña activa (ya lima) el círculo se invierte para que se siga viendo */
.coach-ftab.activa .coach-ftab-num { background: var(--gf-accent-text); color: var(--gf-accent); }

/* Fila 1 del Resumen: tres indicadores de igual alto */
.coach-ind-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gf-gap-lg); align-items: stretch; }
.coach-ind {
  display: flex; flex-direction: column; gap: var(--gf-gap-sm); min-width: 0; padding: var(--gf-gap-lg);
  background: var(--gf-surface); border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius);
}
.coach-ind-clic { cursor: pointer; }
.coach-ind-clic:hover { border-color: var(--gf-border-button); }
.coach-ind-clic:focus-visible { outline: 2px solid var(--gf-accent); outline-offset: 2px; }
.coach-ind-cab { display: flex; align-items: center; gap: 10px; }
.coach-ind-cab .coach-ico { width: 22px; height: 22px; color: var(--gf-icon); }
.coach-ind-tit { margin: 0; flex: 1; min-width: 0; font-family: var(--gf-font-ui); font-size: var(--gf-text-title); font-weight: 400; color: var(--gf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-ind-cuerpo { display: flex; flex-direction: column; gap: var(--gf-gap-sm); min-width: 0; }
.coach-ind-nombre { font-size: 20px; font-weight: 400; line-height: 1.2; color: var(--gf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-ind-fase { font-size: var(--gf-text-min); color: var(--gf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-ind-semana { font-size: var(--gf-text-body); color: var(--gf-text); }
.coach-ind-barra { height: 5px; border-radius: 3px; background: var(--gf-border); overflow: hidden; }
.coach-ind-barra > i { display: block; height: 100%; background: var(--gf-accent); }
.coach-ind-lin { display: flex; align-items: flex-start; gap: var(--gf-gap-sm); font-size: var(--gf-text-min); line-height: 18px; color: var(--gf-text-muted); }
.coach-ind-lin .coach-ico { width: 18px; height: 18px; flex: none; color: var(--gf-icon); }
/* Si la tarjeta es angosta, la línea baja a una segunda línea en vez de cortarse */
.coach-ind-lin span { min-width: 0; overflow-wrap: anywhere; }
.coach-ind-vacio { font-size: var(--gf-text-body); color: var(--gf-text); }
.coach-ind-vacio-txt { font-size: var(--gf-text-min); line-height: 1.4; color: var(--gf-text-muted); }
.coach-ind-ver { margin-top: auto; padding-top: 4px; display: flex; align-items: center; justify-content: space-between; font-size: var(--gf-text-body); color: var(--gf-text); }
.coach-ind-ver .coach-ico { width: 18px; height: 18px; color: var(--gf-icon); }
.coach-ind-clic:hover .coach-ind-ver .coach-ico { color: var(--gf-accent); }

/* Ficha angosta (menos de 720 px) o celular: los indicadores pasan a una sola columna */
@container ficha (max-width: 719px) {
  .coach-ind-fila { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 999px) {
  .coach-ind-fila { grid-template-columns: minmax(0, 1fr); }
  .coach-panel-nombre { font-size: 22px; }
}

/* ─────────────────────────────────────────────────
   B5-4 — Filas 2 y 3 del Resumen, tarjetas, botones y alto, según REGLAS_DISENO_APP_MAESTRA.md
   (6.6 y 6.7). Pantalla de referencia: 1536 × 729 px.
   ───────────────────────────────────────────────── */
:root { --linea-ficha: var(--gf-divider); }

/* Resumen: tres filas con 16 px entre ellas */
.coach-resumen { display: flex; flex-direction: column; gap: var(--gf-gap-lg); }

/* Tarjetas con los colores de la regla */
.coach-card { background: var(--gf-surface); border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius); padding: var(--gf-gap-lg); }
.coach-card-cab { margin-bottom: 6px; gap: 10px; }
.coach-card-ir { padding: 0; width: 22px; height: 22px; align-items: center; justify-content: center; }
.coach-card-ico { color: var(--gf-icon); }
.coach-card-ico .coach-ico { width: 22px; height: 22px; }
.coach-card-tit { font-size: var(--gf-text-title); color: var(--gf-text); }
.coach-card .coach-panel-datos div { padding: 6px 0; }

/* Indicadores: menos espacio interno para ganar alto (la regla no fija estos espacios) */
.coach-ind { gap: 6px; }
.coach-ind-cuerpo { gap: 6px; }
.coach-ind-ver { padding-top: 0; }

/* Fila 2: Check-ins recientes | Progreso en fotos */
.coach-fila2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gf-gap-lg); align-items: stretch; }
.coach-chk-lista { display: flex; flex-direction: column; }
.coach-chk-fila {
  display: flex; align-items: center; gap: var(--gf-gap-md); width: 100%; height: 40px; padding: 0;
  background: none; border: none; border-bottom: var(--gf-border-width) solid var(--gf-divider);
  color: var(--gf-text); font-size: var(--gf-text-min); text-align: left; cursor: pointer;
}
.coach-chk-fila { font-weight: 400; }
.coach-chk-fila:last-child { border-bottom: none; }
.coach-chk-fecha { flex: none; width: 84px; color: var(--gf-text-muted); }
.coach-chk-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-chk-fila .coach-ico { width: 18px; height: 18px; flex: none; color: var(--gf-icon); }
.coach-chk-fila:hover .coach-ico { color: var(--gf-accent); }
.coach-fotos { display: flex; align-items: flex-end; gap: var(--gf-gap-md); }
.coach-fotos-cols { flex: 1; min-width: 0; display: flex; gap: var(--gf-gap-md); }
.coach-foto-col { flex: 1 1 0; min-width: 0; max-width: 142px; }
.coach-foto-sil { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 142 / 76; background: var(--gf-placeholder); border-radius: var(--gf-radius-btn); color: var(--gf-surface); }
.coach-fotos-nota { align-self: center; flex: 1; min-width: 0; }
/* Visor de foto en grande: botón X arriba a la derecha y aviso discreto abajo; un clic en cualquier parte lo cierra */
.coach-foto-visor { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 56px 16px; background: rgba(0, 0, 0, 0.95); cursor: pointer; }
.coach-foto-visor img { max-width: 100%; max-height: 100%; border-radius: var(--gf-radius-btn, 5px); }
.coach-foto-visor-x { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: var(--gf-border-width, 1px) solid var(--gf-border-button, #465463); border-radius: var(--gf-radius-btn, 5px); color: var(--gf-text, #fff); cursor: pointer; }
.coach-foto-visor-x:hover, .coach-foto-visor-x:focus-visible { border-color: var(--gf-accent, #CCFF00); outline: none; }
.coach-foto-visor-x .coach-ico { width: 20px; height: 20px; }
.coach-foto-visor-txt { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font-size: var(--gf-text-min, 13px); color: var(--gf-text-muted, #9aa7b4); pointer-events: none; }
.coach-foto-sil { position: relative; padding: 0; border: none; font: inherit; cursor: pointer; }
.coach-foto-sil:hover { outline: 1px solid var(--gf-accent); }
.coach-foto-sil:focus-visible { outline: 2px solid var(--gf-accent); outline-offset: 2px; }
.coach-foto-sil .coach-ico { width: 28px; height: 28px; }
.coach-foto-rot { position: absolute; top: 4px; left: 6px; font-size: var(--gf-text-min); color: var(--gf-text); }
.coach-foto-et { margin-top: 4px; font-size: var(--gf-text-min); color: var(--gf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Botón principal de contorno (abre algo destacado): 38 px, 14 px, lima sin relleno */
.coach-btn-contorno { flex: none; height: 38px; padding: 0 14px; font-size: var(--gf-text-body); font-weight: 400; color: var(--gf-accent); background: transparent; border: var(--gf-border-width) solid var(--gf-accent); border-radius: var(--gf-radius-btn); cursor: pointer; white-space: nowrap; }
.coach-btn-contorno:hover { background: var(--gf-surface-selected); }

/* Fila 3: Contrato, Perfil y Acciones (≈ 285 / 300 / 580). Con la ficha ancha van en tres columnas; con menos ancho,
   Contrato y Perfil arriba y Acciones debajo; en una sola columna, en ese mismo orden. */
.coach-fila3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gf-gap-lg); align-items: stretch; }
@media (min-width: 1000px) {
  @container ficha (min-width: 720px) {
    .coach-fila3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coach-fila3 > .coach-card-acciones { grid-column: 1 / -1; }
  }
  @container ficha (min-width: 1000px) {
    .coach-fila3 { grid-template-columns: minmax(0, 285fr) minmax(0, 300fr) minmax(0, 580fr); }
    .coach-fila3 > .coach-card-acciones { grid-column: auto; }
  }
}
@container ficha (max-width: 719px) { .coach-fila2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 999px) { .coach-fila2 { grid-template-columns: minmax(0, 1fr); } }

/* Perfil: 2 columnas con líneas finas (el espacio entre celdas deja ver el color de la línea); solo los datos que existen */
.coach-perfil-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--gf-divider); }
.coach-perfil-celda { min-width: 0; padding: 8px 12px; background: var(--gf-surface); }
.coach-perfil-celda:nth-child(odd) { padding-left: 0; }
.coach-perfil-celda:nth-child(even) { padding-right: 0; }
.coach-perfil-celda:last-child:nth-child(odd) { grid-column: 1 / -1; padding-right: 0; }
.coach-perfil-et { color: var(--gf-text-muted); }
.coach-perfil-val { color: var(--gf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Botones de la ficha (6.7): radio 5, fondo transparente, borde --gf-border-button */
.coach-panel .coach-pill { background: transparent; border: var(--gf-border-width) solid var(--gf-border-button); border-radius: var(--gf-radius-btn); color: var(--gf-text); }
.coach-panel .coach-pill:hover { background: var(--gf-surface-2); border-color: var(--gf-accent); color: var(--gf-text); }
.coach-panel .coach-pill.resaltado, .coach-panel .coach-pill.resaltado:hover { color: var(--gf-accent); }
.coach-panel .coach-pill:disabled, .coach-panel .coach-pill:disabled:hover { background: var(--gf-surface-2); border-color: var(--gf-border); color: var(--gf-text-muted); cursor: not-allowed; }
.coach-panel .coach-pill.suave, .coach-panel .coach-pill.suave:hover { border-color: var(--gf-border); color: var(--gf-text-muted); }
@media (min-width: 1000px) {
  .coach-acciones-grid .coach-pill, .coach-acciones-grid .coach-pill.suave { height: 34px; line-height: 32px; }
}
/* "Marcar inactivo" / "Marcar activo": a todo el ancho de la tarjeta */
.coach-acciones-aparte { grid-template-columns: minmax(0, 1fr); }

/* ─────────────────────────────────────────────────
   B5-5a — Marco común de las ventanas (regla 6.9), Check-ins y Comparar fechas.
   Pantalla de referencia: 1536 × 729 px. Ventana de ≈ 1100 px de ancho y hasta 650 px de alto.
   ───────────────────────────────────────────────── */
.coach-ventana { padding: 20px; }
.coach-ventana-box {
  --cv-ancho: 1100px;
  box-sizing: border-box; display: flex; flex-direction: column; width: min(var(--cv-ancho), 100%);
  height: min(650px, calc(100vh - 40px)); max-height: calc(100vh - 40px); overflow: hidden;
  background: var(--gf-surface); border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius);
  color: var(--gf-text); font-family: var(--gf-font-ui); font-size: var(--gf-text-body);
}
.coach-ventana-box:focus { outline: none; }
.coach-ventana-box.cv-alto-auto { height: auto; }

/* Barra de título: nombre de la ventana, acciones y la X */
.cv-barra { flex: none; display: flex; align-items: center; gap: var(--gf-gap-md); height: 52px; padding: 0 var(--gf-gap-lg); border-bottom: var(--gf-border-width) solid var(--gf-border); }
.cv-titulo { margin: 0; flex: 1; min-width: 0; font-family: var(--gf-font-ui); font-size: 18px; font-weight: 400; color: var(--gf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-acciones { display: flex; align-items: center; gap: 8px; }
.cv-x { display: flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; padding: 0; background: transparent; color: var(--gf-text); border: var(--gf-border-width) solid var(--gf-border-button); border-radius: var(--gf-radius-btn); cursor: pointer; }
.cv-x .coach-ico { width: 18px; height: 18px; }
.cv-x:hover, .cv-x:focus-visible { border-color: var(--gf-accent); outline: none; }

/* Franja del cliente: avatar, nombre (como en la lista), plan y estado en una línea */
.cv-franja { --estado-color: var(--gf-on-track); flex: none; display: flex; align-items: center; gap: var(--gf-gap-md); min-height: 48px; padding: 0 var(--gf-gap-lg); background: var(--gf-surface-2); border-bottom: var(--gf-border-width) solid var(--gf-border); white-space: nowrap; overflow: hidden; }
.cv-franja.estado-urgente  { --estado-color: var(--gf-urgent); }
.cv-franja.estado-atencion { --estado-color: var(--gf-attention); }
.cv-franja.estado-porarmar { --estado-color: var(--gf-pending); }
.cv-franja.estado-aldia    { --estado-color: var(--gf-on-track); }
.cv-franja.estado-inactivo { --estado-color: var(--gf-text-muted); }
.cv-avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--estado-color); color: var(--gf-bg); font-size: 12px; font-weight: 700; }
.cv-fr-nombre { font-size: 16px; font-weight: 700; line-height: 22px; color: var(--gf-text); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cv-fr-plan { font-size: var(--gf-text-min); color: var(--gf-text-muted); }
.cv-fr-estado { margin-left: auto; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--gf-text-min); color: var(--gf-text-muted); overflow: hidden; text-overflow: ellipsis; }
.cv-fr-estado strong { color: var(--estado-color); font-weight: 700; }
.cv-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--estado-color); }

/* Cuerpo y columnas: el scroll es interno por columna, no de toda la ventana */
.cv-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--gf-gap-md); padding: var(--gf-gap-lg); overflow: hidden; }
.cv-cuerpo > .coach-empty { margin: auto; }
.cv-cols { flex: 1; min-height: 0; display: grid; gap: var(--gf-gap-lg); }
.cv-cols-checkins { grid-template-columns: 340px minmax(0, 1fr); }
.cv-col { min-height: 0; overflow-y: auto; }
.cv-col, .cv-det-info, .cv-cuerpo { scrollbar-width: thin; scrollbar-color: var(--gf-border-button) transparent; }
.cv-col::-webkit-scrollbar, .cv-det-info::-webkit-scrollbar, .cv-cuerpo::-webkit-scrollbar { width: 8px; }
.cv-col::-webkit-scrollbar-thumb, .cv-det-info::-webkit-scrollbar-thumb, .cv-cuerpo::-webkit-scrollbar-thumb { background: var(--gf-border-button); border-radius: 4px; }
.cv-col::-webkit-scrollbar-track, .cv-det-info::-webkit-scrollbar-track, .cv-cuerpo::-webkit-scrollbar-track { background: transparent; }

/* Botones (6.7): contorno; solo uno principal lleno en lima por ventana */
.cv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; font: inherit; font-size: var(--gf-text-body); font-weight: 400; color: var(--gf-text); background: transparent; border: var(--gf-border-width) solid var(--gf-border-button); border-radius: var(--gf-radius-btn); cursor: pointer; white-space: nowrap; }
.cv-btn:hover { background: var(--gf-surface-2); border-color: var(--gf-accent); }
.cv-btn:disabled { background: var(--gf-surface-2); border-color: var(--gf-border); color: var(--gf-text-muted); cursor: not-allowed; }
.cv-btn-peq { height: 32px; padding: 0 12px; font-size: var(--gf-text-min); }
.cv-btn-principal { height: 38px; background: var(--gf-accent); border-color: var(--gf-accent); color: var(--gf-accent-text); }
.cv-btn-principal:hover { background: var(--gf-accent); filter: brightness(1.08); }
.cv-btn-principal:disabled { background: var(--gf-surface-2); border-color: var(--gf-border); color: var(--gf-text-muted); filter: none; }
.cv-btn-peligro { border-color: var(--gf-urgent); color: var(--gf-urgent); }
.cv-btn-peligro:hover { background: var(--gf-surface-2); border-color: var(--gf-urgent); }

/* Píldoras de estado */
.cv-pill { flex: none; padding: 1px 8px; font-size: var(--gf-text-min); font-weight: 400; line-height: 18px; border: var(--gf-border-width) solid var(--gf-border-button); border-radius: 999px; white-space: nowrap; }
.cv-pill.ok { color: var(--gf-on-track); border-color: var(--gf-on-track); }
.cv-pill.pend { color: var(--gf-attention); border-color: var(--gf-attention); }

/* Campos: fechas, listas y texto con el borde de la app */
.cv-tira { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gf-gap-md); padding: var(--gf-gap-md); background: var(--gf-surface-2); border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius); }
.cv-tira[hidden] { display: none; }
.cv-tira label { display: flex; flex-direction: column; gap: 4px; font-size: var(--gf-text-min); color: var(--gf-text-muted); }
.cv-tira input[type="date"], .cv-select { height: 36px; padding: 0 10px; box-sizing: border-box; font: inherit; font-size: var(--gf-text-body); color: var(--gf-text); background: var(--gf-bg); border: var(--gf-border-width) solid var(--gf-border-button); border-radius: var(--gf-radius-btn); color-scheme: dark; }
.cv-select { width: 100%; }
.cv-tira input:focus, .cv-select:focus, .cv-nota:focus { outline: none; border-color: var(--gf-accent); }
.cv-mensaje { flex: 1 1 100%; font-size: var(--gf-text-body); color: var(--gf-text-muted); }
.cv-mensaje.error { color: var(--gf-urgent); }
.cv-mensaje.ok { color: var(--gf-accent); }

/* Check-ins: lista a la izquierda */
.cv-lista { display: flex; flex-direction: column; border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius); background: var(--gf-surface); }
.cv-fila { flex: none; display: flex; align-items: center; gap: var(--gf-gap-sm); width: 100%; height: 56px; padding: 0 var(--gf-gap-md); box-sizing: border-box; font: inherit; font-size: var(--gf-text-min); color: var(--gf-text); text-align: left; background: transparent; border: none; border-bottom: var(--gf-border-width) solid var(--gf-divider); cursor: pointer; }
.cv-fila:last-child { border-bottom: none; }
.cv-fila:hover { background: var(--gf-surface-2); }
.cv-fila.sel { background: var(--gf-surface-selected); box-shadow: inset 2px 0 0 var(--gf-accent); }
.cv-fila:focus-visible { outline: 2px solid var(--gf-accent); outline-offset: -2px; }
.cv-fila-fecha { color: var(--gf-text-muted); }
.cv-fila-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Check-ins: el elegido a la derecha (arriba lo que se lee, abajo la respuesta siempre a la vista) */
.cv-detalle { display: flex; flex-direction: column; gap: var(--gf-gap-md); overflow: hidden; }
.cv-det-info { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.cv-det-cab { display: flex; align-items: center; gap: var(--gf-gap-md); margin-bottom: var(--gf-gap-md); }
.cv-det-fecha { font-size: var(--gf-text-title); color: var(--gf-text); }
.cv-lbl { margin: 0 0 6px; font-size: var(--gf-text-min); color: var(--gf-text-muted); }
.cv-fotos { display: flex; flex-wrap: wrap; gap: var(--gf-gap-md); margin-bottom: var(--gf-gap-md); }
.cv-foto { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cv-foto img { width: 120px; height: 90px; object-fit: cover; cursor: pointer; border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius-btn); }
.cv-det-texto { font-size: var(--gf-text-body); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.cv-det-resp { flex: none; display: flex; flex-direction: column; gap: 8px; padding-top: var(--gf-gap-md); border-top: var(--gf-border-width) solid var(--gf-divider); }
.cv-frases { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-nota { width: 100%; height: 110px; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: var(--gf-text-body); color: var(--gf-text); background: var(--gf-bg); border: var(--gf-border-width) solid var(--gf-border-button); border-radius: var(--gf-radius-btn); resize: none; }
.cv-det-resp .cv-btn-principal { align-self: flex-start; }

/* Comparar fechas: dos fotos lado a lado */
.cv-cuerpo:has(.cv-cols-cmp) { overflow-y: auto; }
.cv-cols-cmp { grid-template-columns: 1fr 1fr; align-items: start; }
.cv-cmp-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cv-cmp-fecha { font-size: var(--gf-text-title); color: var(--gf-accent); text-align: center; }
.cv-cmp-caja { display: flex; align-items: center; justify-content: center; min-height: 160px; overflow: hidden; background: var(--gf-bg); border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius); }
.cv-cmp-caja img { display: block; width: 100%; height: auto; max-height: calc(100vh - 300px); object-fit: contain; }
.cv-cmp-cargando { padding: var(--gf-gap-md); font-size: var(--gf-text-min); color: var(--gf-text-muted); text-align: center; }

/* ─────────────────────────────────────────────────
   B5-5b — Ventana Entrenamiento (Programa y Entrenamientos en una sola) y ajustes de Check-ins.
   ───────────────────────────────────────────────── */
.cv-cols-entren { grid-template-columns: 440px minmax(0, 1fr); }
.cv-cols-entren > .cv-col, .cv-cols-entren > .cv-der { min-height: 0; }

/* Izquierda: programas y fases (con scroll interno) */
.cv-prog { display: flex; flex-direction: column; gap: var(--gf-gap-md); padding-right: 4px; }
.cv-programa { flex: none; background: var(--gf-surface); border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius); }
.cv-prog-cab, .cv-fase-cab { display: flex; align-items: center; gap: var(--gf-gap-sm); width: 100%; box-sizing: border-box; font: inherit; color: var(--gf-text); text-align: left; background: transparent; border: none; cursor: pointer; }
.cv-prog-cab { min-height: 44px; padding: 8px var(--gf-gap-md) 4px; font-size: var(--gf-text-title); }
.cv-prog-cab .coach-ico, .cv-fase-cab .coach-ico { flex: none; width: 16px; height: 16px; color: var(--gf-icon); transition: transform 0.12s; }
.cv-prog-cab[aria-expanded="true"] .coach-ico, .cv-fase-cab[aria-expanded="true"] .coach-ico { transform: rotate(90deg); }
.cv-prog-cab:hover, .cv-fase-cab:hover { background: var(--gf-surface-2); }
.cv-prog-cab:focus-visible, .cv-fase-cab:focus-visible { outline: 2px solid var(--gf-accent); outline-offset: -2px; }
.cv-prog-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-prog-n { flex: none; font-size: var(--gf-text-min); color: var(--gf-text-muted); }
.cv-prog-sem { display: flex; align-items: center; gap: var(--gf-gap-md); padding: 0 var(--gf-gap-md) var(--gf-gap-sm); font-size: var(--gf-text-body); color: var(--gf-text); }
.cv-prog-sem span { flex: none; }
.cv-barra-prog { flex: 1; height: 5px; border-radius: 3px; background: var(--gf-border); overflow: hidden; }
.cv-barra-prog > i { display: block; height: 100%; background: var(--gf-accent); }
.cv-prog-cuerpo { border-top: var(--gf-border-width) solid var(--gf-divider); }
.cv-fase { border-bottom: var(--gf-border-width) solid var(--gf-divider); }
.cv-fase-cab { min-height: 40px; padding: 0 var(--gf-gap-md); font-size: var(--gf-text-body); }
.cv-fase-nombre { flex: none; }
.cv-fase-fechas { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--gf-text-min); color: var(--gf-text-muted); }
.cv-rut { display: flex; align-items: center; gap: var(--gf-gap-sm); padding: 8px var(--gf-gap-md) 8px 36px; border-top: var(--gf-border-width) solid var(--gf-divider); }
.cv-rut-txt { flex: 1; min-width: 0; }
.cv-rut-nombre { font-size: var(--gf-text-body); color: var(--gf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-rut-dias { font-size: var(--gf-text-min); color: var(--gf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-prog-acc { display: flex; justify-content: space-between; gap: var(--gf-gap-sm); padding: var(--gf-gap-md); }

/* Derecha: calendario compacto, resumen y acción principal */
.cv-der { display: flex; flex-direction: column; gap: var(--gf-gap-lg); min-width: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gf-border-button) transparent; }
.cv-cal-fila { display: flex; align-items: flex-start; gap: var(--gf-gap-lg); }
.cv-cal { flex: none; width: 332px; max-width: 100%; }
.cv-cal-nav { display: flex; align-items: center; justify-content: space-between; height: 36px; margin-bottom: 4px; }
.cv-cal-mes { font-size: var(--gf-text-title); color: var(--gf-text); }
.cv-cal-btn { width: 36px; padding: 0; font-size: 18px; }
.cv-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cv-dow { height: 24px; line-height: 24px; text-align: center; font-size: var(--gf-text-min); color: var(--gf-text-muted); }
.cv-dia { display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 40px; padding: 0; font: inherit; font-size: var(--gf-text-body); color: var(--gf-text-muted); background: var(--gf-surface); border: var(--gf-border-width) solid var(--gf-divider); border-radius: var(--gf-radius-btn); }
.cv-dia.vacio { visibility: hidden; }
.cv-dia.hoy { color: var(--gf-text); box-shadow: inset 0 0 0 1px var(--gf-text-muted); }
.cv-dia.ejecutado { color: var(--gf-accent-text); background: var(--gf-accent); border-color: var(--gf-accent); cursor: pointer; }
.cv-dia.ejecutado:hover { filter: brightness(1.08); }
.cv-dia.cruzo-dia { position: relative; }
.cv-dia.cruzo-dia::after { content: ""; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; background: var(--gf-urgent); border: 1px solid var(--gf-accent-text); }
.cv-dia.ejecutado:focus-visible { outline: 2px solid var(--gf-text); outline-offset: 1px; }
.cv-dia.pendiente { color: var(--gf-text); background: transparent; border-color: var(--gf-accent); }
.cv-dia.no-realizado { color: var(--gf-text); background: rgba(255, 69, 87, 0.25); border-color: var(--gf-urgent); }
.cv-leyenda { display: flex; flex-wrap: wrap; gap: 6px var(--gf-gap-md); margin-top: var(--gf-gap-sm); font-size: var(--gf-text-min); color: var(--gf-text-muted); }
.cv-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cv-punto { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; box-sizing: border-box; }
.cv-punto.ejecutado { background: var(--gf-accent); }
.cv-punto.pendiente { border: 1px solid var(--gf-accent); }
.cv-punto.no-realizado { background: rgba(255, 69, 87, 0.45); border: 1px solid var(--gf-urgent); }
.cv-resumen { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: var(--gf-gap-md); background: var(--gf-surface); border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius); }
.cv-resumen:empty { display: none; }
.cv-res-tit { font-size: var(--gf-text-title); color: var(--gf-text); }
.cv-res-lin { display: flex; align-items: center; gap: 8px; font-size: var(--gf-text-body); color: var(--gf-text-muted); }
.cv-der-acc { display: flex; gap: var(--gf-gap-sm); }

/* Check-ins: fecha en una sola línea (más pequeña) para que cada fila mida ≈ 56 px */
.cv-fila-fecha { flex: none; width: auto; font-size: 12px; white-space: nowrap; }

/* ─────────────────────────────────────────────────
   B5-5c — Ventana Plan de alimentación, ajustes de Entrenamiento y Check-ins, modo de una columna
   y pestañas de la ficha en ventana angosta.
   ───────────────────────────────────────────────── */

/* Entrenamiento: resumen del mes en 14 px normal, leyenda en 13 px, y "Esta semana / Último" en una franja aparte */
.cv-res-tit, .cv-res-lin { font-family: var(--gf-font-ui); font-size: var(--gf-text-body); font-weight: 400; }
.cv-res-tit { color: var(--gf-text); }
.cv-res-n { margin-left: auto; font-weight: 400; color: var(--gf-text); }
.cv-leyenda { font-size: var(--gf-text-min); font-weight: 400; }
.cv-semana { display: flex; flex-direction: column; gap: 6px; padding: var(--gf-gap-md); background: var(--gf-surface); border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius); }
.cv-semana:empty { display: none; }
.cv-sem-lin { display: flex; align-items: center; gap: 8px; font-family: var(--gf-font-ui); font-size: var(--gf-text-body); font-weight: 400; color: var(--gf-text-muted); white-space: nowrap; }
.cv-sem-lin .coach-ico { flex: none; width: 18px; height: 18px; color: var(--gf-icon); }
.cv-der-acc[hidden] { display: none; }
.cv-vacio-prog { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gf-gap-md); }
.cv-vacio-prog .coach-empty { padding: 0; text-align: left; }

/* Check-ins: "Descargar todas las fotos" — panel angosto anclado a la derecha (no tapa la fecha ni la píldora) */
.cv-cuerpo { position: relative; }
.cv-tira { position: absolute; z-index: 3; top: 8px; right: var(--gf-gap-lg); width: 252px; box-sizing: border-box; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; padding: var(--gf-gap-md); }
.cv-tira[hidden] { display: none; }
.cv-tira label { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.cv-tira input[type="date"] { width: 150px; height: 32px; }
.cv-tira .cv-btn { height: 32px; font-size: var(--gf-text-min); }
.cv-tira .cv-mensaje { flex: none; font-size: var(--gf-text-min); }

/* Plan de alimentación: campos del formulario "Nuevo plan" del panel (aviso, archivos, nota, progreso, acciones) */
.cv-aviso { flex: none; display: flex; align-items: center; gap: 8px; font-size: var(--gf-text-min); color: var(--gf-text-muted); }
.cv-aviso .coach-ico { flex: none; width: 18px; height: 18px; color: var(--gf-icon); }
.cv-campo { display: flex; flex-direction: column; gap: 6px; }
.cv-campo .cv-lbl { margin: 0; }
.cv-file { position: relative; display: flex; align-items: center; gap: var(--gf-gap-md); min-width: 0; }
.cv-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.cv-file-input:focus-visible + label { outline: 2px solid var(--gf-accent); outline-offset: 2px; }
.cv-btn-lima { flex: none; color: var(--gf-accent); border-color: var(--gf-accent); }
.cv-btn-lima:hover { background: var(--gf-surface-selected); }
.cv-file-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--gf-text-min); color: var(--gf-text-muted); }
.cv-nota-plan { height: 72px; }
.cv-contador { align-self: flex-end; font-size: 12px; color: var(--gf-text-muted); }
.cv-progreso { height: 6px; background: var(--gf-border); border-radius: 3px; overflow: hidden; }
.cv-progreso-barra { height: 100%; width: 0; background: var(--gf-accent); transition: width 0.2s; }
.cv-nuevo-acc { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gf-gap-md); }

/* Pestañas de la ficha en ficha angosta (menos de 720 px) o celular: sin íconos, menos relleno y se desplazan de lado */
.coach-ficha-tabs { max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; }
@container ficha (max-width: 719px) {
  .coach-ficha-tabs { height: 44px; }
  .coach-ftab { padding: 0 10px; gap: 6px; }
  .coach-ftab > .coach-ico { display: none; }
}

/* ─────────────────────────────────────────────────
   Ventanas en UNA COLUMNA (menos de 900 px de ancho y celular): toda la ventana hace scroll con cada bloque a su
   alto natural; la barra de título (con la X) queda siempre visible arriba; nunca es más ancha que la pantalla.
   ───────────────────────────────────────────────── */
@media (max-width: 899px) {
  .coach-ventana { padding: 0; align-items: stretch; }
  .coach-ventana-box { width: 100%; min-width: 0; max-width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; border-left: none; border-right: none; }
  .cv-barra { flex-wrap: wrap; height: auto; min-height: 52px; padding: 7px var(--gf-gap-md); row-gap: 8px; }
  .cv-titulo { order: 1; flex: 1 1 0; min-width: 0; }
  .cv-x { order: 2; min-width: 40px; min-height: 40px; }
  .cv-acciones { order: 3; flex: 1 1 100%; flex-wrap: wrap; }
  .cv-acciones .cv-btn { height: auto; min-height: 40px; padding: 6px 12px; white-space: normal; }
  .cv-franja { flex-wrap: wrap; min-height: 0; padding: 8px var(--gf-gap-md); row-gap: 4px; white-space: normal; }
  .cv-fr-estado { flex: 1 1 100%; margin-left: 0; white-space: normal; }

  /* El cuerpo es lo que se desplaza; sus bloques van uno bajo otro, sin encimarse */
  .cv-cuerpo { display: block; overflow-x: hidden; overflow-y: auto; padding: var(--gf-gap-md); }
  .cv-cuerpo > * + * { margin-top: var(--gf-gap-md); }
  .cv-cols { display: flex; flex-direction: column; gap: var(--gf-gap-lg); }
  .cv-cols > *, .cv-cols-entren > .cv-col, .cv-cols-entren > .cv-der { flex: none; width: 100%; min-width: 0; max-width: 100%; min-height: auto; overflow: visible; box-sizing: border-box; }
  .cv-cols-cmp { flex-direction: column; }
  .cv-cmp-col { width: 100%; }
  .cv-cmp-caja img { max-height: none; }
  .cv-lista { max-height: 260px; overflow-y: auto; }
  .cv-detalle, .cv-det-info { overflow: visible; flex: none; }

  .cv-der { overflow: visible; }
  .cv-cal-fila { flex-direction: column; align-items: stretch; }
  .cv-cal { width: 100%; }
  .cv-sem-lin { white-space: normal; }
  .cv-prog-acc { flex-wrap: wrap; }
  .cv-tira { position: static; width: auto; }
  .cv-tira input[type="date"] { width: 100%; max-width: 170px; }
  .cv-btn, .cv-btn-peq { min-height: 40px; }
  .cv-file { flex-wrap: wrap; }
}

/* ─────────────────────────────────────────────────
   B5-5d parte 1 — letra de las ventanas, calendario sin scroll y aviso del Plan de alimentación.
   CAUSA de los textos grandes y gruesos: css/styles.css (compartido con la app móvil) tiene la regla
   `p, label, span, select, input, button { font-size: 18px; font-weight: 700 }`. Una regla directa sobre un <span>
   gana a la herencia, así que todo <span> de una ventana sin tamaño propio (leyenda, números, franja de la semana,
   aviso...) salía en 18 px y negrita. Aquí se devuelve la herencia dentro de las ventanas con especificidad cero
   (:where): las clases propias de cada elemento siguen mandando.
   ───────────────────────────────────────────────── */
:where(.coach-ventana) :is(p, label, span, select, input, button) { font-size: inherit; font-weight: inherit; }

.cv-res-n { font-size: var(--gf-text-body); }
.cv-leyenda span { font-size: var(--gf-text-min); font-weight: 400; }
.cv-sem-lin span { font-size: var(--gf-text-body); font-weight: 400; }

/* Mes de 6 filas sin scroll: celdas de 38 px y menos espacio entre bloques de la columna derecha */
.cv-dia { height: 38px; }
.cv-der { gap: var(--gf-gap-md); }

/* Aviso del Plan de alimentación: discreto, 14 px normal, ícono pequeño */
.cv-aviso { font-size: var(--gf-text-body); font-weight: 400; }
.cv-aviso span { font-size: var(--gf-text-body); font-weight: 400; }
.cv-aviso .coach-ico { width: 16px; height: 16px; }

/* ─────────────────────────────────────────────────
   B5-5d-1 — Pie fijo y ventanas pequeñas del marco común: Editar teléfono, Marcar inactivo, Permiso de imagen,
   Editar fase (fechas), detalle de un entrenamiento, Asignar a cliente y Nuevo programa.
   ───────────────────────────────────────────────── */
.cv-pie { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px var(--gf-gap-lg); background: var(--gf-surface); border-top: var(--gf-border-width) solid var(--gf-border); }
.cv-pie .cv-pie-izq { margin-right: auto; }
.cv-chica .cv-cuerpo { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gf-border-button) transparent; }

/* Campos de las ventanas pequeñas */
.cv-input, .cv-fecha { width: 100%; height: 40px; padding: 0 12px; box-sizing: border-box; font: inherit; font-size: var(--gf-text-body); color: var(--gf-text); background: var(--gf-bg); border: var(--gf-border-width) solid var(--gf-border-button); border-radius: var(--gf-radius-btn); color-scheme: dark; }
.cv-input:focus, .cv-fecha:focus { outline: none; border-color: var(--gf-accent); }
.cv-ayuda { font-size: var(--gf-text-min); color: var(--gf-text-muted); }
.cv-texto { margin: 0; font-size: var(--gf-text-body); line-height: 1.5; color: var(--gf-text); }
.cv-texto-sec { font-size: var(--gf-text-min); color: var(--gf-text-muted); }
.cv-hoy { display: flex; align-items: center; gap: 8px; font-size: var(--gf-text-body); color: var(--gf-text-muted); }
.cv-grupo { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; padding: 0; border: none; }
.cv-grupo legend { padding: 0; margin-bottom: 6px; }
.cv-opcion { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: var(--gf-text-body); color: var(--gf-text); cursor: pointer; }
.cv-opcion input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--gf-accent); }
.cv-opcion span { font-size: var(--gf-text-body); font-weight: 400; }

/* Editar fase (solo fechas) */
.cv-fases-lista { display: flex; flex-direction: column; gap: var(--gf-gap-md); }
.cv-ff-card { flex: none; background: var(--gf-surface); border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius); }
.cv-ff-prog { padding: 10px var(--gf-gap-md); font-size: var(--gf-text-title); font-weight: 700; border-bottom: var(--gf-border-width) solid var(--gf-divider); }
.cv-ff { display: flex; align-items: center; gap: var(--gf-gap-md); padding: 8px var(--gf-gap-md); border-bottom: var(--gf-border-width) solid var(--gf-divider); }
.cv-ff-txt { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cv-ff-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--gf-text-body); }
.cv-ff-campo { flex: none; display: flex; align-items: center; gap: 6px; font-size: var(--gf-text-min); color: var(--gf-text-muted); }
.cv-ff-campo .cv-fecha { width: 150px; height: 36px; }
.cv-ff-pie { display: flex; justify-content: flex-end; padding: 10px var(--gf-gap-md); }

/* Detalle de un entrenamiento */
.cv-datos { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gf-gap-md); }
.cv-dato { padding: 10px var(--gf-gap-md); background: var(--gf-surface-2); border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius); min-width: 0; }
.cv-dato .cv-lbl { margin: 0 0 4px; }
.cv-dato-val { font-size: var(--gf-text-title); color: var(--gf-text); overflow-wrap: anywhere; }
.cv-ejercicios { flex: 1 1 auto; }
.cv-ej { padding: 10px 0; border-bottom: var(--gf-border-width) solid var(--gf-divider); }
.cv-ej:last-child { border-bottom: none; }
.cv-ej-nombre { font-size: var(--gf-text-body); color: var(--gf-text); }
.cv-ej-sets { margin-top: 2px; font-size: var(--gf-text-min); color: var(--gf-text-muted); overflow-wrap: anywhere; }

/* Negrita (Inter 700) para el nombre del programa, "Fase N" y los títulos de tarjeta del Plan: la corrección de la
   regla global de 18 px les había quitado el peso. "Esta semana" y "Último entrenamiento" quedan en letra normal. */
.cv-prog-nombre, .cv-fase-nombre { font-weight: 700; }

/* Ventanas pequeñas en una columna (menos de 900 px) o celular: tarjeta centrada con margen, no pantalla completa */
@media (max-width: 899px) {
  .coach-ventana:has(.cv-chica) { align-items: center; padding: 16px; }
  .coach-ventana-box.cv-chica { width: min(var(--cv-ancho), 100%); height: auto; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius); }
  .cv-pie { flex-wrap: wrap; }
  .cv-pie .cv-btn { flex: 1 1 auto; }
  .cv-pie .cv-pie-izq { margin-right: 0; }
  .cv-ff { flex-wrap: wrap; }
  .cv-ff-txt { flex: 1 1 100%; }
  .cv-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─────────────────────────────────────────────────
   B5-5d-2a — Ventana "Editar fase / Nueva fase" (editor de bloques V2): datos a la izquierda, bloques a la derecha
   con scroll interno y pie fijo. Campos de 40 px, Inter normal, sin mayúsculas.
   ───────────────────────────────────────────────── */
.cv-cols-fase { grid-template-columns: 300px minmax(0, 1fr); }
.cv-fase-datos { display: flex; flex-direction: column; gap: var(--gf-gap-lg); padding-right: 4px; }
.cv-dias { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-dias .dow-pill { min-width: 36px; height: 36px; padding: 0 4px; box-sizing: border-box; font: inherit; font-size: var(--gf-text-min); font-weight: 400; color: var(--gf-text-muted); background: transparent; border: var(--gf-border-width) solid var(--gf-border-button); border-radius: var(--gf-radius-btn); cursor: pointer; }
.cv-dias .dow-pill:hover { border-color: var(--gf-accent); }
.cv-dias .dow-pill.selected { color: var(--gf-accent-text); background: var(--gf-accent); border-color: var(--gf-accent); }
.cv-fase-resumen { font-size: var(--gf-text-min); color: var(--gf-text-muted); }
.cv-fase-bloques { display: flex; flex-direction: column; gap: var(--gf-gap-md); padding-right: 4px; }
.cv-bloques-lista { display: flex; flex-direction: column; gap: var(--gf-gap-md); }
.cv-btn-agregar { align-self: flex-start; flex: none; }

.cv-bloque { display: flex; flex-direction: column; gap: 10px; padding: var(--gf-gap-md); background: var(--gf-surface); border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius); }
.cv-bloque-cab { display: flex; align-items: center; gap: 10px; }
.cv-bloque-num { flex: none; font-size: var(--gf-text-body); font-weight: 400; color: var(--gf-text); }
.cv-bloque .cv-select, .cv-bloque .cv-input { height: 40px; }
.cv-sel-tipo { width: 160px; }
.cv-bloque-acc { margin-left: auto; display: flex; gap: 6px; }
.cv-btn-icono { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: var(--gf-text); background: transparent; border: var(--gf-border-width) solid var(--gf-border-button); border-radius: var(--gf-radius-btn); cursor: pointer; }
.cv-btn-icono .coach-ico { width: 16px; height: 16px; }
.cv-btn-icono:hover { border-color: var(--gf-accent); }
.cv-btn-icono.cv-btn-peligro { color: var(--gf-urgent); border-color: var(--gf-urgent); }
.cv-bloque-campos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cv-mini { display: inline-flex; align-items: center; gap: 8px; font-size: var(--gf-text-min); font-weight: 400; color: var(--gf-text-muted); }
.cv-num { width: 64px; height: 40px; padding: 0 8px; box-sizing: border-box; font: inherit; font-size: var(--gf-text-body); color: var(--gf-text); background: var(--gf-bg); border: var(--gf-border-width) solid var(--gf-border-button); border-radius: var(--gf-radius-btn); color-scheme: dark; }
.cv-num:focus { outline: none; border-color: var(--gf-accent); }
.cv-chk { display: inline-flex; align-items: center; gap: 8px; font-size: var(--gf-text-min); font-weight: 400; color: var(--gf-text-muted); cursor: pointer; }
.cv-chk input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--gf-accent); }
.cv-ejercicios-lista { display: flex; flex-direction: column; }
.cv-ej2 { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: var(--gf-border-width) solid var(--gf-divider); }
.cv-ej2-fila1 { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cv-ej2 > .cv-select { height: 40px; }
.cv-ej2-campos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cv-agregar-ej { align-self: flex-start; }

/* Una columna (menos de 900 px) o celular */
@media (max-width: 899px) {
  .cv-ej2-fila1 { grid-template-columns: minmax(0, 1fr) auto; }
  .cv-ej2-fila1 .ejercicio-filtro-grupo { grid-column: 1 / -1; }
  .cv-sel-tipo { width: auto; flex: 1; min-width: 0; }
  .cv-btn-icono { width: 40px; height: 40px; }
  .cv-num { min-height: 40px; }
  .cv-dias .dow-pill { height: 40px; }
}

/* ─────────────────────────────────────────────────
   B5-5d-3a — Pantalla de la Biblioteca de programas: filas de 64 px, botones según la regla (6.10).
   Las reglas base de .coach-client-row y el bloque móvil de la Biblioteca se conservan (la pantalla las usa); aquí se anulan
   en escritorio con reglas más específicas o con @media. En pantallas angostas (menos de 1000 px) sigue el diseño de celular de siempre.
   ───────────────────────────────────────────────── */
/* styles.css (compartido con la app móvil) pone 18 px y negrita a todo <span>/<label>: aquí se devuelve la herencia en la
   pestaña (especificidad cero; las clases propias siguen mandando) */
:where(#coach-tab-biblioteca) :is(span, label) { font-size: inherit; font-weight: inherit; }

/* "+ Nuevo programa": único botón lleno lima de la pantalla */
#btn-nueva-biblioteca { height: 38px; padding: 0 16px; font-size: var(--gf-text-body); font-weight: 400; color: var(--gf-accent-text); background: var(--gf-accent); border: var(--gf-border-width) solid var(--gf-accent); border-radius: var(--gf-radius-btn); }
#btn-nueva-biblioteca:hover { background: var(--gf-accent); color: var(--gf-accent-text); filter: brightness(1.08); }

/* "Eliminar": contorno rojo --gf-urgent (antes con color fijo en línea) */
#coach-biblioteca-list .coach-pill[data-action="eliminar"] { border-color: var(--gf-urgent); color: var(--gf-urgent); }

/* Píldora de nivel */
#coach-biblioteca-list .bib-nivel-pill { padding: 0 8px; line-height: 18px; color: var(--gf-text); }

@media (min-width: 1000px) {
  #coach-biblioteca-list { gap: 8px; }
  #coach-biblioteca-list .coach-client-row {
    box-sizing: border-box; height: 64px; padding: 0 var(--gf-gap-lg); flex-wrap: nowrap; gap: var(--gf-gap-lg);
    background: var(--gf-surface); border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius);
  }
  #coach-biblioteca-list .coach-client-row:hover { border-color: var(--gf-border-button); }
  #coach-biblioteca-list .coach-client-info { flex: 1; min-width: 0; justify-content: center; gap: 2px; }
  #coach-biblioteca-list .coach-client-name { display: block; font-size: 16px; font-weight: 700; line-height: 22px; color: var(--gf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #coach-biblioteca-list .coach-client-meta { flex-wrap: nowrap; align-items: center; gap: 0 var(--gf-gap-lg); font-size: var(--gf-text-min); font-weight: 400; line-height: 20px; color: var(--gf-text-muted); white-space: nowrap; overflow: hidden; }
  #coach-biblioteca-list .coach-client-meta strong { color: var(--gf-text-muted); font-weight: 400; }
  #coach-biblioteca-list .coach-client-actions { flex: none; flex-wrap: nowrap; gap: 8px; }
  #coach-biblioteca-list .coach-pill { height: 36px; padding: 0 14px; font-size: var(--gf-text-body); font-weight: 400; line-height: 1; color: var(--gf-text); background: transparent; border: var(--gf-border-width) solid var(--gf-border-button); border-radius: var(--gf-radius-btn); }
  #coach-biblioteca-list .coach-pill:hover { background: var(--gf-surface-2); border-color: var(--gf-accent); color: var(--gf-text); filter: none; }
  #coach-biblioteca-list .coach-pill[data-action="asignar"] { color: var(--gf-accent); border-color: var(--gf-accent); }
  #coach-biblioteca-list .coach-pill[data-action="asignar"]:hover { background: var(--gf-surface-selected); color: var(--gf-accent); }
  #coach-biblioteca-list .coach-pill[data-action="eliminar"]:hover { border-color: var(--gf-urgent); color: var(--gf-urgent); }
}

/* Celular y pantallas angostas: igual que antes (buscador, chips y menú ⋯); "Asignar" ya no es un botón lleno */
@media (max-width: 999px) {
  #coach-biblioteca-list .coach-pill[data-action="asignar"] { flex: 1 1 0; color: var(--gf-accent); background: transparent; border-color: var(--gf-accent); }
  #coach-biblioteca-list .bib-nivel-pill { border: none; padding: 0; color: inherit; }
}

/* ─────────────────────────────────────────────────
   B5-5d-3b — Editor de la Biblioteca en ventana del marco común (960 × 650): árbol de fases, sesiones y bloques.
   Reutiliza los estilos de "Editar fase" (.cv-cols-fase, .cv-fase-datos, .cv-fase-bloques, .cv-dias, .cv-bloque…).
   ───────────────────────────────────────────────── */
.cv-fase-datos .cv-select { height: 40px; }
.cv-nota-bib { height: 140px; resize: none; }
.cv-bib-fases { display: flex; flex-direction: column; gap: var(--gf-gap-md); }
.cv-bib-fase { display: flex; flex-direction: column; gap: 10px; padding: var(--gf-gap-md); background: var(--gf-surface); border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius); }
.cv-bib-fase-cab { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px var(--gf-gap-md); }
.cv-bib-fase-nom { flex: 1; min-width: 180px; }
.cv-bib-fase-cab .cv-mini { height: 40px; }
.cv-bib-fase > .btn-agregar-sesion { align-self: flex-start; }
.bib-sesiones-cont { display: flex; flex-direction: column; gap: 10px; }
.cv-bib-sesion { display: flex; flex-direction: column; gap: 10px; padding: var(--gf-gap-md); background: var(--gf-surface-2); border: var(--gf-border-width) solid var(--gf-divider); border-radius: var(--gf-radius); }
.cv-bib-sesion-cab { display: flex; align-items: center; gap: var(--gf-gap-md); }
.cv-bib-sesion-cab .cv-input { flex: 1; min-width: 0; }
.cv-bib-sesion > .btn-agregar-bloque-sesion { align-self: flex-start; }

@media (max-width: 899px) {
  .cv-bib-fase-nom { flex: 1 1 100%; }
  .cv-bib-sesion-cab { flex-wrap: wrap; }
}

/* v260 — Minimizar/expandir fases y sesiones del editor de la Biblioteca (solo visual: los campos siguen en el documento,
   solo se ocultan). Botón = .cv-btn-icono (mismo tamaño de toque que subir/bajar bloque). El resumen solo se ve minimizado. */
.cv-bib-fase-cab > .btn-min-fase { margin-bottom: 4px; }
.cv-min-resumen { display: none; flex: 1 1 0; min-width: 0; font-size: var(--gf-text-body); font-weight: 400; color: var(--gf-text); overflow-wrap: anywhere; }
.cv-bib-fase.cv-min > :not(.cv-bib-fase-cab), .cv-bib-sesion.cv-min > :not(.cv-bib-sesion-cab) { display: none; }
.cv-bib-fase.cv-min > .cv-bib-fase-cab, .cv-bib-sesion.cv-min > .cv-bib-sesion-cab { align-items: center; flex-wrap: nowrap; }
.cv-bib-fase.cv-min > .cv-bib-fase-cab > :not(.btn-min-fase):not(.cv-min-resumen), .cv-bib-sesion.cv-min > .cv-bib-sesion-cab > :not(.btn-min-sesion):not(.cv-min-resumen) { display: none; }
.cv-bib-fase.cv-min > .cv-bib-fase-cab > .btn-min-fase { margin-bottom: 0; }
.cv-bib-fase.cv-min > .cv-bib-fase-cab > .cv-min-resumen, .cv-bib-sesion.cv-min > .cv-bib-sesion-cab > .cv-min-resumen { display: block; }

/* ─────────────────────────────────────────────────
   B5-5d-3c — Aviso de ejercicios fuera del catálogo (editor de la Biblioteca) y aire sobre el título de la pestaña.
   ───────────────────────────────────────────────── */
.cv-aviso-cat { padding: 10px var(--gf-gap-md); font-size: var(--gf-text-min); line-height: 1.4; color: var(--gf-text); background: transparent; border: var(--gf-border-width) solid var(--gf-attention); border-radius: var(--gf-radius); }
.cv-aviso-cat-lista { margin: 6px 0 0; padding-left: 16px; font-size: 12px; color: var(--gf-text-muted); overflow-wrap: anywhere; }
.cv-aviso-cat-lista li + li { margin-top: 2px; }

/* Biblioteca de programas: el título no queda pegado a la línea de las pestañas */
#coach-tab-biblioteca > .coach-section { padding-top: 20px; }

/* Gráficos de la ficha (REGLAS_DISENO 6.13): línea de peso 240 × 120 y dona de macros 76 × 76. Solo usan colores ya definidos. */
.coach-gp, .coach-dona { display: block; max-width: 100%; height: auto; }
.coach-gp-eje { stroke: var(--gf-divider); stroke-width: 1; }
.coach-gp-obj { stroke: var(--gf-text-muted); stroke-width: 1; stroke-dasharray: 4 3; fill: none; }
.coach-gp-linea { fill: none; stroke: var(--gf-icon); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.coach-gp-punto { fill: var(--gf-icon); stroke: var(--gf-surface); stroke-width: 1; }
.coach-gp-punto-perfil { fill: var(--gf-surface); stroke: var(--gf-icon); stroke-width: 1.5; }
.coach-gp-txt { fill: var(--gf-text-muted); font-family: var(--gf-font-ui); font-size: var(--gf-text-min); }
.coach-gp-val { fill: var(--gf-text); font-weight: 700; }
.coach-dona-fondo, .coach-dona-prot, .coach-dona-carb, .coach-dona-gras { fill: none; stroke-width: 12; }
.coach-dona-fondo { stroke: var(--gf-border); }
.coach-dona-prot { stroke: var(--gf-macro-protein); }
.coach-dona-carb { stroke: var(--gf-macro-carbs); }
.coach-dona-gras { stroke: var(--gf-macro-fat); }

/* Indicador Dieta de la ficha (REGLAS_DISENO 6.14): calorías, déficit o superávit, dona de macros a la izquierda y su leyenda en
   texto a la derecha (12 px como mínimo). Si la tarjeta es angosta, la leyenda baja debajo de la dona (flex-wrap), sin apretarse. */
.coach-dieta-kcal { display: flex; align-items: baseline; gap: var(--gf-gap-xs); color: var(--gf-text); }
.coach-dieta-kcal strong { font-size: 23px; font-weight: 700; line-height: 1.2; }
.coach-dieta-kcal span { font-size: var(--gf-text-body); color: var(--gf-text-muted); }
.coach-dieta-macros { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gf-gap-md); min-width: 0; }
.coach-dieta-macros .coach-dona { flex: none; }
.coach-dieta-leyenda { flex: 1 1 150px; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--gf-gap-md); font-size: 12px; line-height: 1.3; color: var(--gf-text-muted); }
.coach-dieta-leyenda li { display: flex; align-items: center; gap: var(--gf-gap-sm); }
.coach-dieta-leyenda strong { color: var(--gf-text); font-weight: 700; }
.coach-dieta-val { white-space: nowrap; }
.coach-dieta-punto { flex: none; width: 10px; height: 10px; border-radius: 2px; }
.coach-dieta-punto-prot { background: var(--gf-macro-protein); }
.coach-dieta-punto-carb { background: var(--gf-macro-carbs); }
.coach-dieta-punto-gras { background: var(--gf-macro-fat); }

/* Peso corporal: tarjeta del Resumen y pestaña Peso (REGLAS_DISENO 6.15) */
.coach-peso-actual { display: flex; align-items: baseline; gap: var(--gf-gap-xs); color: var(--gf-text); }
.coach-peso-actual strong { font-size: var(--gf-text-metric); font-weight: 700; line-height: 1.1; }
.coach-peso-actual span { font-size: var(--gf-text-body); color: var(--gf-text-muted); }
.coach-peso-tend { display: flex; align-items: center; gap: var(--gf-gap-sm); font-size: var(--gf-text-title); color: var(--gf-text-muted); }
.coach-peso-bien { color: var(--gf-on-track); }
.coach-peso-mal { color: var(--gf-urgent); }
.coach-peso-neutro { color: var(--gf-text-muted); }
.coach-peso-flecha { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.coach-peso-pane { display: flex; flex-direction: column; gap: 10px; }
.coach-peso-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gf-gap-lg); }
.coach-peso-resumen-txt { display: flex; flex-direction: column; gap: var(--gf-gap-xs); min-width: 0; }
.coach-tmb-bloques { align-items: flex-start; } /* Metabolismo y mantenimiento (6.16): los bloques alineados por arriba */
.coach-tmb-der { flex: 0 1 320px; min-width: 0; gap: var(--gf-gap-md); } /* columna de los dos números: hasta 320 px, uno bajo el otro; baja debajo del gráfico si no cabe */
.coach-tmb-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gf-gap-md); } /* Datos para el cálculo: género, nivel y Guardar en una fila que baja si no cabe */
.coach-tmb-fila .coach-tmb-nivel { flex: 1 1 260px; min-width: 0; } /* el nivel ocupa lo que le deja el género */
.coach-peso-form.coach-tmb-form { max-width: none; } /* la fila de este formulario usa todo el ancho de la tarjeta */
.coach-peso-tabla-wrap { max-height: 320px; overflow: auto; border: var(--gf-border-width) solid var(--gf-border); border-radius: var(--gf-radius); }
.coach-peso-tabla { width: 100%; border-collapse: collapse; font-size: var(--gf-text-body); color: var(--gf-text); }
.coach-peso-tabla th, .coach-peso-tabla td { padding: 8px 12px; text-align: left; border-bottom: var(--gf-border-width) solid var(--gf-divider); }
.coach-peso-tabla tbody tr:last-child td { border-bottom: 0; }
.coach-peso-tabla th { position: sticky; top: 0; font-size: var(--gf-text-min); font-weight: 400; color: var(--gf-text-muted); background: var(--gf-surface); }
.coach-peso-form { display: flex; flex-direction: column; gap: var(--gf-gap-md); max-width: 380px; }
.coach-peso-form [hidden] { display: none; }
.coach-peso-form .cv-btn-principal { min-width: 120px; }

/* ─────────────────────────────────────────────────
   Aviso «toca actualizar la dieta» (v254). Solo variables --gf-* que ya existen; el color nunca va solo (siempre hay texto).
   ───────────────────────────────────────────────── */
/* Selector «Aviso de dieta» en la cabecera de la ficha de Plan de alimentación, junto a «Actualizar». En pantallas angostas
   (celular) va en una línea propia debajo, con al menos 40 px de alto. */
#coach-alim-panel .coach-panel-cab-btns { flex-wrap: wrap; justify-content: flex-end; }
.pa-aviso-sel { display: flex; align-items: center; gap: var(--gf-gap-sm); }
.pa-aviso-lbl { font-size: var(--gf-text-min); font-weight: 400; color: var(--gf-text-muted); white-space: nowrap; }
.pa-aviso-select { width: auto; min-width: 104px; height: 38px; }
.pa-aviso-select:disabled { opacity: 0.7; cursor: not-allowed; }
@media (max-width: 999px) {
  /* La cabecera pasa a dos líneas: arriba avatar, nombre y «Actualizar»; abajo, a todo el ancho, «Aviso de dieta» + el selector.
     (display: contents hace que los botones y el selector sean hijos directos de la cabecera, para que no le quiten ancho al nombre) */
  #coach-alim-panel .coach-ficha-cab { flex-wrap: wrap; }
  #coach-alim-panel .coach-ficha-cab-der, #coach-alim-panel .coach-panel-cab-btns { display: contents; }
  .pa-aviso-sel { order: 3; flex: 1 1 100%; justify-content: flex-end; }
  .pa-aviso-select { min-height: 40px; }
}

/* Lista de Plan de alimentación: el texto del aviso toma el color de su estado (ámbar: por vencer y vence hoy; rojo: vencida) */
.coach-cli-row.pa-av-porvencer .coach-cli-plan, .coach-cli-row.pa-av-porvencer .coach-cli-meta-movil,
.coach-cli-row.pa-av-hoy .coach-cli-plan, .coach-cli-row.pa-av-hoy .coach-cli-meta-movil { color: var(--gf-attention); }
.coach-cli-row.pa-av-vencida .coach-cli-plan, .coach-cli-row.pa-av-vencida .coach-cli-meta-movil { color: var(--gf-urgent); font-weight: 700; }

/* «Mis clientes»: etiqueta «Dieta: …» (solo por vencer, vence hoy y vencida). Escritorio: segunda línea en la celda derecha, bajo el
   vencimiento del plan. Celular: línea propia bajo la línea de resumen. */
.coach-cli-dieta { min-width: 0; font-size: var(--gf-text-min); font-weight: 400; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-cli-dieta.dieta-ambar { color: var(--gf-attention); }
.coach-cli-dieta.dieta-rojo { color: var(--gf-urgent); }
@media (min-width: 1000px) {
  .coach-cli-row.con-dieta .coach-cli-vence { grid-row: 1 / 3; align-self: end; }
  .coach-cli-dieta { grid-column: 3; grid-row: 3 / 5; align-self: start; text-align: right; }
  @container (max-width: 519px) { .coach-cli-dieta { grid-column: 2; } }
}
@media (max-width: 999px) {
  .coach-cli-dieta { grid-column: 1 / -1; grid-row: 3; white-space: normal; }
}

/* Alias del coach: bajo el nombre, una línea chica «nombre real · correo» (13 px, 400, con «…» si no cabe). Mis clientes y Plan de
   alimentación comparten la fila; la ficha la lleva entre el nombre y el plan; en la franja de las ventanas solo va el nombre real.
   Escritorio: la fila pasa de 4 a 5 líneas (estado, motivo, nombre, apoyo, plan). Celular: el apoyo va justo bajo el nombre. */
.coach-cli-apoyo, .coach-ficha-apoyo, .cv-fr-apoyo { min-width: 0; font-size: var(--gf-text-min); font-weight: 400; line-height: 18px; color: var(--gf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-ficha-apoyo { margin-top: 2px; }
.cv-fr-apoyo { flex: 0 1 auto; }
@media (min-width: 1000px) {
  .coach-cli-row { grid-template-rows: repeat(5, auto); }
  .coach-cli-avatar, .coach-cli-vence, .coach-cli-flecha { grid-row: 1 / 6; }
  .coach-cli-apoyo { grid-column: 2; grid-row: 4; }
  .coach-cli-plan { grid-row: 5; }
  .coach-cli-dieta { grid-row: 3 / 6; }
  @container (max-width: 519px) { .coach-cli-apoyo { grid-column: 1; } }
}
@media (max-width: 999px) {
  .coach-cli-apoyo { grid-column: 1 / -1; grid-row: 2; }
  .coach-cli-meta-movil { grid-row: 3; }
  .coach-cli-dieta { grid-row: 4; }
}