/* ==========================================================================
   Diseño · Fase 3: componentes únicos e iconos.
   Se carga la última para que cada pieza tenga una sola versión.
   ========================================================================== */

/* ---------- Iconos de línea ---------- */
.ico{width:22px;height:22px;flex:none;display:block;}
.tbi-emo{filter:none;color:var(--dim-45);}
.tbi.active .tbi-emo{color:var(--accent-text);opacity:1;}
.tbi-emo .ico{width:22px;height:22px;}
.tbi:not(.active) .tbi-emo{opacity:1;}
html.esc #coachTabs .tbi-emo .ico{width:20px;height:20px;}
.acc-btn > span[aria-hidden="true"] .ico{width:22px;height:22px;margin:0 auto;color:var(--accent-text);}
.list-row > span:first-child{display:inline-flex;align-items:center;gap:12px;}
.ico-fila{width:20px;height:20px;color:var(--dim-6);}

/* ---------- Botones: principal, secundario y terciario ---------- */
.btn-primary{height:48px;border-radius:var(--r-ctl);font:600 var(--fs-m) var(--f-body);letter-spacing:0;}
.btn-eq{border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--bg);color:var(--ink);font:600 var(--fs-s) var(--f-body);}
.btn-eq:hover{background:var(--wash-soft);}
.btn-eq.danger{border-color:color-mix(in srgb, var(--danger) 45%, transparent);color:var(--danger-text);background:var(--bg);}
.mini-btn,.sg-ver.sg-ver-btn,.team-chip{min-height:36px;border-radius:var(--r-pill);font:600 var(--fs-s) var(--f-body);}
.sg-ver.sg-ver-btn{border:1px solid var(--line-strong);background:var(--wash-soft);color:var(--ink);}
.sg-ver.sg-ver-btn:hover{background:var(--wash-med);color:var(--ink);}

/* ---------- Chips de filtro: uno solo, 36 px, contador en píldora ---------- */
.ex-filtros button,.ent-filtros button,.sg-filtros .chip,.pu-chat-chips .chip,.pagos-filtros .chip,.gr-chips .chip{
  height:36px;min-height:36px;padding:0 12px;display:inline-flex;align-items:center;gap:8px;
  border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);
  font:600 var(--fs-s) var(--f-body);letter-spacing:0;text-transform:none;cursor:pointer;white-space:nowrap;}
.ex-filtros button.sel,.ent-filtros button.sel,.sg-filtros .chip.selected,.pu-chat-chips .chip.selected,.pagos-filtros .chip.selected,.gr-chips .chip.selected,
.ex-filtros button[aria-pressed="true"],.ent-filtros button[aria-pressed="true"]{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.ex-filtros button b,.ent-filtros button b,.sg-filtros .chip .sg-fn,.pu-chat-chips .chip b,.pagos-filtros .chip b{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;margin:0;
  border-radius:var(--r-pill);background:var(--wash-med);color:inherit;font:600 var(--fs-xs) var(--f-mono);}
.ex-filtros button.sel b,.ent-filtros button.sel b,.sg-filtros .chip.selected .sg-fn,.pu-chat-chips .chip.selected b,.pagos-filtros .chip.selected b{background:rgba(255,255,255,.4);}
.ex-filtros button.hay{border-color:color-mix(in srgb, var(--danger) 45%, transparent);color:var(--danger-text);}
.ex-filtros button.hay.sel{background:var(--danger);border-color:var(--danger);color:#fff;}

/* ---------- Etiqueta de estado: 11 px, tres colores ---------- */
.kc-estado,.plan-est,.pago-est,.chat-fila-est,.kc-pago,.pill{
  font:600 var(--fs-xs) var(--f-mono);letter-spacing:.04em;text-transform:uppercase;
  padding:4px 8px;border-radius:var(--r-pill);border:none;line-height:1.3;}
.kc-estado.ok,.plan-est.ok,.pago-est.ok,.pill.ok{background:color-mix(in srgb, var(--ok) 16%, transparent);color:var(--ok-text);}
.kc-estado.pend,.plan-est.revisar,.pago-est.amb,.pago-est.nar,.kc-pago.amb,.kc-pago.nar,.pill.pg-amb,.pill.pg-nar,.pill.alg-hay,.chat-fila.nv-amb .chat-fila-est{
  background:color-mix(in srgb, var(--warn) 18%, transparent);color:var(--warn-text);}
.plan-est.vacio,.pago-est.roj,.kc-pago.roj,.pill.pg-roj,.pill.alg-diag,.chat-fila.rojo .chat-fila-est,.chat-fila.nv-roj .chat-fila-est{
  background:color-mix(in srgb, var(--danger) 14%, transparent);color:var(--danger-text);}
.kc-estado.nuevo,.chat-fila.espera .chat-fila-est{background:var(--accent-wash);color:var(--accent-text);}
/* Contadores (no son etiquetas de estado) */
.pill.pill-nuevo{background:var(--danger);color:#fff;font-family:var(--f-mono);}
.chat-hero-top .pill{background:var(--on-accent);color:var(--accent);}

/* ---------- Plegables: título en Archivo 600 y flecha en círculo ---------- */
.alta-label.fp-lbl .fp-t,.aj-sec-h{font:600 var(--fs-m) var(--f-body);letter-spacing:0;text-transform:none;}
.aj-sec-h{color:var(--ink);}
.aj-sec.abierta .aj-sec-h{color:var(--ink);}
details > summary{list-style:none;}
details > summary::-webkit-details-marker{display:none;}

/* ---------- Un solo «Volver» ---------- */
.back-btn.coach-bar-volver{height:36px;padding:0 16px 0 8px;border-radius:var(--r-pill);background:var(--wash-med);color:var(--ink);border:none;font:600 var(--fs-m) var(--f-body);}
.back-btn.coach-bar-volver:active{background:var(--wash-strong);}

/* ---------- Avatar sin foto: inicial sobre color ---------- */
.avatar.av-ini{background:var(--accent-wash);border-color:var(--accent-line);color:var(--accent-text);display:flex;align-items:center;justify-content:center;}
.avatar.av-ini[data-ini]::after{content:attr(data-ini);font:700 var(--fs-l) var(--f-body);line-height:1;}

/* En el móvil, las filas de chips se desplazan en horizontal en vez de partirse */
html:not(.esc) .ex-filtros,html:not(.esc) .pagos-filtros,html:not(.esc) .pu-chat-chips,html:not(.esc) .ent-filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
html:not(.esc) .ex-filtros::-webkit-scrollbar,html:not(.esc) .pagos-filtros::-webkit-scrollbar,html:not(.esc) .pu-chat-chips::-webkit-scrollbar,html:not(.esc) .ent-filtros::-webkit-scrollbar{display:none;}
html:not(.esc) :is(.ex-filtros,.pagos-filtros,.pu-chat-chips,.ent-filtros) > *{flex:none;}
.mini-btn{white-space:nowrap;}

/* ==========================================================================
   Diseño · Fase 4: escritorio y movimiento
   ========================================================================== */
/* Escala propia de escritorio: títulos de 28 px y texto base de 15 px */
html.esc{--fs-2xl:28px;}
/* El menú lateral ya dice quién eres: fuera el rótulo repetido sobre cada título */
html.esc .eyebrow[id$="Who"]{display:none;}
html.esc #view-coach-panel .h-title,html.esc .screen .alta-top .h-title{margin-top:0;}
/* Multitarea: un solo título grande, el de la columna central */
html.mt-on .esc-izq .h-title{font-size:var(--fs-xl) !important;}
html.mt-on #escChatCol .h-title{font-size:var(--fs-l) !important;}

/* #286 · Chat: letra de los mensajes más grande (13 → 15 px) en móvil y escritorio */
.bubble{font-size:var(--fs-m);line-height:1.45;}
.bubble.card-msg .t,.bubble.card-msg .l{font-size:var(--fs-m);}
.chat-input input[type=text]{font-size:var(--fs-m);}
html.esc .composer textarea{font-size:var(--fs-m);}

/* #285 · Alturas de botón en la escala: 28 (mini) · 36 (terciario/icono) · 44 (táctil) · 48 (principal y secundario).
   No se tocan las filas de series del entreno ni las tarjetas pulsables (no son botones). */
.btn-eq,.btn-eq-p{height:48px;}
.view-back,.back-btn,.back-btn.coach-bar-volver,.esc-pie-btn,.mt-vista button,.ex-tabs-coach button,.chat-pend button,.mt-grande,.gr-tabla-btn,.ha-x{height:36px;min-height:36px;}
.bell,.cmp-ico{width:36px;height:36px;}
.mt-grande,.ha-x{width:36px;}
.kc-plan-btn,.cd-edit-nom,.ru-ren{height:28px;min-height:28px;}
.cd-edit-nom,.ru-ren{width:28px;}
.btn-primary.sg-rev-btn,.add-sesion-btn,.pg-seg button,.calc-plegar{min-height:44px;height:44px;}
html.esc #coachTabs .tbi{min-height:44px;height:44px;}

/* #289 · botón del modo pruebas dentro del pie del menú lateral (escritorio) */
html.esc .pb-btn.pb-en-pie{position:static;display:flex;align-items:center;justify-content:center;width:100%;height:36px;margin:0 0 8px;font-size:var(--fs-s);}
html.esc .pb-btn.pb-en-pie{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

/* ==========================================================================
   #290 · Marca en la portada (sutil): degradado azul, la pesa en blanco como
   marca de agua, anillos, burbujas y la cuadrícula de puntos del mural.
   ========================================================================== */
#view-splash{position:relative;isolation:isolate;overflow-x:hidden;min-height:100%;box-sizing:border-box;}
.sp-deco{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.sp-deco::before{content:'';position:absolute;left:-110px;top:-10px;width:300px;height:367px;background:url(assets/marca_agua.png) center/contain no-repeat;opacity:.75;}
.sp-anillo{position:absolute;left:50%;border-radius:50%;border:2px solid rgba(255,255,255,.95);}
.sp-a1{width:300px;height:300px;margin-left:-150px;top:20px;}
.sp-a2{width:230px;height:230px;margin-left:-115px;top:55px;opacity:.7;}
.sp-burbuja{position:absolute;border-radius:50%;background:color-mix(in srgb, var(--accent) 30%, transparent);}
.sp-b1{width:150px;height:150px;right:-50px;top:-40px;}
.sp-b2{width:64px;height:64px;left:-18px;bottom:32%;}
.sp-puntos{position:absolute;right:22px;bottom:22px;width:100px;height:80px;background-image:radial-gradient(circle, color-mix(in srgb, var(--accent) 80%, transparent) 2.2px, transparent 2.6px);background-size:20px 20px;}
#view-splash .tagline .real{color:var(--accent);}
/* tema claro */
.screen.light #view-splash{background:radial-gradient(90% 60% at 50% 30%, #FFFFFF 0%, #F3F8FD 45%, #CFE3F7 100%);}
.screen.light #view-splash .login-card{background:#fff;box-shadow:0 10px 30px -14px rgba(43,103,163,.35);border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);}
.screen.light #view-splash .pro-btn{background:#fff;}
/* tema oscuro: lo mismo, mucho más tenue */
.screen:not(.light) #view-splash{background:radial-gradient(90% 60% at 50% 30%, #1A1F26 0%, #12161B 50%, #0E1013 100%);}
.screen:not(.light) .sp-deco::before{opacity:.05;}
.screen:not(.light) .sp-anillo{border-color:rgba(255,255,255,.08);}
.screen:not(.light) .sp-burbuja{background:color-mix(in srgb, var(--accent) 10%, transparent);}
.screen:not(.light) .sp-puntos{opacity:.35;}
/* ordenador: la marca de agua y los anillos más grandes */
@media (min-width:900px){
  .sp-deco::before{left:-140px;top:-20px;width:520px;height:636px;}
  .sp-a1{width:420px;height:420px;margin-left:-210px;top:-20px;}
  .sp-a2{width:320px;height:320px;margin-left:-160px;top:30px;}
  .sp-b1{width:260px;height:260px;right:-80px;top:-80px;}
  .sp-b2{width:110px;height:110px;left:-30px;bottom:30%;}
  .sp-puntos{right:48px;bottom:48px;width:140px;height:100px;}
}

/* ==========================================================================
   #290 · Marca (paso 2) · Menú lateral del ordenador: degradado azul suave,
   la pesa en blanco como marca de agua en el hueco central, «Fitnessindramas»
   con la letra de los títulos y «dramas» en azul, y la cuadrícula de puntos
   del mural junto al título de cada pestaña.
   ========================================================================== */
html.esc #coachTabs{overflow:hidden;}
html.esc .screen.light #coachTabs{background:linear-gradient(180deg,#F6F9FD 0%,#E3EEF9 100%) !important;}
html.esc .screen:not(.light) #coachTabs{background:linear-gradient(180deg,#151a20 0%,#11161c 100%) !important;}
html.esc #coachTabs::after{content:'';position:absolute;pointer-events:none;z-index:0;left:-40px;top:340px;width:180px;height:220px;
  background:url(assets/marca_agua.png) center/contain no-repeat;opacity:.9;}
html.esc .screen:not(.light) #coachTabs::after{opacity:.05;}
html.esc #coachTabs > *{position:relative;z-index:1;}
html.esc.esc-mini #coachTabs::after{display:none;}
html.esc .esc-logo b{font:400 var(--fs-m)/1.1 var(--f-display) !important;letter-spacing:.2px;}
html.esc .esc-logo b i{font-style:normal;color:var(--accent);}
html.esc .alta-top:has(> div > .eyebrow[id$="Who"]),html.esc .alta-top:has(.eyebrow[id$="Who"]){position:relative;}
html.esc .alta-top:has(.eyebrow[id$="Who"])::after{content:'';position:absolute;pointer-events:none;right:72px;top:10px;width:84px;height:44px;
  background-image:radial-gradient(circle, color-mix(in srgb, var(--accent) 60%, transparent) 1.8px, transparent 2.2px);background-size:14px 14px;}

/* #291 · Tarjeta de cliente más sencilla */
#listaClientes .kc-estado.ok,#listaClientes .kc-info,#listaClientes .kc-motivos{display:none;}
#listaClientes .kc.dest{border-color:transparent !important;box-shadow:none !important;}

/* #294 · pantalla «¡Enviado!» del cuestionario: sin franja gris detrás de los botones y botones a la misma altura */
.cq-fin .cq-acts{background:transparent;padding-top:0;align-items:stretch;}
.cq-fin .cq-acts .btn-primary{margin-top:0;}

/* #293 · Pestaña «Facturas» en Pagos */
.fc-caja{display:flex;flex-direction:column;gap:12px;margin-top:4px;}
.fc-caja[hidden]{display:none;}
.fc-aviso{justify-content:space-between;padding:12px 16px;border-radius:var(--r-ctl);background:color-mix(in srgb, var(--warn) 14%, transparent);color:var(--ink);font:500 var(--fs-s)/1.45 var(--f-body);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.fc-pend{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-radius:var(--r-card);background:var(--accent-wash);border:1px solid var(--accent-line);}
.fc-pend b{display:block;font:600 var(--fs-m) var(--f-body);}
.fc-pend small{display:block;margin-top:4px;font:400 var(--fs-s) var(--f-body);color:var(--dim-6);}
.fc-pend .fc-todos{width:auto;flex:none;padding:0 16px;margin:0;height:44px;}
.fc-ok{padding:12px 16px;border-radius:var(--r-ctl);background:color-mix(in srgb, var(--ok) 12%, transparent);color:var(--ok-text);font:600 var(--fs-s) var(--f-body);}
.fc-barra{display:flex;gap:8px;}
.fc-barra .fc-busca{flex:1;min-width:0;height:44px;padding:0 16px;border-radius:var(--r-ctl);border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);font:400 var(--fs-m) var(--f-body);}
.fc-barra select{flex:none;width:auto;max-width:44%;}
.fc-res{display:flex;align-items:center;justify-content:space-between;gap:12px;font:600 var(--fs-s) var(--f-body);color:var(--dim-6);margin-bottom:8px;}
.fc-num{font-family:var(--f-mono);font-weight:600;}
@media (max-width:420px){ .fc-pend{flex-direction:column;align-items:stretch;} .fc-pend .fc-todos{width:100%;} }
.fc-lista{display:flex;flex-direction:column;border-radius:var(--r-card);background:var(--card);overflow:hidden;}
.fc-fila{display:grid;grid-template-columns:1fr auto;grid-template-areas:"t b" "s b";gap:4px 12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);}
.fc-fila:last-child{border-bottom:none;}
.fc-fila-t{grid-area:t;display:flex;gap:12px;align-items:baseline;}
.fc-fila-t .fc-imp{font:600 var(--fs-m) var(--f-body);}
.fc-fila-s{grid-area:s;display:flex;gap:8px;align-items:baseline;min-width:0;}
.fc-fila-s span{font:400 var(--fs-s) var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.fc-fila-s small{flex:none;font:400 var(--fs-xs) var(--f-mono);color:var(--dim-6);}
.fc-fila .fc-pdf{grid-area:b;}
.ex-filtros[hidden],.ent-filtros[hidden],.pu-chat-chips[hidden]{display:none !important;}