:root {
  color-scheme: light;
  /* Shell (sistema) — default light (producto); dark via html[data-theme=dark] */
  --sys-bg: #eef1f0;
  --sys-surface: #ffffff;
  --sys-surface-2: #f3f5f4;
  --sys-border: #c5cec9;
  --sys-text: #0d1612;
  --sys-muted: #3d4a44;
  --sys-ok: #22c55e;
  --sys-warn: #f59e0b;
  --sys-err: #ef4444;

  /* Tenant (runtime via applyBrandTheme) — demo AyP ember */
  --tenant-primary: #e65100;
  --tenant-primary-soft: rgba(230, 81, 0, 0.14);
  --tenant-primary-contrast: #ffffff;

  /* Pre-login FitOS marketing accents */
  --login-accent: #b8f000;
  --login-accent-ink: #071412;
  --login-teal: #0f8f74;

  /* Compat aliases */
  --fitos-primary: var(--tenant-primary);
  --fitos-primary-soft: var(--tenant-primary-soft);
  --fitos-secondary: #1a2332;
  --fitos-accent: var(--sys-ok);
  --fitos-bg: var(--sys-bg);
  --fitos-surface: var(--sys-surface);
  --fitos-text: var(--sys-text);
  --fitos-muted: var(--sys-muted);
  --fitos-border: var(--sys-border);
  --primary: var(--tenant-primary);
  --primary-soft: var(--tenant-primary-soft);
  --bg: var(--sys-bg);
  --surface: var(--sys-surface);
  --surface-2: var(--sys-surface-2);
  --text: var(--sys-text);
  --muted: var(--sys-muted);
  --border: var(--sys-border);
  --ok: var(--sys-ok);
  --warn: var(--sys-warn);
  --err: var(--sys-err);
  --accent: var(--primary);

  --sidebar-w: 260px;
  --header-h: 64px;
  --container-portal: 1440px;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 16px;
  --sidebar-bg: #f7f8f7;
  --hairline: color-mix(in srgb, var(--sys-border) 90%, transparent);
  --elev-1: 0 1px 3px rgba(13, 22, 18, 0.07);
  --elev-2: 0 8px 22px rgba(13, 22, 18, 0.1);
  --shadow: var(--elev-2);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-instant: 100ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --z-sticky: 40;
  --z-modal-backdrop: 50;
  --z-modal: 60;
  --z-toast: 70;
  --fit-safe-bottom: env(safe-area-inset-bottom, 0px);
  --vv-bottom-inset: 0px;

  font-family: var(--fitos-font, "Plus Jakarta Sans", "Manrope", "Inter", system-ui, sans-serif);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --sys-bg: #0e1412;
  --sys-surface: #171f1c;
  --sys-surface-2: #1e2824;
  --sys-border: #2a3530;
  --sys-text: #f1f5f3;
  --sys-muted: #94a39c;
  --sidebar-bg: #121916;
  --hairline: color-mix(in srgb, var(--sys-border) 90%, transparent);
  --elev-1: 0 1px 2px rgba(7, 20, 18, 0.24);
  --elev-2: 0 4px 12px rgba(7, 20, 18, 0.28);
  --shadow: var(--elev-2);
  --tenant-primary-soft: rgba(230, 81, 0, 0.14);
}

html[data-theme="light"] {
  color-scheme: light;
  /* Blancos / grises + texto más oscuro (contraste legible). */
  --sys-bg: #eef1f0;
  --sys-surface: #ffffff;
  --sys-surface-2: #f3f5f4;
  --sys-border: #c5cec9;
  --sys-text: #0d1612;
  --sys-muted: #3d4a44;
  --sidebar-bg: #f7f8f7;
  --hairline: color-mix(in srgb, var(--sys-border) 90%, transparent);
  --elev-1: 0 1px 3px rgba(13, 22, 18, 0.07);
  --elev-2: 0 8px 22px rgba(13, 22, 18, 0.1);
  --shadow: var(--elev-2);
  --tenant-primary-soft: rgba(154, 26, 26, 0.12);
}

html[data-theme="light"] .mc-client-hub-dialog,
html[data-theme="light"] .mc-hub-cal-cell,
html[data-theme="light"] .acct-card,
html[data-theme="light"] .branding-card,
html[data-theme="light"] .login-card {
  color: var(--sys-text);
}
html[data-theme="light"] .mc-hub-cal-daynum,
html[data-theme="light"] .hint,
html[data-theme="light"] .subtitle,
html[data-theme="light"] .login-kicker {
  color: var(--sys-muted);
}
html[data-theme="light"] .mc-hub-cal-cell.is-drop-target {
  outline: 2px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--sys-surface));
}
.mc-hub-cal-cell.is-drop-target {
  outline: 2px solid var(--primary, #9a1a1a);
  background: color-mix(in srgb, var(--primary, #9a1a1a) 14%, transparent);
}

html[data-theme="light"] .theme-ico-moon { display: none; }
html:not([data-theme="light"]) .theme-ico-sun { display: none; }
[data-theme-toggle] .theme-ico-sun,
[data-theme-toggle] .theme-ico-moon { width: 18px; height: 18px; }

/* Light shell: suelo gris + paneles blancos elevados (paridad visual con dark). */
html[data-theme="light"] .main-area,
html[data-theme="light"] .content {
  background: var(--sys-bg);
}
html[data-theme="light"] .sidebar {
  background: var(--sidebar-bg);
  border-right-color: var(--sys-border);
}
html[data-theme="light"] .sidebar-footer {
  background: color-mix(in srgb, var(--sidebar-bg) 55%, var(--sys-border));
}
html[data-theme="light"] .nav-item:hover {
  background: color-mix(in srgb, var(--sys-surface) 92%, var(--sys-border));
}
html[data-theme="light"] .nav-item.active {
  background: color-mix(in srgb, var(--primary) 14%, var(--sys-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent);
}
html[data-theme="light"] .topbar {
  background: color-mix(in srgb, var(--sys-surface) 94%, var(--sys-bg));
  border-bottom: 1px solid var(--hairline);
}
html[data-theme="light"] .cmd-hero,
html[data-theme="light"] .cmd-panel,
html[data-theme="light"] .drawer,
html[data-theme="light"] .modal-dialog,
html[data-theme="light"] .usuarios-roster-wrap,
html[data-theme="light"] .data-table,
html[data-theme="light"] .workspace-main,
html[data-theme="light"] .workspace-side,
html[data-theme="light"] #exercise-catalog .exercise-group {
  background: var(--sys-surface);
  border-color: var(--sys-border);
  box-shadow: var(--elev-1);
}
html[data-theme="light"] .exercise-card {
  background: var(--sys-surface);
  border-color: var(--sys-border);
  box-shadow: var(--elev-1);
}
html[data-theme="light"] .exercise-card:hover {
  box-shadow: var(--elev-2);
  border-color: color-mix(in srgb, var(--primary) 36%, var(--sys-border));
}
html[data-theme="light"] .workspace-toolbar {
  background: color-mix(in srgb, var(--sys-surface) 78%, var(--sys-bg));
  border-color: var(--sys-border);
}
html[data-theme="light"] .topbar-search,
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: var(--sys-surface);
  border-color: var(--sys-border);
}
html[data-theme="light"] .ghost {
  background: var(--sys-surface);
  border-color: var(--sys-border);
  color: var(--sys-text);
}
html[data-theme="light"] .status-pill,
html[data-theme="light"] .role-badge {
  background: var(--sys-surface);
  border-color: var(--sys-border);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Portal scrollbars — custom fino dark/primary; scroll sigue funcional */
:root {
  --sb-size: 6px;
  --sb-thumb: color-mix(in srgb, var(--primary) 42%, var(--sys-border));
  --sb-thumb-hover: color-mix(in srgb, var(--primary) 68%, var(--sys-border));
  --sb-track: transparent;
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

*::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size);
}
*::-webkit-scrollbar-track {
  background: var(--sb-track);
}
*::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--sb-thumb-hover);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  font-feature-settings: "tnum" 1;
}

#app {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Views ── */
.view { display: none; width: 100%; min-height: 100vh; }
.view.active { display: block; }
#view-login.view.active { display: flex; }

.logo-img { display: block; border-radius: 0; background: transparent; object-fit: contain; }
.logo-img.sm { border-radius: 0; }

/* ── Login (default light; dark when html[data-theme=dark]) ── */
#view-login {
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 16px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100dvh;
  height: 100dvh;
  background: var(--sys-bg);
  --login-cta: var(--sys-text);
  --login-cta-ink: var(--sys-bg);
}

/* Desktop: no page/card scrollbars on login — card must fit 1080p. */
@media (min-width: 768px) {
  #view-login {
    overflow: hidden;
    padding: 20px 24px;
  }
  #view-login .login-card {
    max-height: none !important;
    overflow: visible !important;
  }
}

#view-login.is-identified {
  --login-cta: var(--tenant-primary, #e65100);
  --login-cta-ink: var(--tenant-primary-contrast, #fff);
}

.login-atmosphere {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--sys-bg) 88%, transparent) 0%, color-mix(in srgb, var(--sys-bg) 55%, transparent) 44%, color-mix(in srgb, var(--sys-bg) 22%, transparent) 100%),
    radial-gradient(ellipse at 15% 20%, color-mix(in srgb, var(--tenant-primary, #e65100) 28%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, color-mix(in srgb, var(--sys-text) 6%, transparent) 0%, transparent 45%),
    url("assets/generated/login-backdrop.jpg") center / cover no-repeat;
  background-color: var(--sys-bg);
  transform: scale(1.02);
  pointer-events: none;
}

.login-stack {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}

.login-card {
  position: relative;
  width: 100%;
  max-height: none;
  overflow: visible;
  background: color-mix(in srgb, var(--sys-surface) 96%, transparent);
  border: 1px solid var(--sys-border);
  border-radius: var(--radius-md, 12px);
  padding: 14px 16px 12px;
  box-shadow: var(--elev-2);
  color: var(--sys-text);
  backdrop-filter: blur(10px);
  animation: loginEnter var(--dur-base) var(--ease-out) both;
}

.login-demo-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--sys-border);
  background: color-mix(in srgb, var(--sys-surface) 78%, var(--sys-bg));
  color: var(--sys-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.login-demo-btn[hidden] { display: none !important; }

.login-demo-btn .nav-ico {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}

.login-demo-btn:hover {
  border-color: color-mix(in srgb, var(--tenant-primary, #e65100) 45%, transparent);
  background: color-mix(in srgb, var(--tenant-primary, #e65100) 12%, transparent);
  color: var(--text);
}

.login-demo-btn:focus-visible {
  outline: 2px solid var(--tenant-primary, #e65100);
  outline-offset: 2px;
}

.login-card:has(.login-demo-btn:not([hidden])) .login-brand-row {
  padding-right: 2.4rem;
}

@keyframes loginEnter {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.login-brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  min-width: 0;
}

.login-mark {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--tenant-primary, #e65100) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--tenant-primary, #e65100) 35%, transparent);
  display: grid;
  place-items: center;
}
#view-login.is-identified .login-mark {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  overflow: visible;
}

.login-mark .logo-img { width: 32px; height: 32px; }
.login-initials {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--tenant-primary, #e65100);
  line-height: 1;
}

.login-brand-copy { min-width: 0; }
.login-brand {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.login-kicker {
  margin: 0;
  font-size: 0.68rem;
  color: var(--muted);
}

.login-title {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0 0 2px;
}

#view-login .subtitle {
  color: var(--muted);
  margin: 0 0 8px;
  font-size: 0.78rem;
  line-height: 1.35;
}

.login-hint { margin-top: 8px; }

.login-footer {
  text-align: center;
  font-size: 0.78rem;
  color: var(--sys-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin: 14px 0 6px;
  letter-spacing: 0.01em;
}

input, select, textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary);
}

#view-login input:focus {
  border-color: var(--login-teal);
  box-shadow: 0 0 0 2px var(--sys-surface), 0 0 0 4px var(--login-teal);
}

button { font-family: inherit; }

.btn-primary, #login-btn {
  margin-top: 12px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--tenant-primary-contrast, #fff);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}

#login-btn {
  background: var(--login-cta, var(--login-accent));
  color: var(--login-cta-ink, var(--login-accent-ink));
}

#sidebar #logout-btn,
.sidebar-footer #logout-btn {
  margin-top: 8px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 500;
}

.btn-primary:hover, #login-btn:hover { filter: brightness(1.06); }
.btn-primary:active, #login-btn:active { transform: scale(0.98); }
.btn-primary:disabled, #login-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }

button.ghost {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.88rem;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

button.ghost:hover {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  color: var(--text);
  background: var(--primary-soft);
}

button.ghost:active { transform: scale(0.98); }

button.ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button.ghost.danger {
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 40%, var(--border));
}

button.ghost.danger:hover:not(:disabled) {
  border-color: var(--err);
  background: color-mix(in srgb, var(--err) 12%, transparent);
}

.btn-block { width: 100%; margin-top: 8px; }

.error { color: var(--err); font-size: 0.85rem; margin-top: 8px; }
.success-msg { color: var(--ok); font-size: 0.85rem; margin-top: 8px; }
.hidden { display: none !important; }
.hint { font-size: 0.78rem; color: var(--muted); }
.hint code { background: var(--bg); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; }

#view-login .login-field { margin: 0 0 8px; }
#view-login .login-field label {
  margin: 0 0 4px;
  font-size: 0.72rem;
  color: var(--sys-text);
}
#view-login .login-field-hint {
  min-height: 1em;
  margin: 4px 0 0;
  font-size: 0.7rem;
  color: var(--sys-muted);
}
#view-login input {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 0.9rem;
}

#view-login .password-field {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow: visible;
}
#view-login .password-field:focus-within {
  border-color: var(--login-teal, var(--tenant-primary));
  box-shadow: 0 0 0 2px var(--sys-surface), 0 0 0 4px var(--login-teal, var(--tenant-primary));
}
#view-login .password-field input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 40px;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding-right: 8px;
}
#view-login .password-field input:focus {
  border: 0;
  box-shadow: none;
}
#view-login .password-toggle {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#view-login .password-toggle .nav-ico {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}
#view-login .password-toggle:hover {
  background: color-mix(in srgb, var(--sys-text) 6%, transparent);
}
#view-login .password-toggle:focus-visible {
  outline: 2px solid var(--tenant-primary, #e65100);
  outline-offset: 2px;
}
#view-login .login-forgot-row {
  display: flex;
  justify-content: flex-end;
  margin: -2px 0 0;
}
#view-login .login-forgot-link {
  border: 0;
  background: transparent;
  padding: 2px 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tenant-primary, var(--primary, #9a1a1a));
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#view-login .login-forgot-link:hover {
  filter: brightness(1.08);
}
#view-login .login-forgot-link:focus-visible {
  outline: 2px solid var(--tenant-primary, #e65100);
  outline-offset: 2px;
  border-radius: 4px;
}
#view-login #login-btn {
  min-height: 40px;
}
#view-login .password-toggle:hover {
  background: color-mix(in srgb, var(--sys-text) 6%, transparent);
}
#view-login .password-toggle:focus-visible {
  outline: 2px solid var(--tenant-primary, #e65100);
  outline-offset: 2px;
}

/* Reset-password modal — same eye field pattern as login */
#login-reset-dialog .password-field {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow: visible;
}
#login-reset-dialog .password-field:focus-within {
  border-color: var(--tenant-primary, var(--primary));
  box-shadow: 0 0 0 2px var(--sys-surface, var(--bg)), 0 0 0 4px var(--tenant-primary, var(--primary));
}
#login-reset-dialog .password-field input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 40px;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding-right: 8px;
}
#login-reset-dialog .password-field input:focus {
  border: 0;
  box-shadow: none;
  outline: none;
}
#login-reset-dialog .password-toggle {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#login-reset-dialog .password-toggle .nav-ico {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}
#login-reset-dialog .password-toggle:hover {
  background: color-mix(in srgb, var(--sys-text, var(--text)) 6%, transparent);
}
#login-reset-dialog .password-toggle:focus-visible {
  outline: 2px solid var(--tenant-primary, #e65100);
  outline-offset: 2px;
}
#login-reset-dialog .pw-match-hint {
  min-height: 1.2em;
  margin: 8px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
}
#login-reset-dialog .pw-match-hint.is-ok {
  color: var(--ok, #22c55e);
}
#login-reset-dialog .pw-match-hint.is-bad {
  color: var(--err, #ef4444);
}
#login-reset-dialog #login-reset-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.25);
}

.demo-chips {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.demo-chip,
.demo-role {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--sys-border);
  background: color-mix(in srgb, var(--sys-surface) 82%, var(--sys-bg));
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.demo-chip span,
.demo-role span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.demo-chip code,
.demo-role code {
  font-size: 0.82rem;
  background: transparent;
  padding: 0;
  color: var(--text);
}

.demo-chip:hover,
.demo-role:hover {
  border-color: color-mix(in srgb, var(--tenant-primary, #e65100) 45%, var(--border));
  background: color-mix(in srgb, var(--tenant-primary, #e65100) 12%, transparent);
}

.demo-roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.demo-accounts-dialog {
  --modal-w: 400px;
}

.demo-accounts-dialog .modal-body .hint {
  margin: 0 0 4px;
}

/* ── App shell ── */
.app-shell {
  display: block;
  min-height: 100vh;
  width: 100%;
  position: relative;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 90;
}

.sidebar-backdrop.visible { display: block; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--border);
}

.sidebar-brand-text {
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  overflow-y: auto;
}

.nav-section { margin-bottom: 14px; }

.nav-section-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 4px 10px 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active {
  background: var(--primary-soft);
  color: var(--text);
}
.nav-item.active .nav-icon { color: var(--primary); opacity: 1; }
.nav-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary);
}

.nav-icon {
  width: 20px;
  text-align: center;
  font-size: 0.95rem;
  opacity: 0.85;
  color: inherit;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav-section.hidden-nav { display: none; }
.nav-item.is-nav-disabled,
.nav-item:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

.sidebar-footer {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border);
}

.sidebar-user {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 4px;
  word-break: break-all;
}

/* ── Main area ── */
.main-area {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  width: calc(100% - var(--sidebar-w));
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.page-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  min-height: var(--header-h);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.page-header-top {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  width: 100%;
}

.sidebar-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
}

.page-header-titles { flex: 1; min-width: 0; }

.page-breadcrumb {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 2px;
}

.page-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0;
  font-stretch: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.role-badge {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  flex-shrink: 0;
}

.content {
  flex: 1;
  padding: 24px;
  max-width: var(--container-portal);
  width: 100%;
  margin: 0 auto;
}

/* Pills bajo el H1 (sticky). Blurb en .content (#module-blurb) — sin solape. */
.module-chrome {
  width: 100%;
  min-width: 0;
  margin: 10px 0 0;
  padding: 0;
  flex-shrink: 0;
}
.module-chrome[hidden] {
  display: none !important;
}
.module-chrome .module-subnav,
#module-subnav.module-subnav {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  position: static;
  top: auto;
  z-index: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.module-chrome .module-subnav .centro-subnav-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
#module-blurb.module-tab-blurb {
  flex: 0 0 auto;
  margin: 0 0 12px;
}
#module-blurb.module-tab-blurb[hidden] {
  display: none !important;
}
body.has-module-chrome .page-header {
  align-items: stretch;
  flex-shrink: 0;
  height: auto;
  max-height: none;
}
body.has-module-chrome .page-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.has-module-chrome .programas-lib-hero,
body.has-module-chrome .logros-lib-hero {
  display: none;
}

.tab-panel { display: none; }
.tab-panel.active {
  display: block;
  animation: panelIn var(--dur-base) var(--ease-out);
}

@keyframes panelIn {
  from { opacity: 0.65; }
  to { opacity: 1; }
}

.panel-desc {
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 20px;
}

.section-heading {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  margin: 28px 0 14px;
}

.centro-subnav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.centro-subnav-btn {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
}

.centro-subnav-btn.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--text);
}

.centro-panel { display: none; }
.centro-panel.active { display: block; }

/* S077 — Calendario unificado */
.cal-grid { margin-top: 8px; }
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-day-cell {
  min-height: 88px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.cal-day-cell:hover { border-color: var(--primary); }
.cal-day-cell.selected {
  outline: 2px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}
.cal-day-cell.muted { opacity: 0.45; }
.cal-day-num { font-weight: 600; font-size: 0.85rem; }
/* Agenda + Calendario Centro: empty CTA alineado */
#centro-panel-agenda .empty-state,
#centro-panel-calendario .empty-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
#centro-panel-agenda .empty-state p,
#centro-panel-calendario .empty-state p {
  flex: 1 1 12rem;
  margin: 0;
}
#centro-panel-calendario .empty-state--secondary {
  border: 0;
  padding-top: 0;
  min-height: 0;
}
#centro-panel-calendario .cal-chip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.cal-chip {
  font-size: 0.7rem;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--surface-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cal-chip.class { background: color-mix(in srgb, #38bdf8 25%, var(--surface)); }
.cal-chip.appointment { background: color-mix(in srgb, var(--primary) 22%, var(--surface)); }
.cal-more { font-size: 0.7rem; color: var(--muted); }
.cal-bday { position: absolute; top: 4px; right: 4px; font-size: 0.75rem; }


.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  grid-column: 1 / -1;
}

.checkbox-row label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
}

.client-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.35rem;
}

.client-meta-row select {
  min-width: 10rem;
}

.hidden-legacy { display: none !important; }

.metrics-toolbar {
  flex-wrap: wrap;
  align-items: flex-end;
}

.churn-list .churn-alert-item {
  border-left: 4px solid var(--border);
  padding-left: 12px;
}

.churn-severity-red { border-left-color: var(--danger, #ef4444) !important; }
.churn-severity-amber { border-left-color: var(--warn, #f59e0b) !important; }

.churn-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
}

.churn-severity-red .churn-badge {
  background: color-mix(in srgb, var(--danger, #ef4444) 20%, transparent);
  color: var(--danger, #ef4444);
}

.churn-severity-amber .churn-badge {
  background: color-mix(in srgb, var(--warn, #f59e0b) 20%, transparent);
  color: var(--warn, #f59e0b);
}

.connect-banner {
  border-left: 4px solid var(--accent);
  margin-bottom: 12px;
}

/* ── Cards & stats ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.stat {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.88rem;
}

.stat.ok { border-color: rgba(34, 197, 94, 0.45); }
.stat.warn { border-color: rgba(245, 158, 11, 0.45); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.card h2, .card h3 { margin-bottom: 12px; font-size: 1.05rem; }
.card-body-text { color: var(--muted); line-height: 1.65; }

.welcome-card h2 { font-size: 1.35rem; margin-bottom: 10px; }

/* ── Centro de mando (Inicio) ── */
.cmd-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.cmd-date {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 4px;
}

.cmd-welcome {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-wrap: balance;
}

.cmd-sub {
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 4px;
  max-width: 52ch;
}

.cmd-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cmd-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.cmd-pill.ok {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
  color: var(--ok);
}

.cmd-section { margin-bottom: 18px; }

.cmd-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.cmd-section-head h3,
.cmd-panel > h3 {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.cmd-link-btn {
  font-size: 0.8rem;
  padding: 6px 10px;
}

.cmd-agenda-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
}

.cmd-agenda-card {
  flex: 0 0 min(260px, 78vw);
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 14px 12px;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.cmd-agenda-card:hover {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}

.cmd-agenda-card.is-now {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface));
}

.cmd-agenda-time {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}

.cmd-agenda-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.cmd-agenda-meta {
  font-size: 0.75rem;
  color: var(--muted);
}

.cmd-mid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.cmd-bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.cmd-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  min-width: 0;
}

.cmd-aforo-body {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.cmd-ring {
  --pct: 0;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--surface) 72%, transparent 73%),
    conic-gradient(var(--primary) calc(var(--pct) * 1%), var(--surface-2) 0);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.cmd-ring-inner {
  text-align: center;
}

.cmd-ring-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.cmd-ring-label {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
}

.cmd-aforo-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.85rem;
}

.cmd-aforo-legend strong {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.cmd-aforo-legend span { color: var(--muted); }

.cmd-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  margin-right: 6px;
  flex-shrink: 0;
}

.cmd-status-dot.warn { background: var(--warn); }
.cmd-status-dot.err { background: var(--err); }

.cmd-sede-dot {
  background: var(--sede-dot, var(--ok));
  margin-right: 0;
}

.cmd-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.cmd-legend-row span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmd-aforo-sedes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 4.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 0;
}

.cmd-action-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.cmd-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--primary);
  color: var(--tenant-primary-contrast, #fff);
  cursor: pointer;
  text-align: left;
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}

.cmd-action:nth-child(n + 2) {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

.cmd-action:hover { filter: brightness(1.05); }
.cmd-action:active { transform: scale(0.985); }

.cmd-action-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}

.cmd-action:nth-child(n + 2) .cmd-action-icon {
  background: var(--primary-soft);
  color: var(--primary);
}

.cmd-action-copy { flex: 1; min-width: 0; }
.cmd-action-label { display: block; font-weight: 600; font-size: 0.9rem; }
.cmd-action-desc { display: block; font-size: 0.75rem; opacity: 0.8; }
.cmd-action-arrow { opacity: 0.7; font-size: 1rem; }

.cmd-dense-list {
  list-style: none;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cmd-dense-list li {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.84rem;
}

.cmd-dense-list li:last-child { border-bottom: none; }

.cmd-row-action {
  cursor: pointer;
  border-radius: 8px;
  margin: 0 -6px;
  padding-left: 6px !important;
  padding-right: 6px !important;
  transition: background 0.15s ease;
}
.cmd-row-action:hover,
.cmd-row-action:focus-visible {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  outline: none;
}

.cmd-api-error {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--err) 35%, var(--border));
  background: color-mix(in srgb, var(--err) 10%, transparent);
  color: var(--text);
  font-size: 0.86rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.cmd-api-error[hidden] { display: none !important; }
.cmd-api-error strong { font-weight: 600; }
.cmd-api-error .ghost { margin-left: auto; }

.cmd-aforo-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cmd-highlight-target {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
  transition: background 0.3s ease, outline-color 0.3s ease;
}

.cmd-dense-time {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.78rem;
}

.cmd-dense-main { min-width: 0; }
.cmd-dense-main strong {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmd-dense-main span {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
}

.cmd-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--ok);
  white-space: nowrap;
}

.cmd-badge.warn {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn);
}

.cmd-badge.muted {
  background: var(--surface-2);
  color: var(--muted);
}

.cmd-empty {
  color: var(--muted);
  font-size: 0.84rem;
  padding: 10px 0;
}

.cmd-skeleton {
  flex: 0 0 220px;
  height: 92px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}

.cmd-skeleton-block {
  flex: 1;
  width: 100%;
  height: 108px;
}

@keyframes shimmer {
  to { background-position: -200% 0; }
}

/* Quick links (legacy class kept for other uses) */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.quick-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.quick-card:hover {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  background: var(--surface-2);
}

.quick-card-icon { font-size: 1.4rem; }
.quick-card-label { font-weight: 600; font-size: 0.92rem; }
.quick-card-desc { font-size: 0.75rem; color: var(--muted); }

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

.cmd-modules {
  grid-template-columns: 1fr;
}

.module-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.module-card h4 { font-size: 0.8rem; margin: 0; font-weight: 500; }
.module-card p { font-size: 0.8rem; color: var(--muted); margin: 0; }
.module-card .module-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

@media (max-width: 1100px) {
  .cmd-bottom { grid-template-columns: 1fr 1fr; }
  .cmd-bottom .cmd-panel:last-child { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
  .cmd-mid,
  .cmd-bottom { grid-template-columns: 1fr; }
}

/* Lists */
.list { list-style: none; }
.list li {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--surface);
}

.list li.empty-state {
  text-align: center;
  padding: 32px 20px;
  border-style: dashed;
  background: transparent;
}

.empty-icon { font-size: 2rem; display: block; margin-bottom: 8px; opacity: 0.5; }
.empty-state p { color: var(--muted); font-size: 0.9rem; }

.list li.loading-state {
  text-align: center;
  color: var(--muted);
  border-style: dashed;
  background: transparent;
}

/* ── Forms ── */
.form-grid { display: grid; gap: 8px; margin-bottom: 8px; }
.form-grid label { margin-top: 4px; text-transform: none; letter-spacing: 0; font-size: 0.85rem; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
}

.toolbar input, .toolbar select {
  flex: 1;
  min-width: 140px;
}

/* ── Planner ── */
.planner-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 2fr);
  gap: 14px;
  margin-top: 8px;
}

.planner-catalog,
.planner-sessions {
  border-radius: var(--radius);
}

.planner-catalog h3, .planner-sessions h3 { margin-bottom: 12px; }

.planner-toolbar {
  flex-wrap: wrap;
  align-items: flex-end;
}

.toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 160px;
}

.field-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.planner-catalog .filter-row {
  margin-bottom: 6px;
}

.planner-catalog .chip-row {
  margin-bottom: 10px;
}

.planner-catalog .filter-actions {
  margin-bottom: 8px;
}

.planner-catalog-root {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 72vh;
  overflow-y: auto;
  margin-top: 8px;
}

.planner-group .planner-group-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px 10px;
}

.session-block-row {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) repeat(3, auto) auto auto;
  gap: 8px;
  align-items: end;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.block-select-wrap {
  display: flex;
  align-items: center;
  padding-bottom: 6px;
}

.block-select-wrap input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.block-ungroup {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.block-ungroup:hover {
  color: var(--text);
  border-color: var(--primary);
}

.circuit-group {
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, var(--sys-surface, var(--surface, #1a1a1a)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: 12px;
  padding: 6px 10px 8px;
  margin: 8px 0;
}

.circuit-group.is-dragging-unit {
  opacity: 0.55;
}

.circuit-group.is-drop-target,
.session-block-row.is-drop-target,
.lib-circuit.is-drop-target,
.saved-item.is-drop-target,
.libpane-plan-session.is-drop-target {
  outline: 2px dashed var(--primary);
  outline-offset: 2px;
}

.session-block-row.is-dragging-unit,
.saved-item.is-dragging-unit,
.libpane-plan-session.is-dragging-unit {
  opacity: 0.55;
}

.circuit-group .session-block-row {
  padding: 6px 0;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 55%, transparent);
  border-color: color-mix(in srgb, var(--primary) 18%, var(--hairline, var(--border)));
}

/* FitModal → body: mismos tokens sin depender de #tab-planificador. */
.planner-detail-body .circuit-group {
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border));
  background: color-mix(in srgb, var(--primary) 14%, var(--sys-surface, var(--surface, #1a1a1a)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent);
}

.planner-detail-body .circuit-group .session-block-row {
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 62%, transparent);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--hairline, var(--border)));
}

.circuit-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  flex-wrap: wrap;
  cursor: grab;
}

.circuit-group-header:active {
  cursor: grabbing;
}

.circuit-group-move {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.circuit-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary, #fff);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.circuit-group-header .hint {
  flex: 1;
}

.circuit-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.session-block-row:last-child { border-bottom: none; }

.session-block-row label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.7rem;
  color: var(--muted);
}

.session-block-row input[type="number"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.session-block-name {
  font-weight: 600;
  font-size: 0.88rem;
}

.block-delete {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--err);
  cursor: pointer;
  font-size: 0.78rem;
}

/* .modal-dialog: ver "Sistema de modales" al final de este archivo. */

.survey-result-question {
  margin-bottom: 12px;
}

.survey-result-chart {
  min-height: 100px;
}

.table-wrap {
  overflow-x: auto;
  margin-top: 8px;
}

.draggable-item {
  cursor: grab;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}

.session-dropzone {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
  min-height: 80px;
}

.session-dropzone.drag-over {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.session-dropzone h4 { margin: 0; font-size: 0.95rem; }

.session-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 0 8px;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.session-toggle h4 { flex: 1; }

.session-toggle-caret {
  transition: transform 0.15s ease;
  color: var(--muted);
}

.session-block-count {
  font-size: 0.75rem;
  color: var(--muted);
  flex-shrink: 0;
}

.session-dropzone.session-collapsed .session-toggle-caret {
  transform: rotate(-90deg);
}

.session-dropzone.session-collapsed .session-blocks {
  display: none;
}

.session-save-all {
  margin-top: 8px;
  width: 100%;
}

#plan-select {
  flex: 1;
  min-width: 180px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

/* ── Charts ── */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-height: 120px;
  padding: 12px 0;
}

.bar-chart .bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 36px;
}

.bar-chart .bar {
  width: 100%;
  max-width: 48px;
  background: var(--primary);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
}

.bar-chart .bar.alert { background: var(--err); }
.bar-chart .bar-label { font-size: 0.65rem; color: var(--muted); text-align: center; }

.swatch {
  width: 100%;
  height: 80px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  border: 1px solid var(--border);
}

.meta dt { color: var(--muted); font-size: 0.78rem; margin-top: 12px; }
.meta dd { font-family: ui-monospace, monospace; font-size: 0.88rem; }

.brand-logo-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.palette-swatch {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.palette-swatch .color-block {
  height: 56px;
}

.palette-swatch .color-meta {
  padding: 8px 10px;
  font-size: 0.75rem;
  background: var(--surface-2);
}

.palette-swatch .color-meta strong {
  display: block;
  font-size: 0.8rem;
  margin-bottom: 2px;
}

/* ── Toasts ── */
.toast-root {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.88rem;
  box-shadow: var(--elev-2);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  max-width: 360px;
  pointer-events: auto;
}

.toast.show { opacity: 1; transform: none; }
.toast-success { border-color: rgba(34, 197, 94, 0.5); }
.toast-error { border-color: rgba(239, 68, 68, 0.5); }
.toast-info { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow);
    width: min(var(--sidebar-w), 86vw);
    pointer-events: auto;
  }

  .sidebar.open { transform: translateX(0); }
  .main-area {
    margin-left: 0;
    width: 100%;
  }
  .sidebar-toggle { display: flex; align-items: center; justify-content: center; }
  .planner-grid { grid-template-columns: 1fr; }
  .content { padding: 20px 16px; }
  .page-header { padding: 14px 16px; }
  .toast-root { left: 16px; right: 16px; top: 12px; }
  .toast { max-width: none; }
}

@media (max-width: 480px) {
  .stat-grid,
  .quick-grid,
  .exercise-card-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Catálogo ejercicios (S022 / S036) ── */
.filter-hint {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 10px;
}

.filter-row {
  margin-bottom: 8px;
}

.filter-row-label {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.filter-actions {
  margin-bottom: 12px;
}

.filter-chips,
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.load-more-row {
  text-align: center;
  margin: 12px 0 4px;
}

/* Toolbar Ejercicios: chips en fila con wrap real.
   NO usar .icon-btn aquí — su width:36px (más abajo en el CSS) aplastaba
   las etiquetas «Grupo muscular» / «Equipamiento» y se solapaban. */
.exercise-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 6px 4px 8px;
  margin-bottom: 4px;
  position: static;
}

.exercise-toolbar-left,
.exercise-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  flex: 0 1 auto;
  min-width: 0;
}

.exercise-toolbar-left > *,
.exercise-toolbar-right > * {
  flex: 0 0 auto;
}

.exercise-toolbar .toolbar-spacer {
  flex: 1 1 12px;
  min-width: 8px;
  margin: 0;
}

.exercise-toolbar .exercise-total,
.exercise-toolbar #exercise-total,
#tab-ejercicios > .exercise-total,
#tab-ejercicios #exercise-total {
  display: block;
  margin: 0 4px 6px;
  font-size: 0.72rem;
  color: var(--muted);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chip de filtro / acción: nunca se encoge; etiqueta completa legible. */
.ex-tool-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: auto;
  min-width: max-content;
  height: 36px;
  padding: 0 12px 0 10px;
  margin: 0;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  position: static;
  box-sizing: border-box;
  transition:
    transform var(--dur-fast, 160ms) var(--ease-out, ease),
    border-color var(--dur-fast, 160ms) ease,
    background var(--dur-fast, 160ms) ease,
    color var(--dur-fast, 160ms) ease;
}

.ex-tool-chip-icon {
  width: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 10px;
}

.ex-tool-chip .nav-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
}

.ex-tool-chip-label {
  font-size: 0.78rem;
  font-weight: 550;
  line-height: 1;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  flex: 0 0 auto;
}

.ex-tool-chip:hover {
  transform: scale(1.03);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
}

.ex-tool-chip.is-active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
}

/* Buscador compacto: icono → campo expandible (flujo normal, sin absolute) */
.ex-search-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  position: static;
}

.ex-search-wrap .exercise-search,
.ex-search-wrap #ex-search {
  width: 0;
  min-width: 0;
  max-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  opacity: 0;
  pointer-events: none;
  transition:
    width var(--dur-fast, 160ms) var(--ease-out, ease),
    max-width var(--dur-fast, 160ms) var(--ease-out, ease),
    opacity var(--dur-fast, 160ms) var(--ease-out, ease),
    padding var(--dur-fast, 160ms) var(--ease-out, ease);
}

.ex-search-wrap.is-open #ex-search {
  width: min(220px, 42vw);
  max-width: 240px;
  min-width: 140px;
  padding: 6px 10px;
  opacity: 1;
  pointer-events: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
}

.ex-filter-dropdown {
  position: relative;
  flex: 0 0 auto;
}

.ex-filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  z-index: 40;
  min-width: 220px;
  max-width: min(320px, 80vw);
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 96%, #000);
  box-shadow: var(--elev-2, 0 12px 28px rgba(0, 0, 0, 0.35));
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ex-filter-panel[hidden] {
  display: none !important;
}

/* Legacy labeled icon-btn (otros módulos); no usar en toolbar Ejercicios. */
.icon-btn-labeled {
  width: auto !important;
  min-width: max-content;
  height: 36px;
  padding: 0 10px 0 8px;
  gap: 6px;
  flex-shrink: 0;
}

.icon-btn-labeled .nav-ico {
  flex-shrink: 0;
}

.icon-btn-label {
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.ex-active-filters {
  margin: 0 0 8px;
  font-size: 0.72rem;
}

#tab-ejercicios {
  position: relative;
}

.ex-fab {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--primary) 92%, #fff),
    var(--primary)
  );
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent),
    0 10px 24px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur-fast, 160ms) var(--ease-out, ease), box-shadow var(--dur-fast, 160ms) ease;
}

.ex-fab .nav-ico {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.ex-fab:hover {
  transform: translateY(-2px) scale(1.04);
}

.ex-fab:active {
  transform: translateY(0) scale(0.98);
}

.exercise-card-grid-flat {
  display: grid;
  /* ~5 cards/fila en desktop (cards un poco más grandes que minmax 155). */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1100px) {
  #tab-ejercicios .exercise-card-grid-flat {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Secciones del catálogo: "Recientes" primero, luego A–Z por nombre. */
.exercise-section {
  margin-bottom: 18px;
}

.exercise-section:last-child {
  margin-bottom: 0;
  padding-bottom: 72px;
}

.exercise-section-header {
  margin: 0 2px 10px;
  padding-bottom: 7px;
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 78%, transparent);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--primary);
}

.exercise-section:first-child .exercise-section-header {
  margin-top: 2px;
}

.exercise-infinite-status {
  text-align: center;
  padding: 10px 0 4px;
  font-size: 0.78rem;
  color: var(--muted);
}

.exercise-card .ex-meta-sep {
  margin: 0 4px;
  opacity: 0.55;
}

.exercise-card .ex-meta-grupo {
  color: color-mix(in srgb, var(--primary) 70%, var(--muted));
}

/* Modal ejercicio — wizard compacto (no dual-column oversized) */
.modal-dialog.exercise-form-dialog,
.modal-dialog.exercise-form-dialog.af-wizard-dialog {
  --modal-w: min(640px, 94vw);
  --modal-max-h: min(72vh, 640px);
}

.modal-dialog.exercise-form-dialog .modal-body {
  overflow: auto;
  padding: 12px 18px 16px;
}

.modal-dialog.exercise-form-dialog.af-wizard-dialog .modal-body.af-wizard-body {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.exercise-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 18px 22px;
  align-items: start;
}

.exercise-form-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.exercise-form-col-technique {
  gap: 8px;
}

.exercise-form-body textarea {
  width: 100%;
  min-height: 68px;
  max-height: 120px;
  resize: vertical;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  line-height: 1.35;
}

.exercise-form-body textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}

.exercise-form-body .field-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.exercise-form-body .field-optional {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.78em;
}

.exercise-form-footer {
  justify-content: flex-end;
}

.exercise-form-footer .exercise-form-delete {
  margin-right: auto;
  order: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.exercise-form-footer .exercise-form-delete .nav-ico {
  width: 16px;
  height: 16px;
}

.exercise-form-footer .exercise-form-delete.hidden {
  display: none;
}

.exercise-form-footer .ghost:not(.exercise-form-delete) {
  order: 1;
}

.exercise-form-footer .btn-primary {
  order: 2;
}

.select-with-add {
  display: block;
}

.ex-field-select-mode,
.ex-field-custom-mode {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ex-field-select-mode .ex-select,
.exercise-form-body .ex-select {
  flex: 1;
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%) right 12px top 50% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--muted) 50%, transparent 50%) right 7px top 50% / 6px 6px no-repeat,
    var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 8px 28px 8px 10px;
  font: inherit;
  font-size: 0.88rem;
  min-height: 38px;
}

.select-with-add .ex-select:focus,
.exercise-form-body .ex-select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}

.ex-select-add,
.ex-select-back {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
}

.ex-back-ico {
  transform: rotate(90deg);
}

.ex-field-custom-mode .ex-other-input {
  flex: 1;
  margin-top: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
  font-size: 0.88rem;
  min-height: 38px;
}

.ex-field-custom-mode .ex-other-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}

.ex-other-input {
  margin-top: 6px;
  width: 100%;
}

@media (max-width: 820px) {
  .exercise-form-grid {
    grid-template-columns: 1fr;
  }
  .modal-dialog.exercise-form-dialog .modal-body {
    overflow-y: auto;
  }
}

@media (max-width: 640px) {
  .exercise-form-body .field-row-2 {
    grid-template-columns: 1fr;
  }
  .ex-fab {
    right: 12px;
    bottom: 12px;
    width: 48px;
    height: 48px;
  }
}

.planner-ex-search {
  width: 100%;
  margin-bottom: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.82rem;
}

.planner-load-more {
  width: 100%;
  margin-top: 6px;
  flex: 0 0 auto;
}

.exercise-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--primary) 55%, var(--muted));
  font-size: 1.4rem;
  background:
    radial-gradient(120% 80% at 50% 20%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 62%),
    var(--sys-surface-2, var(--surface-2));
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 8px;
}

.exercise-thumb-fallback svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  opacity: 0.85;
}

.planner-drag-item {
  /* Filas de una sola línea, más compactas — con la altura previa (thumb
     44px + 2 líneas de texto ≈ 60-70px) solo se veían 9-10 ejercicios de una
     vez en 100. A ~30px por fila se ven 15-18 sin scroll (S054-004,
     ajuste real tras confirmar en QA que el cambio anterior no bastaba). */
  cursor: grab;
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  background: var(--surface-2);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
}

.planner-drag-item .planner-drag-thumb {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 5px;
  object-fit: cover;
}

.planner-drag-item .planner-drag-thumb.exercise-thumb-fallback {
  font-size: 0.75rem;
}

.planner-drag-body {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
}

.planner-drag-item strong {
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.planner-drag-item .hint {
  font-size: 0.72rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.planner-drag-video {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.7rem;
}

.filter-chip {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.76rem;
  cursor: pointer;
}

.filter-chip.active {
  border-color: var(--primary);
  color: var(--text);
  background: var(--primary-soft);
}

.filter-chip .chip-count {
  opacity: 0.75;
  margin-left: 4px;
}

.exercise-catalog {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  max-height: none;
  padding: 2px 4px 8px 0;
  min-height: 0;
}

/* Planner groups keep the compact list look; catalog cards are scoped below. */
.exercise-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  /* IMPORTANTE: no poner `overflow: hidden` aquí — cualquier ancestro con
     overflow distinto de `visible` entre un elemento `position: sticky` y su
     contenedor con scroll real desactiva el sticky por completo (bug de CSS
     bien conocido). El recorte de esquinas se aplica en `.exercise-group-body`
     (ver abajo), que es *hermano* del `<summary>` sticky, no su ancestro
     (S054-001, fix real tras detectar que el sticky no se veía en QA). */
}

.exercise-group summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--radius) var(--radius) 0 0;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
}

.exercise-group-body {
  overflow: hidden;
  border-radius: 0 0 var(--radius) var(--radius);
}

.exercise-group summary::-webkit-details-marker { display: none; }

.exercise-group-count {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}

/* Catálogo Ejercicios — tarjetas de grupo en grid */
#exercise-catalog .exercise-group {
  --eg-accent: hsl(var(--eg-hue, 28) 58% 52%);
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--eg-accent) 28%, var(--border));
  background:
    radial-gradient(120% 110% at 0% 0%, color-mix(in srgb, var(--eg-accent) 22%, transparent), transparent 62%),
    radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 55%),
    var(--surface);
  box-shadow: var(--elev-1);
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

#exercise-catalog .exercise-group:not([open]):hover {
  transform: translateY(-2px) scale(1.012);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent),
    0 10px 28px rgba(7, 20, 18, 0.32);
}

#exercise-catalog .exercise-group:not([open]):hover .exercise-group-visual {
  transform: translateY(-1px) scale(1.06);
}

#exercise-catalog .exercise-group[open] {
  grid-column: 1 / -1;
  transform: none;
}

#exercise-catalog .exercise-group summary {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 118px;
  padding: 16px;
  position: static;
  background: transparent;
  border-radius: 14px;
}

#exercise-catalog .exercise-group[open] summary {
  flex-direction: row;
  align-items: center;
  min-height: 0;
  padding: 12px 14px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-radius: 14px 14px 0 0;
  backdrop-filter: blur(6px);
}

.exercise-group-visual {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--eg-accent);
  background: color-mix(in srgb, var(--eg-accent) 16%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--eg-accent) 35%, transparent);
  transition: transform var(--dur-fast) var(--ease-out);
}

.exercise-group-visual svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exercise-group-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.exercise-group-name {
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}

#exercise-catalog .exercise-group-count {
  font-size: 0.72rem;
}

.exercise-group-chevron {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  opacity: 0.7;
  transition: transform var(--dur-fast) var(--ease-out);
  align-self: flex-end;
}

#exercise-catalog .exercise-group[open] .exercise-group-chevron {
  transform: rotate(225deg);
  margin-left: auto;
}

#exercise-catalog .exercise-group[open] .exercise-group-visual {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

#exercise-catalog .exercise-group[open] summary {
  gap: 12px;
}

#exercise-catalog .exercise-group[open] .exercise-group-meta {
  flex: 1;
}

.exercise-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 10px;
  padding: 12px 16px 16px;
}

.exercise-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition:
    border-color var(--dur-fast, 160ms) var(--ease-out, ease),
    box-shadow var(--dur-fast, 160ms) var(--ease-out, ease),
    transform var(--dur-fast, 160ms) var(--ease-out, ease);
}

/* Tarjeta interactiva: se siente "clickeable" al pasar el mouse. */
.exercise-card:hover {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

/* Nombre del ejercicio — tipografía premium (Syne, ya usada en títulos del
   portal) en vez del sans genérico: nombres como "All fours go in stretch"
   necesitaban más presencia. */
.exercise-card h4 {
  margin: 0;
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  padding-right: 28px;
}

.exercise-card .ex-meta { font-size: 0.75rem; color: var(--muted); }

.exercise-thumb-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
}

.exercise-thumb-wrap:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.exercise-thumb {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg);
  display: block;
  transition: transform var(--dur-base, 220ms) var(--ease-out, ease);
}

.exercise-thumb-wrap:hover .exercise-thumb,
.exercise-thumb-wrap:hover .exercise-thumb-fallback {
  transform: scale(1.045);
}

/* Overlay con ícono de play — refuerza que la miniatura es clickeable. */
.exercise-thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast, 160ms) var(--ease-out, ease);
}

.exercise-thumb-wrap:hover .exercise-thumb-overlay,
.exercise-thumb-wrap:focus-visible .exercise-thumb-overlay {
  opacity: 1;
}

.exercise-thumb-overlay .nav-ico {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  transform: scale(0.85);
  transition: transform var(--dur-fast, 160ms) var(--ease-out, ease);
}

.exercise-thumb-wrap:hover .exercise-thumb-overlay .nav-ico {
  transform: scale(1);
}

/* Preview en hover (iframe YouTube/Vimeo muteado en loop, o <video> directo)
   — cubre la miniatura mientras el mouse está encima. */
.exercise-thumb-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  pointer-events: none;
}

.exercise-thumb-wrap.is-previewing .exercise-thumb-overlay {
  background: transparent;
}

.exercise-card .btn-video {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
  flex: 0 0 auto;
}

.exercise-card .btn-video .nav-ico {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

/* Especificidad extra a propósito: gana sobre `.icon-btn:hover:not(:disabled)`
   (definida más abajo en el archivo) para mantener el tinte primario. */
.exercise-card .exercise-card-actions .btn-video:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 28%, var(--primary-soft));
  color: var(--primary);
}

.exercise-card-actions {
  margin-top: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Botones de acción: escala + borde más brillante al pasar el mouse, para
   que se perciban interactivos (además del cambio de color ya existente). */
.exercise-card-actions button {
  transition:
    transform var(--dur-fast, 160ms) var(--ease-out, ease),
    border-color var(--dur-fast, 160ms) var(--ease-out, ease),
    background var(--dur-fast, 160ms) var(--ease-out, ease),
    box-shadow var(--dur-fast, 160ms) var(--ease-out, ease);
}

.exercise-card-actions button:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.btn-show-more-exercises {
  margin: 0 16px 14px;
  align-self: flex-start;
}

.select-with-other {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* .modal-header lo estiliza el sistema de modales (final del archivo). */

.modal-media iframe,
.modal-media video {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: 10px;
  background: #000;
}

/* ── Comidas (nutrición) ── */
.meals-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 2fr);
  gap: 16px;
  margin-top: 8px;
}

.meals-sidebar { display: flex; flex-direction: column; gap: 12px; }
.meals-main { display: flex; flex-direction: column; gap: 12px; }

.meals-toolbar {
  flex-wrap: wrap;
  align-items: center;
}

.meals-filter-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
}

.meals-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.meal-review-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meal-review-card .meal-photo-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 10px;
  cursor: zoom-in;
  background: var(--bg);
}

.meal-review-card .meal-photo-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 10px;
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.meal-review-card h4 { font-size: 0.95rem; }
.meal-review-card .meal-meta { font-size: 0.78rem; color: var(--muted); }

.macros-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
}

.macros-row strong { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; }

.meal-review-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meal-review-actions textarea {
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  resize: vertical;
}

.meal-review-buttons {
  display: flex;
  gap: 8px;
}

.meal-review-buttons .btn-approve {
  border-color: var(--ok);
  color: var(--ok);
}

.meal-review-buttons .btn-reject {
  border-color: var(--err);
  color: var(--err);
}

.plan-macros-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 8px 0;
}

.plan-macro-stat {
  padding: 10px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 0.85rem;
}

.plan-macro-stat span {
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
}

.plan-meals-list {
  margin-top: 8px;
  padding-left: 18px;
  font-size: 0.85rem;
}

.meals-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.meals-plan-actions .btn-primary {
  flex: 1 1 auto;
}

.plan-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.plan-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.btn-small {
  padding: 4px 10px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--muted);
  margin-left: 6px;
  vertical-align: middle;
}

.badge-success {
  background: rgba(46, 160, 67, 0.18);
  color: #2ea043;
}

.meals-plan-history-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.meals-plan-history-item:last-child {
  border-bottom: none;
}

.food-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.food-form-dialog {
  --modal-w: min(780px, 96vw);
  --modal-max-h: min(92svh, 820px);
}

.food-form-dialog .modal-body.food-form-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.food-form-dialog .modal-header {
  padding: 10px 14px;
  flex: 0 0 auto;
}

.food-form-dialog .modal-footer {
  padding: 8px 14px 12px;
  flex: 0 0 auto;
  border-top: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 92%, transparent);
}

.food-form-dialog label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  min-width: 0;
}

.food-form-dialog label input,
.food-form-dialog label select {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text);
  padding: 6px 8px;
  min-height: 34px;
}

.food-form-row {
  display: grid;
  gap: 6px;
  align-items: end;
  min-width: 0;
}

.food-form-row--1 { grid-template-columns: minmax(0, 1fr); }
.food-form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.food-form-row--3 { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(72px, 0.7fr); }
.food-form-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.food-form-row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.food-form-row--3 > .span-2 { grid-column: span 2; }

.food-form-row--flags {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.food-form-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  padding-bottom: 4px;
}

.food-form-dialog .food-form-checks .checkbox-row {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 550;
  color: var(--text);
  white-space: nowrap;
}

.food-form-diet-field {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
}

.food-form-field-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  min-height: 1.2em;
}

.food-form-row--allergens-diet {
  align-items: start;
}

.food-form-allergens-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.nut-allergen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nut-allergen-chip {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
}

.nut-allergen-chip:hover {
  border-color: color-mix(in srgb, #F97316 45%, var(--border));
  color: #ea580c;
}

.nut-allergen-chip.is-on,
.nut-allergen-chip:has(input:checked) {
  border-color: color-mix(in srgb, #F97316 70%, transparent);
  background: color-mix(in srgb, #F97316 14%, transparent);
  color: #ea580c;
}

.nut-allergen-other {
  width: 100%;
  max-width: 100%;
  margin: 0;
  min-height: 34px;
  font-size: 0.8rem;
}

.food-form-diet-tip {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--muted);
}

.food-form-dialog #food-form-error,
.food-form-dialog #nutrition-recipe-form-error {
  margin: 0;
  font-size: 0.78rem;
}

.food-form-dialog .modal-footer .btn-primary {
  background: #f97316;
  border-color: #f97316;
}
.food-form-dialog .modal-footer .btn-primary:disabled,
.food-form-dialog .modal-footer .btn-primary.chat-attach-gated {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.35);
  pointer-events: none;
}
.food-form-req {
  color: #f87171;
  font-weight: 700;
  margin-left: 2px;
}
.food-form-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.food-form-sub {
  margin: 0;
  font-size: 0.78rem;
}
.food-form-section-label {
  margin: 10px 0 6px;
  font-size: 0.78rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
}
.food-macro-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.food-macro-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.food-macro-dot--kcal { background: #ef4444; }
.food-macro-dot--p { background: #22c55e; }
.food-macro-dot--c { background: #38bdf8; }
.food-macro-dot--g { background: #fb923c; }
.food-macro-dot--f { background: #a78bfa; }
.food-form-extras-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 8px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, #fdba74 88%, var(--text));
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.food-form-extras-toggle .nav-ico {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}
.food-form-extras-toggle[aria-expanded="true"] .nav-ico {
  transform: rotate(180deg);
}
.food-form-extras {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
}
.food-form-extras-title {
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.food-form-field-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
}
.food-form-medidas-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr) auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 6px;
}
.food-form-medidas-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
}
.foods-medida-add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.food-form-medidas-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.food-form-medidas-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 80%, transparent);
  border: 1px solid var(--hairline, var(--border));
  font-size: 0.8rem;
}
.foods-catalog-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.foods-catalog-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
}
.foods-catalog-search-btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.foods-catalog-search-btn.is-on,
.foods-catalog-search-btn[aria-expanded="true"] {
  border-color: color-mix(in srgb, #f97316 55%, var(--border));
  color: #fdba74;
  background: color-mix(in srgb, #f97316 12%, transparent);
}
.foods-catalog-search-expand {
  display: flex;
  align-items: center;
  min-width: 0;
}
.foods-catalog-search-expand[hidden] {
  display: none !important;
}
.foods-catalog-search-expand input {
  width: min(220px, 42vw);
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 55%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
}
.foods-catalog-filters {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}
.foods-catalog-filter-btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.foods-catalog-filter-btn.is-on,
.foods-catalog-filter-btn.is-open,
.foods-catalog-filter-btn[aria-expanded="true"] {
  border-color: color-mix(in srgb, #f97316 55%, var(--border));
  color: #fdba74;
  background: color-mix(in srgb, #f97316 12%, transparent);
}
.foods-catalog-filters-pop {
  position: absolute;
  z-index: 55;
  top: calc(100% + 0.45rem);
  right: 0;
  left: auto;
  min-width: min(34rem, 92vw);
  max-width: min(38rem, 96vw);
  padding: 0.75rem 0.85rem 0.8rem;
  border-radius: 14px;
  background: var(--sys-surface-2, var(--surface));
  color: var(--text);
  border: 1px solid var(--hairline, var(--border));
  box-shadow: var(--elev-2, 0 12px 32px rgba(0, 0, 0, 0.32));
  display: none;
  gap: 0.55rem;
}
.foods-catalog-filters-pop:not([hidden]) {
  display: grid;
}
.foods-catalog-filters-pop::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: var(--sys-surface-2, var(--surface));
  border-top: 1px solid var(--hairline, var(--border));
  border-left: 1px solid var(--hairline, var(--border));
  transform: rotate(45deg);
}
.foods-catalog-filters-kicker {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.foods-catalog-tipo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  padding: 0;
}
.foods-tipo-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
  cursor: pointer;
  user-select: none;
}
.foods-tipo-radio input {
  accent-color: #f97316;
  width: 14px;
  height: 14px;
}
.foods-catalog-nutrient-filter,
.foods-catalog-mostrar-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.78rem;
  overflow-x: auto;
}
.foods-catalog-nutrient-filter select,
.foods-catalog-nutrient-filter input[type="number"] {
  min-height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 50%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
}
.foods-catalog-nutrient-filter select {
  max-width: 8.5rem;
}
.foods-catalog-nutrient-filter input[type="number"] {
  width: 58px;
  padding: 4px 6px;
}
.foods-nutrient-mostrar,
.foods-nutrient-entre,
.foods-nutrient-y,
.foods-nutrient-per,
.foods-nutrient-unit {
  color: var(--muted);
  white-space: nowrap;
}
.foods-nutrient-apply {
  margin-left: 4px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  flex: 0 0 auto;
}
#nutrition-kind-alimentos,
#nutrition-kind-alimentos .nutrition-libpane-main,
#nutrition-lib-foods {
  /* Igual que Recetas: el scroll vive en .nut-pane, no en el grid. */
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: auto;
  height: auto;
  overflow: visible;
}

.foods-catalog-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.foods-catalog-item:last-child {
  border-bottom: none;
}

.foods-catalog-item-info .hint {
  margin: 2px 0 0;
}

.foods-catalog-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Pager Anterior/Siguiente — reemplaza el "Cargar más" acumulativo del
   catálogo de alimentos, más amigable para navegar sin volcar todo de una
   vez (S056-002). Genérico: reutilizable por otras listas paginadas. */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.pager .hint {
  margin: 0;
  text-align: center;
  flex: 1;
}

.plan-item-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.plan-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Wizard plan nutricional (S037) ── */
/* Ancho y alto los resuelve el sistema de modales (final del archivo);
   aquí solo el tamaño propio de este wizard. */
.nutrition-wizard-dialog { --modal-w: 600px; }
.nutrition-wizard-dialog .modal-body {
  overflow-x: hidden;
  overflow-y: auto;
}
.nutrition-food-results {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 200px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.wizard-step-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 12px;
  padding: 0 4px;
}

.nutrition-wizard-panel label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  font-size: 0.85rem;
}

.nutrition-tipo-fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0;
}

.nutrition-tipo-fieldset legend {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 0 4px;
}

.radio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.88rem;
  cursor: pointer;
}

.nutrition-macros-grid {
  grid-template-columns: repeat(2, 1fr);
}

.nutrition-comidas-builder {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 10px;
}

.nutrition-meal-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-2);
}

.nutrition-meal-block header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.nutrition-meal-block header input {
  flex: 1;
}

.nutrition-meal-items {
  list-style: none;
  font-size: 0.82rem;
  margin-bottom: 8px;
}

.nutrition-meal-items li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

.nutrition-meal-items li:last-child {
  border-bottom: none;
}

.nutrition-meal-items .porciones-input {
  width: 56px;
  padding: 4px 6px;
}

.nutrition-food-search-wrap {
  position: relative;
}

.nutrition-food-search-wrap input {
  width: 100%;
}

.nutrition-food-results {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 200px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.nutrition-food-results button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
}

.nutrition-food-results button:hover {
  background: var(--surface-2);
}

.nutrition-wizard-totals {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.nutrition-totals-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.nutrition-day-meal {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0;
  background: var(--surface-2);
}
.nutrition-day-meal header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.nutrition-day-meal ul { margin: 6px 0 0; padding-left: 1.1em; }
.nutrition-exchanges { font-size: 0.85rem; margin-top: 12px; }
/* Body metrics form styles live under .nutrition-body-dialog RD block below */
.nutrition-alert-hint { flex: 1; margin: 0; }
.meal-exception-reason { color: var(--sys-error, #b45309); font-size: 0.85rem; }
.nutrition-copilot-preview { margin-top: 12px; font-size: 0.9rem; }

.nutrition-total-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.75rem;
  color: var(--muted);
}

.nutrition-total-stat strong {
  font-size: 0.95rem;
  color: var(--text);
}

.nutrition-meal-items li {
  flex-wrap: wrap;
  gap: 6px;
}

.nutrition-item-macros {
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 120px;
}

.adherence-row {
  margin: 8px 0;
}

.adherence-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  margin-bottom: 4px;
  color: var(--muted);
}

.adherence-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.adherence-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.2s ease;
}

.adherence-fill.adherence-ok {
  background: var(--ok, #22c55e);
}

.adherence-fill.adherence-low {
  background: var(--warn, #f59e0b);
}

.adherence-fill.adherence-high {
  background: var(--accent, #6366f1);
}

.shopping-list-root {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shopping-section h4 {
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: var(--muted);
}

.shopping-section ul {
  list-style: none;
  font-size: 0.82rem;
}

.shopping-section li {
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

.meal-photo-dialog {
  --modal-w: 720px;
}

.meal-photo-dialog img {
  width: 100%;
  max-height: 62svh;
  object-fit: contain;
  border-radius: 10px;
  background: var(--bg);
}

@media (max-width: 900px) {
  .meals-layout { grid-template-columns: 1fr; }
}

/* ── Wellness ── */
.wellness-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 2fr);
  gap: 16px;
  margin-top: 8px;
}

.wellness-sidebar, .wellness-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wellness-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.mindfulness-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mindfulness-card h4 { font-size: 0.95rem; }
.mindfulness-card .mind-meta { font-size: 0.78rem; color: var(--muted); }

.mindfulness-card audio {
  width: 100%;
  height: 36px;
}

.streak-dashboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.streak-stat {
  padding: 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.streak-stat span {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.streak-stat strong { font-size: 1.2rem; }

.streak-habit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.streak-habit-row:last-child { border-bottom: none; }

.streak-badge {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
}

.streak-badge.done {
  background: color-mix(in srgb, var(--ok) 20%, transparent);
  color: var(--ok);
}

.progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  margin-top: 4px;
}

.progress-bar > span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
}

@media (max-width: 900px) {
  .wellness-layout { grid-template-columns: 1fr; }
}

/* ── Recuperación (fisioterapia) ── */
.recovery-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 2fr);
  gap: 16px;
  margin-top: 8px;
}

.recovery-sidebar, .recovery-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.injury-select-list li {
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
}

.injury-select-list li.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.injury-select-list li.inactive {
  opacity: 0.65;
}

.mobility-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.mobility-video-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobility-video-card h4 { font-size: 0.92rem; }
.mobility-video-card .mob-meta { font-size: 0.75rem; color: var(--muted); }

.mobility-video-card .btn-preview {
  margin-top: auto;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--primary);
  background: var(--primary-soft);
  color: var(--text);
  cursor: pointer;
  font-size: 0.82rem;
}

#recovery-video-body video,
#recovery-video-body iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: 10px;
  background: #000;
}

@media (max-width: 900px) {
  .recovery-layout { grid-template-columns: 1fr; }
}

.recovery-step h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.recovery-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-contrast, #fff);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.recovery-step-disabled {
  opacity: 0.55;
}

.recovery-step-disabled input,
.recovery-step-disabled select,
.recovery-step-disabled textarea,
.recovery-step-disabled button {
  pointer-events: none;
}

.body-pain-map {
  position: relative;
  aspect-ratio: 3 / 4;
  width: min(100%, 420px);
  max-width: 100%;
  margin: 0 auto;
  border: none;
  border-radius: 16px;
  background: #0b0d10;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.body-pain-map--vector,
.body-pain-map--photo {
  aspect-ratio: auto;
  min-height: 280px;
  padding: 10px 10px 8px;
}

.bpm-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  min-height: 0;
}

.bpm-view {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.bpm-view--photo {
  max-width: 280px;
  margin: 0 auto;
}

.bpm-figure {
  position: relative;
  width: 100%;
  line-height: 0;
}

.bpm-photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(58vh, 520px);
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.bpm-hotspots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bpm-hotspot {
  cursor: pointer;
  transition: fill 120ms ease, stroke 120ms ease, filter 120ms ease;
}

.bpm-hotspot:hover,
.bpm-hotspot:focus-visible {
  fill: color-mix(in srgb, var(--primary, #f97316) 28%, transparent);
  stroke: var(--primary, #f97316);
  stroke-width: 0.7px;
  outline: none;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--primary, #f97316) 55%, transparent));
}

.bpm-hotspot-active {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--primary, #f97316) 50%, transparent));
}

.bpm-badge-n {
  font-size: 4.2px;
  font-weight: 800;
  fill: #fff;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

.body-pain-map--vector .bpm-badge-n {
  font-size: 11px;
}

.body-pain-map--vector .bpm-svg {
  max-height: min(58vh, 480px);
  width: auto;
  margin: 0 auto;
}

.body-pain-map--vector .bpm-view--vector {
  max-width: 240px;
  width: 100%;
}

.bpm-view-label {
  flex: 0 0 auto;
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  pointer-events: none;
}

.bpm-rl {
  font-size: 13px;
  font-weight: 800;
  fill: rgba(255, 255, 255, 0.62);
  font-family: "Plus Jakarta Sans", sans-serif;
  letter-spacing: 0.04em;
}

.bpm-svg {
  width: 100%;
  height: 100%;
  max-height: 340px;
  display: block;
}

.bpm-seg {
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.bpm-seg:hover,
.bpm-seg:focus-visible {
  filter: brightness(1.18);
  outline: none;
}

.bpm-seg-active {
  filter: saturate(1.15);
}

.bpm-seg-pending {
  fill: color-mix(in srgb, var(--primary) 58%, rgba(18, 22, 24, 0.35)) !important;
  stroke: var(--primary) !important;
  stroke-width: 1.85px !important;
  filter: brightness(1.08);
}

.bpm-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 2px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
  flex: 0 0 auto;
}

.bpm-legend-bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary) 92%, #fff),
    color-mix(in srgb, var(--primary) 45%, #1a2332),
    rgba(55, 62, 74, 0.9)
  );
}

.body-pain-map-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  opacity: 1;
}

.body-pain-zones {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.body-pain-zone {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, #ef4444 55%, var(--border));
  background: color-mix(in srgb, #ef4444 22%, transparent);
  box-shadow: 0 0 0 0 color-mix(in srgb, #ef4444 0%, transparent);
  cursor: pointer;
  padding: 0;
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.body-pain-zone:hover {
  transform: scale(1.14);
  background: color-mix(in srgb, #ef4444 38%, transparent);
  border-color: color-mix(in srgb, var(--primary) 50%, #ef4444);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
}

.body-pain-zone.active {
  background: color-mix(in srgb, #ef4444 72%, var(--primary));
  border-color: #ef4444;
  box-shadow:
    0 0 0 2px color-mix(in srgb, #ef4444 35%, transparent),
    0 0 14px color-mix(in srgb, #ef4444 35%, transparent);
}

.body-pain-zone:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.body-pain-zone:disabled:hover {
  transform: none;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
}

.body-pain-map-disabled {
  opacity: 0.78;
}

.body-pain-map-disabled .bpm-seg {
  cursor: not-allowed;
}

.body-pain-map-hint {
  position: absolute;
  inset: auto 8px 28px 8px;
  margin: 0;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  pointer-events: none;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(11, 13, 16, 0.72);
}

.recovery-intensity-picker {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 12px;
  margin-bottom: 12px;
  max-width: 280px;
}

.recovery-intensity-picker label {
  font-size: 0.82rem;
  color: var(--muted);
}

.recovery-intensity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.recovery-intensity-row input[type="range"] {
  flex: 1;
}

.recovery-intensity-row output {
  min-width: 24px;
  text-align: center;
  font-weight: 600;
}

.recovery-intensity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recovery-hep-form .full-width {
  grid-column: 1 / -1;
}

.recovery-injury-actions {
  margin-top: 8px;
}

.recovery-record-edit {
  display: block;
  margin-top: 10px;
}

.hep-plan-root {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hep-phase-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface-2);
}

.hep-phase-block h4 {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: capitalize;
}

.hep-exercise-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}

.hep-exercise-row:last-child {
  border-bottom: none;
}

.hep-exercise-row .done {
  color: var(--ok, #22c55e);
}

.stat.ok { color: var(--ok, #22c55e); }
.stat.warn { color: var(--warn, #f59e0b); }

/* ── Encuestas (surveys) ── */
.stack-gap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.question-card {
  border-left: 4px solid var(--primary);
}

.options-container {
  padding-left: 16px;
  border-left: 2px dashed var(--border);
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Rediseño portal staff — 2026-08-03
   design/portal/PROPUESTA.md · P0 + parte de P1
   Capa final: refina shell y home y añade primitivas de densidad
   (tabla, drawer, tabs, empty states) sin tocar el cableado de la API.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --sidebar-bg: #0b1110;
  --sidebar-w: 264px;
  --header-h: 66px;
  --hairline: color-mix(in srgb, var(--sys-border) 70%, transparent);
  --panel-radius: 14px;
}

/* Reafirmar light DESPUÉS del shell dark — evita sidebar negro / suelo blanco. */
html[data-theme="light"] {
  --sys-bg: #d8dfda;
  --sys-surface: #ffffff;
  --sys-surface-2: #e8eee9;
  --sys-border: #b4c0b8;
  --sys-text: #12201a;
  --sys-muted: #4a5a52;
  --sidebar-bg: #e7ece8;
  --bg: var(--sys-bg);
  --surface: var(--sys-surface);
  --surface-2: var(--sys-surface-2);
  --border: var(--sys-border);
  --text: var(--sys-text);
  --muted: var(--sys-muted);
  --hairline: color-mix(in srgb, var(--sys-border) 90%, transparent);
}
html[data-theme="light"] .sidebar,
html[data-theme="light"] .app-shell > .sidebar {
  background: #e7ece8 !important;
  color: var(--sys-text);
  border-right: 1px solid var(--sys-border);
}
html[data-theme="light"] .main-area,
html[data-theme="light"] .content,
html[data-theme="light"] .centro-host,
html[data-theme="light"] #tab-inicio,
html[data-theme="light"] #tab-usuarios,
html[data-theme="light"] #tab-ejercicios {
  background: #d8dfda !important;
}
html[data-theme="light"] .workspace-main,
html[data-theme="light"] .workspace-side,
html[data-theme="light"] .cmd-panel,
html[data-theme="light"] .cmd-hero,
html[data-theme="light"] .centro-body .workspace-main,
html[data-theme="light"] .centro-body .workspace-side {
  background: #ffffff !important;
  border-color: var(--sys-border);
  box-shadow: var(--elev-1);
}

/* ── Iconografía de línea ───────────────────────────────────────────── */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.nav-ico,
.nav-chevron {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: inherit;
}

.nav-chevron { width: 15px; height: 15px; stroke-width: 2; opacity: 0.55; }

/* ── Sidebar ────────────────────────────────────────────────────────── */
.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--hairline);
  overflow: hidden;
}

.sidebar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 190px;
  background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 70%);
  pointer-events: none;
}

.sidebar-brand {
  position: relative;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--hairline);
  gap: 11px;
}

.sidebar-brand-home {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  flex: 1;
  margin: 0;
  padding: 4px 6px 4px 2px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sidebar-brand-home:hover {
  background: color-mix(in srgb, var(--sys-surface) 70%, transparent);
}

.sidebar-brand-home:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sidebar-bg), 0 0 0 4px var(--primary);
}

.sidebar-brand-home.is-home-active .sidebar-brand-text {
  color: var(--text);
}

.sidebar-brand-home.is-home-active .sidebar-brand-sub {
  color: color-mix(in srgb, var(--primary) 70%, var(--muted));
}

.sidebar-brand-block { min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.sidebar-brand-text {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.sidebar-brand-sub {
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav {
  position: relative;
  padding: 14px 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--sys-border) transparent;
}

.nav-section { margin-bottom: 6px; }

.nav-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px 6px;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav-section-label:hover { color: var(--text); }
.nav-section-label:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sidebar-bg), 0 0 0 4px var(--primary);
}

.nav-section-label .nav-chevron { transition: transform var(--dur-fast) var(--ease-out); }
.nav-section.collapsed .nav-section-label .nav-chevron { transform: rotate(-90deg); }

.nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.nav-section.collapsed .nav-group-items { display: none; }

.nav-item {
  gap: 11px;
  padding: 8px 11px;
  min-height: 38px;
  border-radius: 9px;
  font-size: 0.865rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  position: relative;
}

.nav-item .nav-ico { opacity: 0.72; transition: opacity var(--dur-fast) var(--ease-out); }
.nav-item:hover { background: color-mix(in srgb, var(--sys-surface) 80%, transparent); }
.nav-item:hover .nav-ico { opacity: 1; }

.nav-item.active {
  background: var(--primary-soft);
  color: var(--text);
  font-weight: 600;
}

.nav-item.active .nav-ico { color: var(--primary); opacity: 1; }
.nav-item:focus-visible { box-shadow: 0 0 0 2px var(--sidebar-bg), 0 0 0 4px var(--primary); }

/* ── Chip de usuario + menú ─────────────────────────────────────────── */
.sidebar-footer {
  position: relative;
  padding: 12px;
  border-top: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sidebar-bg) 92%, #000);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.user-chip:hover,
.user-chip[aria-expanded="true"] { background: var(--sys-surface); border-color: var(--hairline); }
.user-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sidebar-bg), 0 0 0 4px var(--primary);
}

.user-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow: hidden;
}
.user-avatar.has-photo {
  background: transparent;
  padding: 0;
}
.user-avatar.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-chip-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.user-chip-name {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-chip-role {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}

.user-chip[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

.user-menu {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% - 4px);
  background: var(--sys-surface);
  border: 1px solid var(--sys-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  padding: 6px;
  z-index: 120;
  animation: menuIn var(--dur-fast) var(--ease-out);
}

@keyframes menuIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.user-menu-head {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 4px;
  word-break: normal;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.user-menu-item:hover { background: var(--surface-2); }
.user-menu-item.danger { color: var(--err); }
.user-menu-item.danger:hover { background: color-mix(in srgb, var(--err) 14%, transparent); }
.user-menu-item .nav-ico { opacity: 0.7; }

/* ── Top bar ────────────────────────────────────────────────────────── */
.page-header {
  gap: 14px;
  background: color-mix(in srgb, var(--sys-bg) 82%, transparent);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(14px) saturate(1.2);
}

.page-breadcrumb {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, var(--muted) 85%, transparent);
}

.page-title { font-size: 1.22rem; letter-spacing: 0; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--text) 18%, var(--sys-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface-2) 82%, var(--sys-bg));
  color: var(--text);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}

.topbar-btn:hover {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--sys-border));
}
.topbar-btn:active { transform: scale(0.97); }
.topbar-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary);
}

.topbar-btn.icon-only {
  width: 40px;
  padding: 0;
  justify-content: center;
  position: relative;
}
.topbar-btn.icon-only .nav-ico {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  opacity: 1;
}
.topbar-search { min-width: 210px; }
.topbar-search-text { flex: 1; text-align: left; }

.topbar-kbd {
  font-family: inherit;
  font-size: 0.68rem;
  padding: 2px 5px;
  border-radius: 5px;
  border: 1px solid var(--hairline);
  background: var(--sys-bg);
  color: var(--muted);
}

.topbar-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--sys-bg);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.73rem;
  cursor: default;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  flex: 0 0 auto;
}

.status-pill.is-ok .status-dot { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.status-pill.is-down { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, transparent); cursor: pointer; }
.status-pill.is-down .status-dot { background: var(--err); }
.status-pill.is-demo { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.status-pill.is-demo .status-dot { background: var(--warn); }

.role-badge {
  font-size: 0.66rem;
  padding: 5px 10px;
  background: transparent;
  color: var(--muted);
  border-color: var(--hairline);
  letter-spacing: 0.08em;
}

.topbar-profile {
  position: relative;
}

.topbar-profile .user-chip {
  width: auto;
  min-width: 0;
  max-width: 220px;
  padding: 4px 8px 4px 4px;
  border-radius: 10px;
}

.topbar-profile .user-menu {
  left: auto;
  right: 0;
  bottom: auto;
  top: calc(100% + 6px);
  min-width: 240px;
}

.user-menu-role {
  margin: 0 0 4px;
  padding: 0 10px 8px;
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: capitalize;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--hairline);
}

.topbar-btn.icon-only .usuarios-subnav-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
}

.nav-item .usuarios-subnav-badge {
  margin-left: auto;
}

.chrome-stub {
  padding: 28px 8px 48px;
  max-width: 560px;
}

html[data-sidebar-mode="icons"] .sidebar-brand-home,
html[data-sidebar-mode="rail"] .sidebar-brand-home {
  justify-content: center;
  padding: 4px;
  flex: 0 0 auto;
}

.sidebar-toggle { border-radius: 9px; }
.burger,
.burger::before,
.burger::after {
  display: block;
  width: 16px;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  content: "";
  position: relative;
}
.burger::before { top: -5px; }
.burger::after { top: 3.4px; }

/* ── Home — centro de mando ─────────────────────────────────────────── */
.cmd-hero {
  position: relative;
  align-items: center;
  padding: 22px 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--sys-surface) 90%, transparent), var(--sys-surface));
  margin-bottom: 20px;
}

.cmd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cmd-hero-image, none);
  background-size: cover;
  background-position: center;
  opacity: var(--cmd-hero-image-opacity, 0.18);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.cmd-hero-copy { position: relative; z-index: 1; }

.cmd-date {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: color-mix(in srgb, var(--primary) 85%, var(--text));
  margin-bottom: 6px;
}

.cmd-welcome { font-size: 1.6rem; }
.cmd-sub { font-size: 0.9rem; }

.cmd-hero-stats {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}

.cmd-hero-stat dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 3px;
  white-space: nowrap;
}

.cmd-hero-stat dd {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.cmd-hero-stat dd small {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

.cmd-hero-stat dd.is-alert { color: var(--warn); }

.cmd-panel {
  border-radius: var(--panel-radius);
  border-color: var(--hairline);
  padding: 16px 18px;
}

.cmd-section-head h3,
.cmd-panel > h3 {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.cmd-link-btn {
  font-size: 0.76rem;
  padding: 5px 9px;
  border-radius: 7px;
}

.cmd-agenda-card {
  border-radius: var(--panel-radius);
  border-color: var(--hairline);
  padding: 13px 14px 12px;
}

.cmd-agenda-card.is-now::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  margin-bottom: 7px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 26%, transparent);
}

.cmd-action { min-height: 52px; border-radius: 11px; }
.cmd-action:first-child { box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 22%, transparent); }

.cmd-dense-list li { min-height: 42px; }
.cmd-dense-list li.is-risk { grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; }
.cmd-risk-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cmd-risk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
}

.cmd-risk-dot.high { background: var(--err); }

.cmd-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 0 6px;
  line-height: 1.5;
}

/* ── Diagnóstico (antes "salud de módulos" en portada) ──────────────── */
.diag {
  margin-top: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--panel-radius);
  background: color-mix(in srgb, var(--sys-surface) 55%, transparent);
}

.diag-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 0.83rem;
  color: var(--muted);
  border-radius: var(--panel-radius);
  transition: color var(--dur-fast) var(--ease-out);
}

.diag-summary::-webkit-details-marker { display: none; }
.diag-summary:hover { color: var(--text); }
.diag-summary .nav-ico { opacity: 0.6; }

.diag-hint {
  margin-left: auto;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--muted) 75%, transparent);
}

.diag-body {
  padding: 0 16px 16px;
  animation: diagIn var(--dur-base) var(--ease-out);
}

@keyframes diagIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.diag-line { font-size: 0.8rem; color: var(--muted); margin-bottom: 10px; }
.diag[open] .diag-summary { border-bottom: 1px solid var(--hairline); border-radius: var(--panel-radius) var(--panel-radius) 0 0; }
.cmd-modules { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }

/* ── Administración › Diagnóstico (salud live) ──────────────────────── */
.diag-workspace .workspace-lede { max-width: 62ch; }
.diag-poll-meta {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.diag-summary-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 14px;
}
.diag-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface) 70%, transparent);
}
.diag-summary-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.diag-summary-pill.is-ok {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}
.diag-summary-pill.is-ok::before {
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}
.diag-summary-pill.is-down {
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 40%, transparent);
}
.diag-summary-pill.is-down::before { background: var(--err); }
.diag-summary-pill.is-degraded {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}
.diag-summary-pill.is-degraded::before { background: var(--warn); }
.diag-summary-pill.is-checking::before { background: var(--muted); }
.diag-summary-counts {
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.diag-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.diag-svc-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: var(--panel-radius);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface) 65%, transparent);
  border-left: 3px solid var(--muted);
}
.diag-svc-card.is-ok { border-left-color: var(--ok); }
.diag-svc-card.is-down { border-left-color: var(--err); }
.diag-svc-card.is-degraded { border-left-color: var(--warn); }
.diag-svc-card.is-checking { border-left-color: var(--muted); opacity: 0.85; }
.diag-svc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.diag-svc-head h4 {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
}
.diag-svc-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
}
.diag-svc-card.is-ok .diag-svc-badge {
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  color: var(--ok);
}
.diag-svc-card.is-down .diag-svc-badge {
  background: color-mix(in srgb, var(--err) 18%, transparent);
  color: var(--err);
}
.diag-svc-card.is-degraded .diag-svc-badge {
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  color: var(--warn);
}
.diag-svc-latency {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.diag-svc-summary {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text);
  line-height: 1.35;
}
.diag-footnote {
  margin-top: 14px;
  max-width: 72ch;
}
.diag-footnote code {
  font-size: 0.85em;
}

.cmd-modules { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }

/* ── Cabecera de módulo + toolbar ───────────────────────────────────── */
.panel-desc {
  font-size: 0.86rem;
  color: var(--muted);
  max-width: 68ch;
  margin-bottom: 18px;
  line-height: 1.55;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--panel-radius);
  background: color-mix(in srgb, var(--sys-surface) 70%, transparent);
}

/* `.btn-primary` nace pensado para formularios (100% de ancho). Dentro de
   barras de acciones tiene que comportarse como botón, no como bloque. */
.toolbar .btn-primary,
.cobros-toolbar .btn-primary,
.form-inline .btn-primary,
.cmd-section-head .btn-primary,
.modal-footer .btn-primary,
.drawer-foot .btn-primary,
.list-item-actions .btn-primary,
.seg-tabs + .btn-primary,
.empty-block .btn-primary {
  width: auto;
  margin-top: 0;
  padding: 9px 16px;
  font-size: 0.85rem;
  border-radius: 9px;
}

.toolbar > .btn-primary:last-child { margin-left: auto; }

/* ── Primitivas de densidad ─────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: var(--panel-radius);
  overflow: hidden;
  background: var(--sys-surface);
}

.data-table thead th {
  position: sticky;
  /* .data-table { overflow: hidden } is the sticky CB. top: --header-h
     ghosts the first tbody row over the thead (Cobros + any wrap/overflow). */
  top: 0;
  z-index: 2;
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: var(--muted);
  background: var(--sys-surface-2);
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}

.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  height: 44px;
}

.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background var(--dur-instant) var(--ease-out); }
.data-table tbody tr:hover { background: var(--sys-surface-2); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Tabs internas (segmented) */
.seg-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  background: color-mix(in srgb, var(--sys-surface) 80%, transparent);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.seg-tab {
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.seg-tab:hover { color: var(--text); }
.seg-tab.active { background: var(--primary-soft); color: var(--text); font-weight: 600; }

/* El subnav del Centro adopta el patrón segmented y se queda pegado arriba */
.centro-subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  gap: 2px;
  padding: 4px;
  margin: -4px 0 16px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-bg) 92%, transparent);
  backdrop-filter: blur(10px);
}

.centro-subnav-btn {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  padding: 8px 13px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.centro-subnav-btn:hover { color: var(--text); background: var(--sys-surface); }
.centro-subnav-btn.active { background: var(--primary-soft); color: var(--text); font-weight: 600; }

/* Drawer lateral para crear / editar sin empujar la página */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 10, 9, 0.55);
  backdrop-filter: blur(2px);
  z-index: 130;
  animation: fadeIn var(--dur-fast) var(--ease-out);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(460px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--sys-surface);
  border-left: 1px solid var(--sys-border);
  box-shadow: -18px 0 44px rgba(0, 0, 0, 0.4);
  z-index: 131;
  animation: drawerIn var(--dur-base) var(--ease-out);
}

@keyframes drawerIn {
  from { transform: translateX(24px); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}

.drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hairline);
}

.drawer-head h3 { font-size: 1rem; font-weight: 600; flex: 1; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px; }
.drawer-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--hairline);
}

/* Formulario de alta plegado: la lista manda, crear es el segundo paso */
.create-panel {
  border: 1px solid var(--hairline);
  border-radius: var(--panel-radius);
  background: color-mix(in srgb, var(--sys-surface) 70%, transparent);
  margin-bottom: 16px;
}

.create-panel > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: var(--panel-radius);
  transition: background var(--dur-fast) var(--ease-out);
}

.create-panel > summary::-webkit-details-marker { display: none; }
.create-panel > summary:hover { background: var(--sys-surface); }
.create-panel > summary .nav-ico { color: var(--primary); }

.create-panel-hint {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
}

.create-panel[open] > summary { border-bottom: 1px solid var(--hairline); border-radius: var(--panel-radius) var(--panel-radius) 0 0; }
.create-panel > form,
.create-panel > .form-grid { padding: 16px; animation: diagIn var(--dur-base) var(--ease-out); }

/* Empty states con acción (nunca callejón sin salida) */
.empty-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 40px 24px;
  border: 1px dashed color-mix(in srgb, var(--sys-border) 90%, transparent);
  border-radius: var(--panel-radius);
  background: color-mix(in srgb, var(--sys-surface) 45%, transparent);
}

.empty-block .empty-art {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  background-image: var(--empty-art-image, none);
  background-size: cover;
  background-position: center;
}

.empty-block .empty-art .nav-ico { width: 22px; height: 22px; }
.empty-block h4 { font-size: 0.95rem; font-weight: 600; }
.empty-block p { font-size: 0.84rem; color: var(--muted); max-width: 46ch; }

.empty-state {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.85rem;
}

.empty-state .empty-cta { margin-left: auto; }

/* Skeletons con forma del contenido real */
.skeleton-row {
  height: 44px;
  border-radius: 9px;
  margin-bottom: 6px;
  background: linear-gradient(90deg, var(--sys-surface) 0%, var(--sys-surface-2) 50%, var(--sys-surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}

/* ── Imágenes generadas (assets/generated/MANIFEST.md) ──────────────── */

/* Login: atmósfera FitOS desde asset local — sin depender de una CDN externa. */
.login-atmosphere {
  background:
    linear-gradient(105deg, rgba(7, 20, 18, 0.82) 0%, rgba(7, 20, 18, 0.5) 44%, rgba(7, 20, 18, 0.24) 100%),
    radial-gradient(ellipse at 14% 18%, rgba(15, 143, 116, 0.32) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 82%, rgba(184, 240, 0, 0.1) 0%, transparent 45%),
    url("assets/generated/login-backdrop.jpg") center / cover no-repeat;
  background-color: var(--sys-bg);
}

@media (max-width: 700px) {
  .login-atmosphere { background-position: 60% center; }
}

/* Home: textura ember entrando por la derecha, detrás del saludo. */
.cmd-hero {
  --cmd-hero-image: url("assets/generated/home-hero-texture.jpg");
  --cmd-hero-image-opacity: 0.5;
}

.cmd-hero::after {
  background-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 6%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 6%, #000 62%);
}

/* Ilustración de empty state (decorativa, el mensaje lo lleva el texto). */
.empty-art-img {
  width: 190px;
  height: 190px;
  opacity: 0.85;
  display: block;
  margin-inline: auto;
}

.empty-art-img.sm { width: 108px; height: 108px; }

@media (max-width: 720px) {
  .empty-art-img { width: 150px; height: 150px; }
}

.cmd-empty.has-art {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cmd-empty.has-art > span { flex: 1; min-width: 180px; }

/* ── Aviso de modo demo ─────────────────────────────────────────────── */
.demo-flag {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  background: color-mix(in srgb, var(--warn) 14%, var(--sys-bg));
  color: var(--warn);
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: var(--elev-2);
}

.demo-flag .status-dot { background: var(--warn); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .topbar-search-text,
  .topbar-kbd { display: none; }
  .topbar-search { min-width: 0; width: 36px; padding: 0; justify-content: center; }
}

@media (max-width: 900px) {
  .cmd-hero { padding: 18px; }
  .cmd-hero-stats { gap: 18px; }
  .role-badge { display: none; }
  .data-table thead th { top: 0; }
  .centro-subnav { position: static; backdrop-filter: none; }
}

@media (max-width: 560px) {
  .cmd-hero-stat dd { font-size: 1.2rem; }
  .drawer { width: 100vw; }
}

/* ── Plan de nutrición: cabecera sin colisión con la acción ─────────── */
.plan-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.plan-panel-header .btn-primary.btn-small {
  width: auto;
  margin-top: 0;
  flex: 0 0 auto;
  padding: 6px 12px;
  font-size: 0.78rem;
}

/* ── Conversaciones: filas de lista, no botones centrados ───────────── */
#chat-conv-list.list { gap: 4px; }

#chat-conv-list .list-item {
  padding: 0;
  border: 0;
  background: transparent;
}

.chat-open-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  line-height: 1.45;
  transition: background 140ms ease, border-color 140ms ease;
}

.chat-open-btn strong { font-size: 0.92rem; font-weight: 600; }
.chat-open-btn .hint { display: block; margin-top: 2px; font-size: 0.8rem; }
.chat-open-btn br { display: none; }

.chat-open-btn:hover {
  background: color-mix(in srgb, var(--sys-text) 5%, transparent);
  border-color: var(--hairline);
}

.chat-open-btn[aria-current="true"] {
  background: color-mix(in srgb, var(--tenant-primary) 13%, transparent);
  border-color: color-mix(in srgb, var(--tenant-primary) 34%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   Sistema de modales — 2026-08-03
   Fuente única para TODO diálogo del portal. Un modal = un <dialog
   class="modal-dialog"> con .modal-header / .modal-body / .modal-footer.
   El comportamiento (scroll lock, cierre por overlay, foco) vive en app.js
   → FitModal.

   Causa raíz del bug de posición: el reset global `* { margin: 0 }` anula
   el `margin: auto` que el UA stylesheet aplica a <dialog>, que es lo que
   lo centra en el top layer. Sin ese margin el diálogo queda clavado en la
   esquina superior izquierda. Aquí se restaura explícitamente.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --modal-w: 520px;
  --modal-gutter: 24px;
  --modal-radius: 18px;
  --modal-max-h: min(88svh, 820px);
  --modal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --modal-dur-in: 220ms;
  --modal-dur-out: 150ms;
  --modal-edge: color-mix(in srgb, var(--tenant-primary) 20%, var(--sys-border));
}

dialog.modal-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(var(--modal-w), calc(100vw - var(--modal-gutter) * 2));
  max-width: calc(100vw - var(--modal-gutter) * 2);
  max-height: var(--modal-max-h);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--modal-edge);
  border-radius: var(--modal-radius);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--sys-surface-2) 92%, var(--tenant-primary) 3%) 0%,
      var(--sys-surface) 42%,
      var(--sys-surface) 100%
    );
  color: var(--text);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 32px 80px -24px rgba(0, 0, 0, 0.8),
    0 8px 24px -12px rgba(0, 0, 0, 0.6),
    0 0 60px -18px color-mix(in srgb, var(--tenant-primary) 30%, transparent);
  opacity: 0;
  transform: translateY(10px) scale(0.975);
  transition:
    opacity var(--modal-dur-out) ease-in,
    transform var(--modal-dur-out) ease-in,
    overlay var(--modal-dur-out) allow-discrete,
    display var(--modal-dur-out) allow-discrete;
}

/* El <dialog> cerrado sigue con display:none del UA; solo al abrir es flex. */
dialog.modal-dialog[open] {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: none;
  transition-duration: var(--modal-dur-in);
  transition-timing-function: var(--modal-ease);
}

/* lib5-copilot-ghost: author `display:flex` (p.ej. copiloto ≤560px) gana al
   UA stylesheet de <dialog> cerrado → overlay invisible a pantalla completa
   que se traga taps de Biblioteca. Cerrado = no pintar, no hit-test. */
dialog.modal-dialog:not([open]) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden;
}

#planner-copilot-dialog:not([open]),
#exercise-video-modal:not([open]),
#planner-catalog-dialog:not([open]),
#planner-detail-dialog:not([open]),
#hub-plan-detail-dialog:not([open]),
#hub-session-detail-dialog:not([open]),
#rm-calculator-dialog:not([open]) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden;
}

@starting-style {
  dialog.modal-dialog[open] {
    opacity: 0;
    transform: translateY(10px) scale(0.975);
  }
}

/* El diálogo recibe el foco cuando no hay campos: sin anillo, ya se ve. */
dialog.modal-dialog:focus { outline: none; }

/* Filo superior luminoso con el acento del tenant (white-label). */
dialog.modal-dialog::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 4%,
    color-mix(in srgb, var(--tenant-primary) 70%, transparent) 32%,
    color-mix(in srgb, var(--sys-text) 45%, transparent) 55%,
    transparent 96%
  );
  opacity: 0.75;
  pointer-events: none;
  z-index: 2;
}

dialog.modal-dialog::backdrop {
  background:
    radial-gradient(
      120% 90% at 50% 0%,
      color-mix(in srgb, var(--tenant-primary) 10%, transparent) 0%,
      transparent 58%
    ),
    rgba(4, 10, 9, 0.68);
  backdrop-filter: blur(7px) saturate(1.15);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
  opacity: 0;
  transition:
    opacity var(--modal-dur-out) ease-in,
    overlay var(--modal-dur-out) allow-discrete,
    display var(--modal-dur-out) allow-discrete;
}

dialog.modal-dialog[open]::backdrop {
  opacity: 1;
  transition-duration: var(--modal-dur-in);
  transition-timing-function: var(--modal-ease);
}

@starting-style {
  dialog.modal-dialog[open]::backdrop { opacity: 0; }
}

/* Muchos diálogos envuelven todo en un <form>: debe estirarse igual que el
   diálogo para que el scroll caiga en .modal-body y no en la página. */
dialog.modal-dialog > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.modal-dialog .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex: 0 0 auto;
  margin: 0;
  padding: 17px 20px 15px;
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface-2) 55%, transparent);
}

.modal-dialog .modal-header h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.modal-dialog .modal-header > button[aria-label="Cerrar"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.modal-dialog .modal-header > button[aria-label="Cerrar"]:hover {
  background: color-mix(in srgb, var(--sys-text) 8%, transparent);
  border-color: var(--hairline);
  color: var(--text);
}

.modal-dialog .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sys-text) 22%, transparent) transparent;
}

/* Sticky thead en páginas usa top: --header-h; dentro del modal el scroll
   es .modal-body, así que ese offset (64px) deja el thead flotando a mitad
   de la primera fila (PU-039 Detalle de sesión / Series reales). */
.modal-dialog .data-table thead th {
  top: 0;
}

/* Tabla Series reales — columnas fijas, wrap vertical, sin overflow-x. */
.metrics-session-sets {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}

.metrics-session-sets-table {
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
  font-size: 0.9rem;
  overflow: visible;
}

.metrics-session-sets-table .metrics-sets-col-ex { width: 35%; }
.metrics-session-sets-table .metrics-sets-col-pres { width: 18%; }
.metrics-session-sets-table .metrics-sets-col-exec { width: 47%; }

.metrics-session-sets-table thead th {
  white-space: normal;
  line-height: 1.25;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.metrics-session-sets-table td {
  height: auto;
  min-height: 44px;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.metrics-session-sets-table .metrics-sets-pres {
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.metrics-session-sets-table .metrics-sets-exec {
  max-width: 0; /* fuerza wrap con table-layout:fixed */
}

.metrics-session-sets-table .compact-list {
  margin: 0;
  padding: 0 0 0 1.15em;
  list-style: disc;
  max-width: 100%;
}

.metrics-session-sets-table .compact-list li {
  margin: 0.2em 0;
  padding: 0;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.modal-dialog .modal-body::-webkit-scrollbar { width: 10px; }
.modal-dialog .modal-body::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sys-text) 22%, transparent) padding-box;
}

/* Textos sueltos entre body y footer (hints, errores) no deben crecer. */
.modal-dialog > p,
.modal-dialog > form > p {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 20px;
}

.modal-dialog > p:not(.hidden),
.modal-dialog > form > p:not(.hidden) { padding-block: 10px; }

.modal-dialog .modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  padding: 14px 20px;
  border-top: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-bg) 45%, transparent);
}

.modal-dialog .modal-footer .btn-primary {
  width: auto;
  margin-top: 0;
  order: 2;
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--tenant-primary) 75%, transparent);
}

.modal-dialog .modal-footer .ghost { order: 1; }
.modal-dialog .modal-footer .ghost.hidden,
.modal-dialog .modal-footer .btn-primary.hidden { display: none; }

/* Un <label class="checkbox-row"> es la fila entera, no un contenedor de
   filas: sin esto el `input { width: 100% }` global parte casilla y texto. */
.modal-dialog label.checkbox-row {
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.55rem;
  margin-top: 4px;
  font-size: 0.85rem;
}

.modal-dialog label.checkbox-row input[type="checkbox"],
.modal-dialog .radio-row input[type="radio"],
.modal-dialog .radio-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--tenant-primary);
}

/* `.nutrition-wizard-panel label` fuerza columna: la fila de radio la quiere
   en línea (casilla + texto), no apilada y centrada. */
.modal-dialog .radio-row {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

/* Vídeo embebido: 16:9 acotado en alto para que el modal nunca desborde. */
.modal-dialog .modal-media,
.modal-dialog .modal-body > iframe,
.modal-dialog .modal-body > video {
  width: min(100%, calc(56svh * 16 / 9));
  margin-inline: auto;
}

.modal-dialog .modal-body > iframe,
.modal-dialog .modal-body > video {
  display: block;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 10px;
  background: #000;
}

/* ── Tamaños ─────────────────────────────────────────────────────────── */
.modal-dialog.modal-md { --modal-w: 660px; }
.modal-dialog.modal-video { --modal-w: 860px; }
.modal-dialog.modal-wide { --modal-w: 900px; }

/* ── Formulario a dos columnas: formularios altos que caben sin scroll ── */
.modal-body.form-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 18px;
  align-content: start;
}

.modal-body.form-2col .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.modal-body.form-2col .field > label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.modal-body.form-2col .field > input,
.modal-body.form-2col .field > select,
.modal-body.form-2col .field > textarea,
.modal-body.form-2col .field .select-with-other > input,
.modal-body.form-2col .field .select-with-other > select { margin: 0; }

.modal-body.form-stacked {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-body.form-stacked .field,
.modal-body.form-grid .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.modal-body.form-stacked .field > label,
.modal-body.form-grid .field > label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
}

@media (min-width: 640px) {
  .modal-body.form-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-body.form-2col .field.span-2 { grid-column: 1 / -1; }
}

/* ── Drawer lateral (primitiva alternativa, PROPUESTA.md §5) ─────────── */
/* No se usa hoy en el portal; se deja endurecida para cuando un flujo
   largo convenga como panel lateral en vez de modal centrado. */
.drawer {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.drawer-body { overscroll-behavior: contain; }

/* ── Movimiento reducido ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  dialog.modal-dialog,
  dialog.modal-dialog[open] {
    transform: none;
    transition-duration: 1ms;
  }

  dialog.modal-dialog::backdrop,
  dialog.modal-dialog[open]::backdrop { transition-duration: 1ms; }

  @starting-style {
    dialog.modal-dialog[open] { opacity: 1; transform: none; }
    dialog.modal-dialog[open]::backdrop { opacity: 1; }
  }

  .drawer { animation: none; }
}

/* ── Móvil: el modal se pega abajo y usa el ancho completo ───────────── */
@media (max-width: 560px) {
  :root {
    --modal-gutter: 0.5rem;
    --modal-max-h: 100svh;
  }

  dialog.modal-dialog {
    width: min(var(--modal-w), calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
    max-height: 100svh;
    --modal-max-h: 100svh;
    border-radius: 16px;
  }

  .modal-dialog .modal-header { padding: 15px 16px 13px; }
  .modal-dialog .modal-body { padding: 16px; }
  .modal-dialog .modal-footer { padding: 12px 16px; }
  .modal-dialog .modal-footer .btn-primary { flex: 1 1 auto; }
  .modal-dialog .modal-header > button[aria-label="Cerrar"] {
    width: 44px;
    height: 44px;
  }
}

/* Pantallas bajas (1024x600, portátiles): recorta paddings antes que scroll. */
@media (max-height: 680px) {
  dialog.modal-dialog { --modal-max-h: 94svh; }
  .modal-dialog .modal-header { padding: 13px 20px 11px; }
  .modal-dialog .modal-body { padding: 14px 20px; }
  .modal-dialog .modal-footer { padding: 11px 20px; }
  .modal-body.form-2col { gap: 11px 18px; }
}

/* El bloqueo de scroll de fondo lo aplica FitModal (app.js). */
html.modal-open,
body.modal-open { overflow: hidden !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Densidad + sin scroll de página — Inicio + Centro (2026-08-03)
   Principio: el shell ocupa 100dvh; el scroll vive DENTRO de listas,
   tablas y paneles. Formularios de alta → FitModal / columna estrecha.
   ═══════════════════════════════════════════════════════════════════════ */

html, body {
  height: 100%;
  overflow: hidden;
  overflow-x: hidden;
  max-width: 100%;
}

#view-app.view.active {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.app-shell {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.main-area {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  min-height: 0;
}

.content {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 14px 18px 12px;
}

.tab-panel.active {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Real phones: 100vh / unbounded 100dvh sit behind Chrome/Safari chrome
   and clip the planner FAB + Biblioteca dock. Cap at svh; leftover clip
   (if any) is added via --vv-bottom-inset from visualViewport in app.js. */
@media (max-width: 560px) {
  html, body {
    min-height: 100svh;
    height: 100dvh;
    max-height: 100svh;
  }
  #view-app.view.active,
  .app-shell,
  .main-area {
    height: 100dvh;
    max-height: 100svh;
  }
}

/* Inicio: documento con scroll. Cards con altura natural — no forzar 100vh. */
#tab-inicio.tab-panel.active {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: 22px;
  min-height: 0;
  height: auto;
  max-height: 100%;
  padding-bottom: 40px;
}

.centro-host.tab-panel.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 0;
}

/* ── Inicio — aire + scroll (Harbiz inspo, FitOS dark) ──────────────── */

#tab-inicio.cmd-home,
#tab-inicio .cmd-hero,
#tab-inicio .cmd-kpi-row,
#tab-inicio .cmd-section,
#tab-inicio .cmd-block,
#tab-inicio .cmd-feed,
#tab-inicio .cmd-ops,
#tab-inicio .diag,
#tab-inicio #diag-panel,
#tab-inicio #cmd-api-error {
  flex: 0 0 auto;
}

#tab-inicio .cmd-hero {
  padding: 28px 28px 24px;
  margin-bottom: 0;
  border-radius: 16px;
  gap: 16px;
}

#tab-inicio .cmd-date {
  font-size: 0.72rem;
  margin-bottom: 8px;
  letter-spacing: 0.1em;
}

#tab-inicio .cmd-welcome {
  font-size: 1.85rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 750;
}

#tab-inicio .cmd-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.25rem;
  margin-left: 8px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, var(--sys-surface));
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: middle;
}
#tab-inicio .cmd-count[hidden] { display: none; }

#tab-inicio .cmd-sub {
  font-size: 0.95rem;
  margin-top: 8px;
  max-width: 48ch;
}

#tab-inicio .cmd-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

#tab-inicio .cmd-kpi-row.is-quiet { opacity: 0.72; }

#tab-inicio .cmd-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 58px;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px solid var(--hairline, var(--border));
  background: var(--sys-surface, var(--surface));
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

#tab-inicio .cmd-kpi:hover,
#tab-inicio .cmd-kpi:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--sys-surface, var(--surface)));
  outline: none;
}

#tab-inicio .cmd-kpi[hidden] { display: none; }

#tab-inicio .cmd-kpi-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 650;
}

#tab-inicio .cmd-kpi-value {
  font-size: 1.7rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

#tab-inicio .cmd-kpi-value small {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
}

#tab-inicio .cmd-kpi-value.is-alert { color: var(--warn); }

#tab-inicio .cmd-section,
#tab-inicio .cmd-block {
  margin-bottom: 0;
}

#tab-inicio .cmd-section-head { margin-bottom: 14px; }
#tab-inicio .cmd-section-head h3,
#tab-inicio .cmd-panel > h3 {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

#tab-inicio .cmd-link-btn {
  font-size: 0.78rem;
  padding: 6px 10px;
}

#tab-inicio .cmd-agenda-strip {
  gap: 14px;
  padding-bottom: 4px;
}

#tab-inicio .cmd-agenda-card {
  flex: 0 0 min(260px, 78vw);
  padding: 18px 18px 16px;
  border-radius: 14px;
  min-height: 124px;
}

#tab-inicio .cmd-agenda-card.is-now::before {
  width: 7px;
  height: 7px;
  margin-bottom: 8px;
}

#tab-inicio .cmd-agenda-time {
  font-size: 0.8rem;
  margin-bottom: 8px;
}

#tab-inicio .cmd-agenda-title {
  font-size: 0.98rem;
  margin-bottom: 6px;
}

#tab-inicio .cmd-agenda-meta { font-size: 0.78rem; }

#tab-inicio .cmd-skeleton {
  flex: 0 0 240px;
  height: 124px;
}

#tab-inicio .cmd-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#tab-inicio .cmd-ops {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(240px, 0.95fr);
  gap: 16px;
}

#tab-inicio .cmd-panel {
  padding: 20px 22px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible;
}

#tab-inicio .cmd-panel-tall { min-height: 280px; }

#tab-inicio .cmd-ring {
  width: 120px;
  height: 120px;
}

#tab-inicio .cmd-ring-value { font-size: 1.35rem; }
#tab-inicio .cmd-ring-label { font-size: 0.68rem; }
#tab-inicio .cmd-aforo-legend { font-size: 0.88rem; gap: 8px; }
#tab-inicio .cmd-aforo-sedes { max-height: none; }
#tab-inicio .cmd-skeleton-block { height: 132px; }

#tab-inicio .cmd-action-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

#tab-inicio .cmd-action {
  min-height: 56px;
  padding: 12px 14px;
  gap: 12px;
  border-radius: 12px;
}

#tab-inicio .cmd-action-icon {
  width: 32px;
  height: 32px;
  font-size: 0.95rem;
}

#tab-inicio .cmd-action-label { font-size: 0.9rem; }
#tab-inicio .cmd-action-desc { display: block; font-size: 0.74rem; }
#tab-inicio .cmd-action:first-child { box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 20%, transparent); }

#tab-inicio .cmd-dense-list {
  margin-top: 4px;
  gap: 2px;
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

#tab-inicio #cmd-upcoming li { grid-template-columns: minmax(88px, auto) minmax(0, 1fr) auto; }

#tab-inicio .cmd-dense-list li {
  min-height: 56px;
  min-width: 0;
  padding: 12px 8px;
  font-size: 0.86rem;
  gap: 12px;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  box-sizing: border-box;
}

#tab-inicio .cmd-people-list li {
  grid-template-columns: 40px minmax(0, 1fr) auto;
}

#tab-inicio .cmd-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--primary) 22%, var(--surface-2));
  color: var(--text);
  flex-shrink: 0;
}

#tab-inicio .cmd-dense-time { font-size: 0.76rem; }
#tab-inicio .cmd-dense-main span { font-size: 0.74rem; }
#tab-inicio .cmd-badge { font-size: 0.68rem; padding: 4px 8px; }

#tab-inicio .cmd-empty {
  padding: 22px 4px 10px;
  font-size: 0.9rem;
}

#tab-inicio .cmd-empty.has-art {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 8px;
}

#tab-inicio .cmd-btn-primary {
  border: 0;
  background: var(--primary);
  color: var(--tenant-primary-contrast, #1a0f08);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.84rem;
  font-weight: 750;
  cursor: pointer;
}

#tab-inicio .cmd-btn-ghost {
  border: 1px solid var(--hairline, var(--border));
  background: var(--surface-2);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.84rem;
  font-weight: 650;
  cursor: pointer;
}

#tab-inicio .diag {
  margin-top: 8px;
}

#tab-inicio .diag-summary {
  padding: 12px 16px;
  font-size: 0.8rem;
}

#tab-inicio .diag-hint { font-size: 0.7rem; }
#tab-inicio .diag-body { padding: 0 16px 16px; }

@media (max-width: 1100px) {
  #tab-inicio .cmd-ops { grid-template-columns: 1fr 1fr; }
  #tab-inicio .cmd-ops .cmd-actions { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
  #tab-inicio .cmd-kpi-row,
  #tab-inicio .cmd-feed,
  #tab-inicio .cmd-ops { grid-template-columns: 1fr; }
  #tab-inicio .cmd-hero { padding: 22px 20px; }
  #tab-inicio .cmd-welcome { font-size: 1.5rem; }
}

/* ── Centro — shell fill-height ─────────────────────────────────────── */
.centro-host .panel-desc { display: none; } /* el título del topbar ya orienta */

.centro-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
}

.centro-chrome {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}

.centro-chrome .centro-subnav {
  flex: 1 1 auto;
  margin: 0;
  position: static;
  backdrop-filter: none;
}

.centro-chrome .ghost {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 7px 12px;
  font-size: 0.78rem;
}

.centro-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.centro-panel {
  display: none;
}

.centro-panel.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  gap: 8px;
}

/* Workspace: toolbar + región scrollable / split */
.workspace {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
}

.workspace-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 10px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  background: color-mix(in srgb, var(--sys-surface) 70%, transparent);
}

.workspace-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.workspace-toolbar input,
.workspace-toolbar select {
  min-width: 9rem;
  font-size: 0.82rem;
  padding: 6px 8px;
}

.workspace-toolbar .btn-primary,
.workspace-toolbar .ghost,
.workspace-side .btn-primary,
.workspace-side .ghost,
.workspace-scroll .btn-primary,
.workspace-scroll .ghost,
.side-block .btn-primary,
.side-block .ghost {
  width: auto;
  margin-top: 0;
  padding: 7px 12px;
  font-size: 0.8rem;
  border-radius: 8px;
}

.workspace-toolbar .toolbar-spacer { flex: 1 1 auto; min-width: 8px; }

.workspace-toolbar .btn-primary:last-child,
.workspace-toolbar > .btn-primary { margin-left: 0; }

.workspace-split {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.9fr);
  gap: 10px;
}

.workspace-split.is-list-detail {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.95fr);
}

.workspace-split.is-cal {
  grid-template-columns: minmax(0, 1.55fr) minmax(240px, 0.75fr);
}

.workspace-split.is-kpi-list {
  grid-template-columns: 1fr;
  display: flex;
  flex-direction: column;
}

.workspace-main,
.workspace-side {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-surface) 55%, transparent);
  overflow: hidden;
}

.workspace-main-head,
.workspace-side-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hairline);
}

.workspace-main-head h3,
.workspace-side-head h3 {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.workspace-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px;
  scrollbar-width: thin;
}

.workspace-scroll .list { margin: 0; }
.workspace-scroll .list li {
  padding: 10px 12px;
  margin-bottom: 6px;
  font-size: 0.84rem;
}

.workspace-kpis {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.workspace-kpis .stat {
  padding: 10px 12px;
  font-size: 0.8rem;
  margin: 0;
}

.workspace-kpis .stat-grid {
  display: contents;
}

#aforo-live-stats.stat-grid,
#churn-stats.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 0;
}

#aforo-live-stats .stat,
#churn-stats .stat {
  padding: 10px 12px;
  font-size: 0.8rem;
}

.aforo-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 10px;
  flex: 0 0 auto;
}

.aforo-summary-row > .card {
  margin: 0;
  padding: 12px 14px;
}

.aforo-summary-row > .card h3 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Fase A — Últimas visitas: nombre humano destacado */
#aforo-visits .aforo-visit-row {
  line-height: 1.35;
}
#aforo-visits .aforo-visit-who {
  font-weight: 600;
}

/* Calendario: grid que llena altura + scroll vertical si hace falta */
#centro-panel-calendario.centro-panel.active {
  overflow-x: hidden;
  overflow-y: auto;
}
#centro-panel-calendario .cal-workspace {
  flex: 1 1 auto;
  min-height: 0;
  gap: 6px;
  overflow: visible;
}
#centro-panel-calendario .workspace-split.is-cal {
  flex: 1 1 auto;
  min-height: min(520px, 62vh);
}

#centro-panel-calendario .cal-grid {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 8px;
  overflow: hidden;
}

#centro-panel-calendario .cal-days {
  flex: 1 1 auto;
  min-height: 0;
  gap: 3px;
  grid-auto-rows: minmax(108px, 1fr);
  height: 100%;
}

#centro-panel-calendario .cal-day-cell {
  min-height: 108px;
  height: 100%;
  padding: 5px 4px;
  font-size: 0.78rem;
  overflow: hidden;
}

#centro-panel-calendario .cal-weekdays {
  font-size: 0.7rem;
  margin-bottom: 3px;
}

#centro-panel-calendario .cal-day-num { font-size: 0.75rem; }
#centro-panel-calendario .cal-day-events-mini {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 2px;
}
#centro-panel-calendario .cal-chip {
  font-size: 0.62rem;
  padding: 0 3px;
}
#centro-panel-calendario .cal-chip.is-first {
  flex: 1 1 auto;
  min-height: 16px;
  max-height: 2.6em;
  display: block;
  align-self: stretch;
  font-size: 0.68rem;
  line-height: 1.25;
  padding: 3px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#cal-period-label {
  margin: 0;
  font-size: 0.78rem;
  padding: 0 2px;
}

/* Centro → Clientes: stack vertical (evita overlap nombre/email/meta) */
.client-row-compact {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  cursor: pointer;
}

.client-row-name {
  display: block;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-row-email,
.client-row-meta {
  display: block;
  font-size: 0.72rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-row-staff { opacity: 0.92; }

#client-list li.client-list-item.is-selected,
#client-list li.is-selected {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface));
}

.centro-filter-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.centro-filter-label select {
  text-transform: none;
  letter-spacing: 0;
  min-width: 140px;
}

.client-tag-filter-btn,
.client-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--badge-accent, #64748B) 45%, var(--border));
  background: color-mix(in srgb, var(--badge-accent, #64748B) 18%, var(--surface));
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  border-left: 3px solid var(--badge-accent, #64748B);
  cursor: pointer;
}

.client-level-badge { cursor: default; }

.client-tag-filter-btn.is-on {
  outline: 1px solid var(--badge-accent, var(--primary));
  background: color-mix(in srgb, var(--badge-accent, #64748B) 32%, var(--surface));
}

.client-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
}

.client-assign-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 8px;
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface) 70%, transparent);
}

.client-assign-summary dt {
  margin: 0;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.client-assign-summary dd {
  margin: 2px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-detail-fields {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 4px;
}

.client-detail-empty {
  color: var(--muted);
  font-size: 0.84rem;
  padding: 18px 8px;
  line-height: 1.5;
}

.client-detail-body h4 {
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.client-detail-body > .hint { margin-bottom: 6px; }

.side-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.side-block {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--sys-surface) 80%, transparent);
}

.side-block h4 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 8px;
}

.side-block .list { max-height: 180px; overflow-y: auto; }
.side-block .btn-primary,
.side-block .ghost {
  width: auto;
  margin-top: 0;
}

.chip-row.compact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  font-size: 0.8rem;
}

@media (max-width: 1100px) {
  .workspace-split,
  .workspace-split.is-list-detail,
  .workspace-split.is-cal {
    grid-template-columns: 1fr;
  }
  .aforo-summary-row { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .centro-host.tab-panel.active { overflow-y: auto; }
  .centro-panel.active { overflow: visible; }
  .workspace-split { display: flex; flex-direction: column; }
  .workspace-main,
  .workspace-side { max-height: 55vh; }
}

/* ── Centro Fase C — tokens + widgets (mockup portal-centro) ─────────── */
.centro-host {
  --danger: var(--err, #ef4444);
  --info: #60a5fa;
  --vio: #a78bfa;
  --centro-line: color-mix(in srgb, var(--text) 7%, transparent);
  --centro-line-strong: color-mix(in srgb, var(--text) 12%, transparent);
  --centro-muted-2: color-mix(in srgb, var(--muted) 70%, #667482);
  --accent: var(--primary);
  --accent-soft: var(--primary-soft);
}

/* Tabs: underline accent — una fila, sin scrollbar visible */
.centro-host .centro-chrome .centro-subnav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--centro-line);
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scrollbar-gutter: auto;
}
.centro-host .centro-chrome .centro-subnav::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent;
}
.centro-host .centro-chrome .centro-subnav-btn {
  flex: 0 0 auto;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 10px;
  font-size: 0.76rem;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.2;
  min-height: 0;
}
.centro-host .centro-chrome .centro-subnav-btn:hover {
  background: transparent;
  color: var(--text);
}
.centro-host .centro-chrome .centro-subnav-btn.active {
  background: transparent;
  color: var(--primary);
  font-weight: 650;
  border-bottom-color: var(--primary);
}

/* ── Centro UX pack (Emilio) — tool chrome, sin refresh manual ── */
.centro-host .centro-tool-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.centro-host .centro-expand-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.centro-host .centro-expand-search input[type="search"] {
  width: 0;
  min-width: 0;
  max-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  opacity: 0;
  pointer-events: none;
  transition: width 160ms ease, max-width 160ms ease, opacity 160ms ease, padding 160ms ease;
}
.centro-host .centro-expand-search.is-open input[type="search"] {
  width: min(220px, 42vw);
  max-width: 240px;
  min-width: 140px;
  padding: 6px 10px;
  opacity: 1;
  pointer-events: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
}
.centro-host .centro-filter-pop-wrap {
  position: relative;
}
.centro-host .centro-filter-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 260px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--centro-line);
  background: var(--surface);
  box-shadow: var(--elev-2);
  display: grid;
  gap: 10px;
}
.centro-host .centro-filter-pop[hidden] {
  display: none !important;
}
.centro-host .centro-filter-pop-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.centro-host .centro-filter-pop-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.centro-host .centro-filter-compact {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 650;
}
.centro-host .centro-filter-compact select {
  min-width: 120px;
  font-size: 0.82rem;
}

.service-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.service-toggle {
  margin: 0;
  cursor: pointer;
}
.service-toggle-face {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.service-toggle-face .nav-ico {
  width: 16px;
  height: 16px;
}
.service-toggle:has(input:checked) .service-toggle-face {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: var(--primary-soft);
  color: var(--primary);
}
.plan-price-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 10px;
  background: var(--surface-2);
}
.plan-price-prefix {
  color: var(--muted);
  font-weight: 700;
}
.plan-price-input-wrap input {
  border: 0;
  background: transparent;
  flex: 1;
  min-width: 0;
  padding: 8px 0;
}
.form-grid.form-stacked {
  grid-template-columns: 1fr 1fr;
}

#unassigned-list > li.gap-row {
  transition: border-color 140ms ease;
}
#unassigned-list .gap-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  min-width: 168px;
  max-width: 200px;
  width: 168px;
}
.unassigned-assign.icon-btn-labeled,
.unassigned-assign.assign-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  min-width: 0;
  height: auto;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  box-sizing: border-box;
}
.unassigned-assign.assign-chip .nav-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.unassigned-assign .assign-chip-txt {
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ico-chevron-prev,
.ico-chevron-next {
  transform-origin: center;
}
.ico-chevron-prev { transform: rotate(90deg); }
.ico-chevron-next { transform: rotate(-90deg); }

.staff-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.staff-filter-bar .centro-expand-search {
  align-self: flex-end;
  height: 36px;
}
.staff-filter-field {
  margin: 0;
}
.staff-filter-field select,
.centro-host .staff-filter-field select {
  height: 36px;
  min-width: 120px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.82rem;
}
.staff-clear-btn {
  align-self: flex-end;
  height: 36px;
  width: 36px;
}
#staff-list > li.staff-row,
#usuarios-staff-list > li.staff-row {
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
#staff-list .staff-row-layout,
#usuarios-staff-list .staff-row-layout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
#staff-list .staff-row-inner .staff-row-actions,
#usuarios-staff-list .staff-row-inner .staff-row-actions {
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
}
#staff-list .staff-action-btn.is-danger,
#usuarios-staff-list .staff-action-btn.is-danger {
  color: var(--sys-err, #f87171);
}
#staff-list .staff-action-btn.is-danger:hover:not(:disabled),
#usuarios-staff-list .staff-action-btn.is-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sys-err, #f87171) 14%, transparent);
  border-color: color-mix(in srgb, var(--sys-err, #f87171) 35%, transparent);
}
#staff-list > li.staff-row.is-inactive,
#usuarios-staff-list > li.staff-row.is-inactive {
  opacity: 0.62;
}

.plan-loc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.plan-loc-chip {
  margin: 0;
  cursor: pointer;
}
.plan-loc-chip-face {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
}
.plan-loc-chip:has(input:checked) .plan-loc-chip-face {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: var(--primary-soft);
  color: var(--primary);
}
#plan-locations-field.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.centro-host .centro-filter-pop-actions {
  justify-content: flex-end;
}

#location-list > li.sede-card {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
#location-list .sede-card-overlay {
  position: relative;
  grid-column: 1 / -1;
  padding-right: 44px;
}
#location-list .sede-card-edit-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--centro-line);
}
#location-list > li.sede-card.has-photo .sede-card-edit-btn {
  background: rgba(10, 10, 10, 0.55);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
}
#location-list > li.sede-card.has-photo .sede-card-edit-btn:hover:not(:disabled) {
  background: rgba(10, 10, 10, 0.78);
  border-color: color-mix(in srgb, var(--primary) 55%, rgba(255, 255, 255, 0.2));
}
#location-list > li.sede-card.has-photo {
  background-image: linear-gradient(180deg, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.88)), var(--sede-photo);
  background-size: cover;
  background-position: center;
}
#location-list > li.sede-card.has-photo .addr,
#location-list > li.sede-card.has-photo .k {
  color: rgba(255, 255, 255, 0.72);
}
.plans-deck-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 500px;
}
#centro-panel-planes .plans-deck {
  position: relative;
  display: block;
  min-height: 500px;
  height: 500px;
  overflow: hidden;
  padding: 24px 4px 32px;
}
#centro-panel-planes .plans-deck .plan-card {
  position: absolute;
  top: 24px;
  left: 50%;
  width: min(300px, 86%);
  max-width: 300px;
  height: 380px;
  min-height: 380px;
  max-height: 380px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  transform-origin: center top;
  transform: translateX(calc(-50% + (var(--deck-i, 0) * 292px))) scale(0.94);
  opacity: 0.82;
  z-index: 1;
  pointer-events: none;
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    height 420ms cubic-bezier(0.22, 1, 0.36, 1),
    min-height 420ms cubic-bezier(0.22, 1, 0.36, 1),
    max-height 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms ease,
    border-color 420ms ease;
}
#centro-panel-planes .plans-deck .plan-card .plan-card-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#centro-panel-planes .plans-deck .plan-card .plan-card-footer {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
#centro-panel-planes .plans-deck .plan-card .plan-services-checklist {
  flex: 0 0 auto;
  flex-shrink: 0;
  height: auto;
  min-height: 112px;
  max-height: none;
  margin-bottom: 4px;
  overflow: visible;
}
#centro-panel-planes .plans-deck .plan-card .plan-card-sedes {
  margin-bottom: 8px;
}
#centro-panel-planes .plans-deck .plan-card .plan-card-members {
  margin: 0 0 6px;
}
#centro-panel-planes .plans-deck .plan-card .plan-card-scope {
  margin-bottom: 10px;
}
#centro-panel-planes .plans-deck .plan-card:hover {
  box-shadow: var(--elev-2);
  transform: translateX(calc(-50% + (var(--deck-i, 0) * 292px))) scale(0.94);
}
#centro-panel-planes .plans-deck .plan-card.is-recommended:hover,
#centro-panel-planes .plans-deck .plan-card.featured:hover {
  transform: translateX(calc(-50% + (var(--deck-i, 0) * 292px))) scale(0.94);
}
#centro-panel-planes .plans-deck .plan-card.deck-left:hover,
#centro-panel-planes .plans-deck .plan-card.deck-right:hover {
  transform: translateX(calc(-50% + (var(--deck-i, 0) * 292px))) scale(0.94);
}
#centro-panel-planes .plans-deck .plan-card.deck-center:hover {
  transform: translateX(-50%) scale(1.08);
}
#centro-panel-planes .plans-deck .plan-card.deck-no-anim {
  transition: none !important;
}
#centro-panel-planes .plans-deck .plan-card.deck-center {
  height: 410px;
  min-height: 410px;
  max-height: 410px;
  transform: translateX(-50%) scale(1.08);
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
  border-color: color-mix(in srgb, var(--primary) 65%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 40%, var(--surface));
}
#centro-panel-planes .plans-deck .plan-card.deck-center .plan-card-price-amount {
  color: var(--primary);
  font-size: 1.45rem;
  font-weight: 750;
}
#centro-panel-planes .plans-deck .plan-card.deck-left,
#centro-panel-planes .plans-deck .plan-card.deck-right {
  opacity: 0.88;
  z-index: 2;
  pointer-events: auto;
  transform: translateX(calc(-50% + (var(--deck-i, 0) * 292px))) scale(0.94);
}
#centro-panel-planes .plans-deck .plan-card.deck-hidden {
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transform: translateX(calc(-50% + (var(--deck-i, 0) * 292px))) scale(0.88);
}
#centro-panel-planes .plans-deck .plan-card.is-inactive {
  filter: grayscale(0.35);
}
#centro-panel-planes .plans-deck .plan-card.is-inactive.deck-center {
  opacity: 0.55;
}
#centro-panel-planes .plans-deck .plan-item-actions {
  display: flex;
  gap: 6px;
  margin-top: 0;
  padding-top: 4px;
}
#centro-panel-planes .plan-card-price-amount {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-size: 1.28rem;
  font-weight: 700;
}

/* Agenda › Calendario / Sesiones: ocultar mega-subnav Centro */
.centro-host.is-agenda-module .centro-chrome .centro-subnav,
.centro-host.is-agenda-module > .centro-subnav {
  display: none !important;
}

.cal-toolbar {
  gap: 6px 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.cal-toolbar .cal-period-hint {
  flex: 1 1 8rem;
  min-width: 0;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-toolbar .cal-period-hint:empty {
  display: none;
}
.cal-toolbar-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
  min-width: 0;
}
.cal-filter-cluster,
.cal-nav-cluster {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
.cal-toolbar .cal-nav-cluster .icon-btn {
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
}
.cal-toolbar .cal-nav-cluster #cal-today {
  padding: 4px 8px;
  font-size: 0.76rem;
}
.cal-toolbar .cal-filter-compact {
  flex-direction: row;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  text-transform: none;
  letter-spacing: 0;
}
.cal-toolbar .cal-filter-compact select {
  min-width: 5.5rem;
  padding: 4px 6px;
  font-size: 0.78rem;
}
.cal-toolbar .cal-period-btn,
.cal-toolbar .cal-staff-btn {
  padding: 4px 8px;
  font-size: 0.78rem;
  max-width: 13rem;
}
.cal-toolbar .cal-period-btn span,
.cal-toolbar .cal-staff-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-toolbar .af-create-btn.sm {
  padding: 5px 10px;
  font-size: 0.78rem;
  gap: 4px;
}
@media (max-width: 900px) {
  .cal-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
  .cal-toolbar .cal-period-hint {
    flex-basis: 100%;
  }
}

/* Stats row */
.cal-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 6px;
  flex: 0 0 auto;
}
.cal-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, var(--primary) 6%);
  min-width: 0;
}
.cal-stat-ico {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
  flex-shrink: 0;
}
.cal-stat-ico .nav-ico {
  width: 16px;
  height: 16px;
}
.cal-stat-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.cal-stat-val {
  font-size: 1.05rem;
  font-weight: 750;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.cal-stat-lab {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1100px) {
  .cal-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cal-period-picker-wrap,
.cal-staff-multi-wrap,
.cal-create-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.cal-period-btn,
.cal-staff-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 650;
  cursor: pointer;
}
.cal-period-btn .nav-ico,
.cal-staff-btn .nav-ico {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  transform: rotate(90deg);
}
.cal-period-btn:hover,
.cal-staff-btn:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}
.cal-period-pop,
.cal-staff-pop,
.cal-create-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 220px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 12px 32px color-mix(in srgb, #000 35%, transparent);
}
.cal-create-wrap .cal-create-menu {
  left: auto;
  right: 0;
  min-width: 200px;
  padding: 6px;
}
.cal-period-pop-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cal-period-pop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
}
.cal-staff-opts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow: auto;
  padding: 2px;
}
.cal-staff-chip {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cal-staff-chip:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.cal-staff-chip.is-on {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--primary);
}
.cal-staff-opt { display: none; }

.cal-create-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
}
.cal-create-item:hover {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.cal-create-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal-create-dot.tone-sesion { background: var(--primary); }
.cal-create-dot.tone-reunion { background: #a78bfa; }
.cal-create-dot.tone-recordatorio { background: #fbbf24; }
.cal-create-dot.tone-privado { background: #94a3b8; }

#centro-panel-calendario .workspace-split.is-cal:has(#cal-day-detail[hidden]) {
  grid-template-columns: 1fr;
}
#centro-panel-calendario .cal-grid:has(.cal-list-view),
#centro-panel-calendario .cal-grid:has(.cal-list-empty) {
  padding: 6px 8px 8px;
}

.cal-list-view {
  margin: 0;
  padding: 0 2px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
  height: 100%;
  min-height: 0;
}
.cal-list-day-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cal-list-day-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
}
.cal-list-day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 22%, var(--surface));
  color: var(--primary);
  font-weight: 700;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
}
.cal-list-day-group.is-today .cal-list-day-num {
  background: var(--primary);
  color: var(--on-primary, #fff);
  border-color: transparent;
}
.cal-list-day-lab {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  text-transform: lowercase;
}
.cal-list-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-list-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, #000 12%);
  cursor: pointer;
  font-size: 0.86rem;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.cal-list-card:hover,
.cal-list-card:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--surface) 78%, var(--primary) 8%);
  outline: none;
}
.cal-list-card-title {
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-list-card-meta {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-list-card.is-cancelled {
  opacity: 0.58;
}
.cal-list-card.is-cancelled .cal-list-card-title {
  text-decoration: line-through;
}
.cal-list-card.is-bday {
  background: color-mix(in srgb, #fbbf24 12%, var(--surface));
  border-color: color-mix(in srgb, #fbbf24 28%, var(--border));
}
.cal-list-card.is-bday:hover,
.cal-list-card.is-bday:focus-visible {
  border-color: color-mix(in srgb, #fbbf24 55%, var(--border));
}
.cal-list-empty { padding: 1.25rem 0.75rem; }

.cal-chip[data-cal-event-id],
.cal-chip[data-cal-bday-day] {
  cursor: pointer;
  border: 0;
  text-align: left;
  font: inherit;
}
.cal-chip.is-cancelled {
  opacity: 0.55;
  text-decoration: line-through;
}
.day-event[data-cal-event-id] { cursor: pointer; }
.day-event.is-cancelled { opacity: 0.55; }

.btn-robust {
  min-width: 7.5rem;
  min-height: 2.5rem;
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  font-weight: 700;
}
.btn-robust:disabled,
.btn-robust[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  border-color: color-mix(in srgb, var(--border, #555) 70%, transparent);
  box-shadow: none;
  filter: grayscale(0.15);
}
.cal-wizard-footer { gap: 8px; flex-wrap: wrap; }
#cal-session-wizard .af-wizard-step {
  cursor: pointer;
}
.csw-repeat-end-fieldset {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.csw-repeat-end-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #444);
  background: color-mix(in srgb, var(--surface, #1c1c1c) 92%, #000);
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.csw-repeat-end-opt.is-active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  opacity: 1;
}
.csw-repeat-end-opt.is-dim {
  opacity: 0.48;
  border-color: color-mix(in srgb, var(--border, #555) 80%, transparent);
}
.csw-repeat-end-opt.is-dim .csw-inline-num,
.csw-repeat-end-opt.is-dim .csw-inline-date {
  opacity: 0.55;
}
.csw-picker-q {
  width: 100%;
  margin: 8px 0 6px;
  box-sizing: border-box;
}
.csw-picker-list,
.csw-collab-list.csw-picker-list {
  max-height: 220px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--border, #444) 85%, transparent);
  border-radius: 10px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.csw-audience-tabs {
  display: flex;
  gap: 4px;
  margin: 8px 0 0;
  padding: 3px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface, #1c1c1c) 88%, #000);
  border: 1px solid color-mix(in srgb, var(--border, #444) 80%, transparent);
}
.csw-audience-tabs .assign-who-tab {
  flex: 1;
  appearance: none;
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  background: transparent;
  color: color-mix(in srgb, var(--text, #eee) 70%, transparent);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
}
.csw-audience-tabs .assign-who-tab.active,
.csw-audience-tabs .assign-who-tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: #fff;
}
.csw-picker-pane.hidden { display: none !important; }
.ced-summary-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 0.95rem;
}
.ced-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}
.csw-covers {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.csw-cover {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
}
.csw-cover.tone-1 { background: linear-gradient(135deg, #ea580c, #9a3412); }
.csw-cover.tone-2 { background: linear-gradient(135deg, #0ea5e9, #075985); }
.csw-cover.tone-3 { background: linear-gradient(135deg, #a855f7, #5b21b6); }
.csw-cover.tone-4 { background: linear-gradient(135deg, #22c55e, #166534); }
.csw-cover.is-on {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--primary);
}
.csw-cover.is-on::after {
  content: "✓";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.csw-fieldset {
  border: 0;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
}
.csw-fieldset legend {
  width: 100%;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 650;
}
.csw-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  cursor: pointer;
}
.csw-dows {
  display: flex;
  gap: 6px;
  margin: 8px 0 12px;
}
.csw-dow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
.csw-dow.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.csw-inline-num,
.csw-inline-date {
  width: 5.5rem;
  margin: 0 4px;
}
.csw-cover-upload {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--surface) 80%, #000);
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
}
.csw-remind-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 720px) {
  .csw-remind-grid { grid-template-columns: 1fr; }
}
.csw-remind-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, var(--primary) 4%);
  min-height: 140px;
}
.csw-remind-card h5 {
  margin: 0;
  font-size: 0.9rem;
}
.csw-remind-picked {
  flex: 1;
  font-size: 0.8rem;
}
.csw-step3-block.hidden { display: none !important; }
.csw-session-cond.hidden { display: none !important; }
.csw-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.csw-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border, #334155) 80%, transparent);
  background: color-mix(in srgb, var(--surface-2, #1e293b) 88%, transparent);
  color: var(--text, #e2e8f0);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.csw-tag-chip.is-on {
  border-color: var(--accent, #f97316);
  background: color-mix(in srgb, var(--accent, #f97316) 18%, transparent);
}
.csw-tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.csw-tag-stub-row {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}
.csw-tag-stub-row input {
  flex: 1 1 auto;
  min-width: 0;
}
.csw-bonos-stub select:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}
.csw-session-clients-card { margin-top: 12px; }
.csw-session-hint { margin: 8px 0 0; }
#csw-visibility-field .fit-tip-q {
  margin-left: 4px;
  vertical-align: middle;
}
.cal-event-detail .ced-body { display: flex; flex-direction: column; gap: 14px; }
.ced-hero {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 90%, var(--primary) 6%);
}
.ced-hero-main h4 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}
.ced-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ced-badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--primary) 22%, transparent);
}
.ced-badge.tone-mode { background: color-mix(in srgb, #64748b 35%, transparent); }
.ced-badge.tone-sesion { background: color-mix(in srgb, var(--primary) 22%, transparent); }
.ced-badge.tone-recordatorio { background: color-mix(in srgb, #38bdf8 30%, transparent); }
.ced-badge.tone-privado { background: color-mix(in srgb, #94a3b8 38%, transparent); }
.ced-badge.tone-reunion { background: color-mix(in srgb, #a78bfa 32%, transparent); }
.ced-badge.tone-cancel { background: color-mix(in srgb, #ef4444 28%, transparent); }
.ced-meta { margin: 2px 0; font-size: 0.86rem; }
.ced-meta.muted { color: var(--muted); }
.ced-hero-actions { display: flex; gap: 6px; align-items: flex-start; }
.ced-org-box {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 650;
}
/* UA [hidden] loses to display:flex/inline-flex on these nodes */
#ced-place[hidden],
#ced-mode[hidden],
#ced-reserve-row[hidden],
#ced-client-empty[hidden],
#ced-reserve-state[hidden] {
  display: none !important;
}
.ced-reserve-bar {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ced-reserve-bar input { flex: 1; }
.ced-stats-row {
  display: flex;
  gap: 18px;
  font-size: 0.86rem;
  color: var(--muted);
}
.ced-empty {
  text-align: center;
  padding: 28px 12px;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 10px;
}
#centro-panel-calendario .cal-chip-bday {
  background: color-mix(in srgb, #fbbf24 28%, var(--surface));
  color: #fde68a;
  font-weight: 700;
}
@media (max-width: 720px) {
  .cal-list-card {
    padding: 10px 12px;
  }
  .cal-list-day-lab {
    font-size: 0.86rem;
  }
}
.cal-filter-compact {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 650;
}
.cal-filter-compact select {
  font-size: 0.82rem;
  min-width: 110px;
}
#centro-panel-calendario .cal-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 4px auto 0;
  min-width: 28px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent);
  flex-shrink: 0;
}
#centro-panel-calendario .cal-day-cell {
  overflow: hidden;
  min-height: 108px;
}
#centro-panel-calendario .cal-day-cell.is-today .cal-day-num {
  color: var(--primary);
  font-weight: 800;
}
.cal-day-timeline {
  margin: 0 0 10px;
}
.cal-day-rail {
  display: block;
  position: relative;
  padding-left: 0;
}
.cal-day-rail.has-events {
  padding-left: 20px;
}
.cal-day-rail.has-events::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: color-mix(in srgb, var(--primary) 55%, var(--border));
  border-radius: 2px;
  pointer-events: none;
}
.cal-day-rail .cal-day-events {
  margin: 0;
  min-width: 0;
  padding: 0;
  list-style: none;
}
.cal-day-rail .cal-day-timeline {
  display: none !important;
}
.cal-day-vtimeline {
  position: relative;
  min-height: 180px;
  width: 100%;
  padding: 4px 0;
}
.cal-day-vtimeline::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: color-mix(in srgb, var(--primary) 35%, var(--border));
  border-radius: 2px;
}
.cal-vnow {
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);
  z-index: 2;
}
.cal-vnow-label {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}
#cal-day-events .day-event {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
  border-radius: 10px;
  border: 1px solid var(--centro-line);
  padding: 10px 36px 10px 12px;
  margin-bottom: 8px;
  background: var(--surface-2);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
#cal-day-events .day-event:last-child {
  margin-bottom: 0;
}
#cal-day-events .day-event-body {
  flex: 1;
  min-width: 0;
}
#cal-day-events .cal-vevent-dot {
  position: absolute;
  left: -19px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  margin: 0;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--primary);
  z-index: 1;
  flex-shrink: 0;
  box-sizing: border-box;
}
#cal-day-events .cal-vevent-dot.is-past {
  background: var(--primary);
  border-color: var(--primary);
}
#cal-day-events .cal-vevent-dot.is-live {
  left: -21px;
  width: 16px;
  height: 16px;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 28%, transparent);
}
#cal-day-events .cal-vevent-dot.is-future {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  opacity: 0.78;
}
.cal-vevent-dot {
  position: absolute;
  left: 5px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--primary);
  z-index: 1;
}
.cal-vevent-dot.is-live {
  background: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
}
.cal-timeline-track,
.cal-timeline-progress,
.cal-timeline-now,
.cal-timeline-label {
  display: none !important;
}
#cal-day-events .day-event.is-live {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface-2));
}
#cal-day-events .day-event-live {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  margin-bottom: 4px;
}
#cal-day-events .cita-actions {
  position: absolute;
  top: 8px;
  right: 8px;
}
#cal-day-events .cal-cancel {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  color: #ef4444;
  border-color: color-mix(in srgb, #ef4444 45%, transparent);
  background: color-mix(in srgb, #ef4444 12%, transparent);
}
#cal-day-events .cal-cancel:hover:not(:disabled) {
  color: #fff;
  background: #ef4444;
  border-color: #ef4444;
}
#cal-day-events .cal-cancel .nav-ico {
  width: 14px;
  height: 14px;
}
#cal-birthdays.has-bdays {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--primary) 40%, transparent);
  color: var(--text);
  font-weight: 600;
}

.centro-host .workspace-toolbar {
  border-color: var(--centro-line);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-radius: 10px;
  padding: 10px 12px;
}
.centro-host .workspace-main,
.centro-host .workspace-side {
  border-color: var(--centro-line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-radius: 12px;
}

/* Chips semánticos Centro */
.centro-host .chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 650;
  background: color-mix(in srgb, var(--surface-2) 90%, #24303b);
  color: var(--muted);
  border: 1px solid var(--centro-line);
  white-space: nowrap;
}
.centro-host .chip.accent {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
}
.centro-host .chip.ok {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 25%, transparent);
}
.centro-host .chip.warn {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 28%, transparent);
}
.centro-host .chip.danger {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}
.centro-host .chip.info {
  background: color-mix(in srgb, var(--info) 12%, transparent);
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 28%, transparent);
}
.centro-host .chip.chip-vio,
.centro-host .chip.lvl-deportista {
  background: color-mix(in srgb, var(--vio) 14%, transparent);
  color: var(--vio);
  border-color: color-mix(in srgb, var(--vio) 30%, transparent);
}
.centro-host .chip.lvl-avanzado {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}
.centro-host .chip.lvl-medio {
  background: color-mix(in srgb, var(--info) 12%, transparent);
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 28%, transparent);
}
.centro-host .chip.lvl-principiante {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 25%, transparent);
}
#centro-panel-clientes #client-level-legend .chip {
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1;
}
#centro-panel-clientes #client-level-legend .chip.is-on {
  outline: 1px solid currentColor;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 25%, transparent);
}
#location-list .sede-cap-n {
  color: var(--primary);
  font-weight: 750;
}
#location-list .location-occupancy-bar {
  display: none;
}

.centro-host .person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.centro-host .avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-2) 80%, #24303b);
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
}
.centro-host .person-txt { min-width: 0; }
.centro-host .person-name {
  font-weight: 650;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.centro-host .person-meta {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Agenda — citas */
#agenda-list { display: flex; flex-direction: column; gap: 8px; }
#agenda-list > li.cita-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: start;
  padding: 10px 12px;
  margin: 0;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-left: 3px solid var(--primary);
  list-style: none;
}
#agenda-list > li.cita-row.status-confirmada { border-left-color: var(--ok); }
#agenda-list > li.cita-row.status-pendiente { border-left-color: var(--warn); }
#agenda-list > li.cita-row.status-cancelada { border-left-color: var(--danger); }
#agenda-list > li.cita-row.has-type-color.status-confirmada {
  border-left-color: var(--cita-type-color, var(--ok));
}
#agenda-list > li.cita-row.tipo-fisio:not(.status-confirmada):not(.status-pendiente):not(.status-cancelada) {
  border-left-color: var(--info);
}
#agenda-list > li.cita-row.tipo-nutri:not(.status-confirmada):not(.status-pendiente):not(.status-cancelada) {
  border-left-color: var(--ok);
}
#agenda-list > li.cita-row.tipo-well:not(.status-confirmada):not(.status-pendiente):not(.status-cancelada) {
  border-left-color: var(--vio);
}
#agenda-list .cita-type-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--cita-type-color, var(--primary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cita-type-color, var(--primary)) 25%, transparent);
}
#agenda-list .cita-mode-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  border: 1px solid var(--centro-line);
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
#agenda-list .cita-mode-pill.is-online {
  border-color: color-mix(in srgb, var(--info, #3b82f6) 40%, var(--centro-line));
  color: color-mix(in srgb, var(--info, #3b82f6) 85%, var(--text));
}
#agenda-list .cita-mode-pill.is-presencial {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--centro-line));
  color: color-mix(in srgb, var(--primary) 80%, var(--text));
}
#agenda-list .cita-time {
  font-weight: 700;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
#agenda-list .cita-time span {
  display: block;
  color: var(--centro-muted-2);
  font-weight: 500;
  font-size: 0.68rem;
}
#agenda-list .cita-title { font-weight: 650; font-size: 0.84rem; }
#agenda-list .cita-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 4px;
  align-items: center;
}
#agenda-list .cita-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--muted);
}
#agenda-list .cita-meta-ico {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  color: var(--muted);
}
#agenda-list .cita-meta-muted { opacity: 0.9; }
#agenda-list .cita-end {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
#agenda-list .cita-icon-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
#agenda-list .cita-icon-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#agenda-list .cita-icon-btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-color: var(--centro-line);
}
#agenda-list .cita-icon-btn.is-danger:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
#agenda-list .cita-icon-btn .nav-ico {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}
#agenda-list .cita-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.centro-host .centro-more-wrap {
  list-style: none;
  padding: 8px 0 4px;
  margin: 0;
  border: 0;
  background: transparent;
  text-align: center;
}
.centro-host .centro-more-link {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
}
.centro-host .centro-more-link:hover {
  color: var(--primary);
}

#gc-list > li.clase-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px;
  margin: 0 0 8px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--centro-line);
  list-style: none;
}
#gc-list .clase-card-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 70%, #24303b);
  display: grid;
  place-items: center;
  color: var(--muted);
}
#gc-list .clase-card-ico .nav-ico {
  width: 18px;
  height: 18px;
}
#gc-list .clase-card-body { min-width: 0; }
#gc-list .clase-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
#gc-list .clase-card h4 {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 650;
}
#work-schedule-list > li.horario-day {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  margin: 0;
  border-bottom: 1px solid var(--centro-line);
  border-radius: 0;
  background: transparent;
  list-style: none;
}
#work-schedule-list > li.horario-day:last-child { border-bottom: 0; }
#work-schedule-list .horario-day .d {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--centro-muted-2);
  text-transform: uppercase;
}
#work-schedule-list .horario-line {
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.centro-host .staff-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--centro-line);
  font-size: 0.72rem;
  font-weight: 600;
  max-width: 100%;
}
.centro-host .staff-pill .av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-2) 80%, #24303b);
  display: grid;
  place-items: center;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
}
.centro-host .staff-pill .staff-pill-txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Agenda — cupo (reutilizado) */
.centro-host .cupo-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}
.centro-host .cupo-bar > i {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: inherit;
}

/* Aforo — caps live */
#aforo-live-stats.stat-grid,
#aforo-live-stats.aforo-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
#aforo-live-stats .sede-cap {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent);
}
#aforo-live-stats .sede-cap.is-warn {
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
}
#aforo-live-stats .sede-cap.is-hot {
  border-color: color-mix(in srgb, var(--danger, #f87171) 45%, transparent);
}
#aforo-live-stats .sede-cap.is-hot .nums { color: var(--danger, #f87171); }
.aforo-live-meta {
  margin: 2px 0 10px;
  min-height: 1.1em;
}
#aforo-visits > li.visit-row.is-open {
  border-color: color-mix(in srgb, var(--ok) 35%, transparent);
}
#aforo-live-stats .sede-cap h4 {
  margin: 0 0 4px;
  font-size: 0.82rem;
  font-weight: 650;
}
#aforo-live-stats .sede-cap .nums {
  font-size: 1.35rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ok);
}
#aforo-live-stats .sede-cap.is-warn .nums { color: var(--warn); }
#aforo-live-stats .sede-cap .nums small {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}
.centro-host .cap-bar {
  margin-top: 10px;
  height: 8px;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}
.centro-host .cap-bar > i {
  display: block;
  height: 100%;
  background: var(--ok);
  border-radius: inherit;
}
#aforo-live-stats .sede-cap.is-warn .cap-bar > i {
  background: var(--warn);
}
#aforo-live-stats .sede-cap.is-hot .cap-bar > i {
  background: var(--danger, #f87171);
}

/* Aforo — visitas */
#aforo-visits > li.visit-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px 14px;
  align-items: center;
  padding: 10px 12px;
  margin: 0 0 8px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid transparent;
  list-style: none;
}
#aforo-visits .visit-row .when {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
#aforo-visits .visit-dur {
  min-width: 3.5rem;
  text-align: right;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* Clientes — identity + attrs 2×2 */
#client-list > li.client-row,
#client-list > li.client-list-item {
  display: block;
  padding: 0;
  margin: 0 0 8px;
  border: 0;
  background: transparent;
  list-style: none;
}
#client-list .client-row-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
#client-list > li.is-selected .client-row-inner,
#client-list > li.client-list-item.is-selected .client-row-inner {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  background: color-mix(in srgb, var(--primary-soft) 50%, var(--surface-2));
}
#client-list .client-identity {
  display: flex;
  gap: 10px;
  min-width: 0;
}
#client-list .client-identity .txt { min-width: 0; flex: 1; }
#client-list .client-identity .name-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#client-list .client-identity .name {
  font-weight: 650;
  font-size: 0.84rem;
}
#client-list .client-identity .email {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
#client-list .client-attrs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--muted);
}
#client-list .client-attrs span b {
  color: var(--text);
  font-weight: 600;
}
#centro-panel-clientes .workspace-main-head .legend {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-left: auto;
}
#client-list .client-row-compact {
  /* legacy stack still ok if present */
  padding: 12px;
  border-radius: 8px;
  background: var(--surface-2);
}

/* Retención — KPIs + alert cards */
#churn-stats.row-kpis,
#churn-stats.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
#churn-stats .kpi {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--centro-line));
  border-radius: 12px;
  padding: 14px 16px;
}
#churn-stats .kpi.danger { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
#churn-stats .kpi.amber { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
#churn-stats .kpi.alert {
  border-color: color-mix(in srgb, var(--primary) 50%, transparent);
  background: color-mix(in srgb, var(--primary-soft) 40%, var(--surface));
}
#churn-stats .kpi .lbl {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}
#churn-stats .kpi .val {
  margin-top: 6px;
  font-size: 1.6rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1;
}

#churn-alerts-list > li.alert-card,
#churn-alerts-list > li.churn-alert-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  margin: 0 0 8px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--centro-line);
  list-style: none;
}
#churn-alerts-list > li.sev-alta,
#churn-alerts-list > li.churn-severity-red {
  border-left: 3px solid var(--danger);
}
#churn-alerts-list > li.sev-ambar,
#churn-alerts-list > li.churn-severity-amber {
  border-left: 3px solid var(--warn);
}
#churn-alerts-list .sev-tag {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 6px;
}
#churn-alerts-list .sev-tag.alta {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
}
#churn-alerts-list .sev-tag.ambar {
  background: color-mix(in srgb, var(--warn) 15%, transparent);
  color: var(--warn);
}
#churn-alerts-list .alert-reason {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--muted);
}
#churn-alerts-list .alert-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
#churn-alerts-list .alert-actions .btn-primary,
#churn-alerts-list .alert-actions .ghost {
  width: auto;
  white-space: nowrap;
}

/* Calendario — day events */
#cal-day-events > li.day-event {
  padding: 10px 12px;
  margin: 0 0 8px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--centro-line);
  list-style: none;
}
#cal-day-events .day-event .t { font-weight: 700; font-size: 0.75rem; }
#cal-day-events .day-event .m { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }

#centro-panel-calendario .cal-day-cell.selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 40%, var(--surface-2));
}
#centro-panel-calendario .cal-chip.appointment,
#centro-panel-calendario .cal-ev.cita {
  background: color-mix(in srgb, #14b8a6 22%, transparent);
  color: #5eead4;
}
#centro-panel-calendario .cal-chip.class,
#centro-panel-calendario .cal-ev.train {
  background: var(--primary-soft);
  color: var(--primary);
}
#centro-panel-calendario .cal-ev.well {
  background: color-mix(in srgb, #14b8a6 22%, transparent);
  color: #5eead4;
}

/* Planes — featured sin glow decorativo (transform lo maneja el deck) */
#centro-panel-planes .plan-card.is-recommended,
#centro-panel-planes .plan-card.featured {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
}
#centro-panel-planes .plan-card.is-recommended:hover,
#centro-panel-planes .plan-card.featured:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent);
}
#centro-panel-planes .checkout-demo-panel {
  margin-top: 14px;
  border-radius: 8px;
  border: 1px solid var(--centro-line);
  background: var(--surface);
}

/* Sedes — card */
#location-list > li.location-row,
#location-list > li.sede-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 24px;
  padding: 16px 18px;
  margin: 0 0 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--centro-line);
  border-bottom: 1px solid var(--centro-line);
  list-style: none;
}
#location-list > li.location-row:last-child,
#location-list > li.sede-card:last-child {
  margin-bottom: 0;
}
#location-list .sede-card h4,
#location-list .location-row-head strong {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
#location-list .sede-stats,
#location-list .location-row-stats {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  flex-wrap: wrap;
}
#location-list .sede-services,
#location-list .location-service-chips {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* Sin tareas — gap rows + chips on */
#unassigned-list > li.gap-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  margin: 0 0 8px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--centro-line);
  list-style: none;
}
#unassigned-list .gap-mods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.centro-host .module-filter-chips .module-chip.active,
.centro-host .module-filter-chips .module-chip.on {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  background: var(--primary-soft);
  color: var(--primary);
}

/* Empty states Centro — causa + CTA */
.centro-host .empty-state,
.centro-host .empty-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 36px 24px;
  min-height: 140px;
  border: 1px dashed var(--centro-line-strong);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 40%, transparent);
}
.centro-host .empty-state .empty-icon,
.centro-host .empty-block .empty-art {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}
.centro-host .empty-block h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
}
.centro-host .empty-block p,
.centro-host .empty-state p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  max-width: 320px;
}
.centro-host .empty-block-actions,
.centro-host .empty-state .empty-cta {
  margin-top: 8px;
}
.centro-host .empty-cta-accent {
  color: var(--primary);
  font-weight: 650;
}
.centro-host .empty-state-wrap {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}
.centro-host .empty-state-wrap .empty-block {
  border: 0;
  background: transparent;
  min-height: 180px;
}

/* Agenda side — bloques como cards mockup */
#centro-panel-agenda .workspace-side--stack {
  border: 0;
  background: transparent;
  overflow: visible;
}
#centro-panel-agenda .workspace-side--stack .side-stack {
  padding: 0;
  gap: 12px;
}
#centro-panel-agenda .side-block {
  border: 1px solid var(--centro-line);
  border-radius: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
#centro-panel-agenda .side-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
#centro-panel-agenda .side-block-head h4 {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
#centro-panel-agenda .side-block-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
#centro-panel-agenda .gc-reminders-link {
  margin-top: 8px;
  font-size: 0.72rem;
  opacity: 0.75;
}

/* Agenda — filtro compacto + layout operativo */
#centro-panel-agenda .agenda-toolbar {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 8px;
}
.agenda-filter-cluster {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.agenda-toolbar.workspace-toolbar,
.aforo-toolbar.workspace-toolbar {
  align-items: center;
}
.workspace-toolbar .agenda-inline-filter,
.workspace-toolbar label.agenda-inline-filter {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin: 0;
  height: 34px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  white-space: nowrap;
}
.agenda-inline-filter-lab {
  flex: 0 0 auto;
  color: var(--muted);
  font-weight: 650;
}
.workspace-toolbar .agenda-inline-filter select {
  width: auto;
  min-width: 7.5rem;
  max-width: 11rem;
  height: 30px;
  margin: 0;
  padding: 4px 8px;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.agenda-preset-list {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}
.agenda-preset-list .agenda-preset-btn {
  appearance: none;
  border: 1px solid var(--centro-line);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.2;
  text-align: left;
  width: 100%;
}
.agenda-preset-list .agenda-preset-btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.agenda-preset-list .agenda-preset-btn.is-active,
.agenda-preset-list .agenda-preset-btn[aria-pressed="true"] {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--centro-line));
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
}
.agenda-date-filter,
.aforo-date-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.agenda-date-filter-btn.is-open,
.agenda-date-filter-btn:hover,
.aforo-date-filter-btn.is-open,
.aforo-date-filter-btn:hover {
  color: var(--primary);
}
.agenda-date-filter-btn.is-active,
.aforo-date-filter-btn.is-active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.agenda-date-filter-label {
  font-size: 0.78rem;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agenda-date-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 40;
  min-width: 260px;
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--centro-line-strong);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent);
}
.agenda-date-popover::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 14px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-left: 1px solid var(--centro-line-strong);
  border-top: 1px solid var(--centro-line-strong);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}
.agenda-date-popover[hidden] { display: none !important; }
.agenda-date-popover-title {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 650;
}
.agenda-date-popover-fields {
  display: grid;
  gap: 10px;
}
.agenda-date-popover-fields[hidden] { display: none !important; }
.agenda-date-popover-fields .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  margin: 0;
}
.agenda-date-popover-fields .field input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 4px 8px;
  font-size: 0.82rem;
}
.agenda-date-popover-hint {
  margin: 0 0 10px;
  font-size: 0.68rem;
  color: var(--muted);
}
.agenda-date-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* legacy aliases kept for any leftover refs */
.agenda-preset-group { display: none; }
.agenda-staff-filter-label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

/* Agenda — layout: KPIs + Citas | Clases, Horarios footer */
.agenda-workspace {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1;
}
.agenda-guide,
.agenda-guide-body,
.agenda-guide-lead,
.agenda-guide-dismiss {
  display: none !important;
}
.agenda-ops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "kpis kpis"
    "empty empty"
    "citas clases"
    "config config";
  gap: 10px;
  min-height: 0;
  flex: 1;
  align-content: stretch;
}
.agenda-sesiones-kpis {
  grid-area: kpis;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.agenda-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--centro-line);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  min-width: 0;
}
.agenda-kpi strong {
  font-size: 1.25rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--text);
}
.agenda-kpi span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: uppercase;
}
.agenda-kpi.is-total {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--centro-line));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-2));
}
.agenda-kpi.is-total strong {
  color: var(--primary);
}
.agenda-sesiones-empty {
  grid-area: empty;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 36px 20px 40px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--centro-line));
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  overflow: hidden;
  min-height: 180px;
}
.agenda-sesiones-empty[hidden] {
  display: none !important;
}
.agenda-sesiones-empty-glow {
  position: absolute;
  inset: -20% 20% auto;
  height: 120px;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--primary) 22%, transparent),
    transparent 70%
  );
  pointer-events: none;
}
.agenda-sesiones-empty h4 {
  margin: 0;
  position: relative;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--text);
  max-width: 28rem;
}
.agenda-sesiones-empty .hint {
  margin: 0;
  position: relative;
  max-width: 26rem;
}
.agenda-ops.is-empty .agenda-section--citas,
.agenda-ops.is-empty .agenda-section--clases {
  display: none !important;
}
.agenda-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--centro-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  overflow: hidden;
}
.agenda-section--citas {
  grid-area: citas;
  flex: 1 1 auto;
  min-height: 0;
}
.agenda-section--clases {
  grid-area: clases;
  flex: 1 1 auto;
  min-height: 0;
  opacity: 0.98;
}
.agenda-section[hidden] {
  display: none !important;
}
.agenda-config {
  grid-area: config;
}
.agenda-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0;
  border-bottom: 1px solid var(--centro-line);
}
.agenda-section-head h3 {
  margin: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.agenda-section--citas .agenda-section-head h3 {
  color: var(--text);
  font-weight: 700;
}
.agenda-section-count {
  font-size: 0.7rem;
  margin-left: 2px;
}
.agenda-timeline-scroll {
  padding: 8px 10px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}
.agenda-gc-scroll {
  max-height: none;
}
#agenda-list.agenda-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  padding-left: 2px;
}
#agenda-list > li.cita-row.is-clickable {
  cursor: pointer;
  transition:
    border-color var(--dur-fast, 160ms) ease,
    background var(--dur-fast, 160ms) ease;
}
#agenda-list > li.cita-row.is-clickable:hover,
#agenda-list > li.cita-row.is-clickable:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--centro-line));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-2));
  outline: none;
}
#agenda-list .cita-open-hint {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0 2px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1;
  opacity: 0.4;
  margin-left: 2px;
  cursor: pointer;
}
#agenda-list > li.cita-row.is-clickable:hover .cita-open-hint,
#agenda-list .cita-open-hint:hover,
#agenda-list .cita-open-hint:focus-visible {
  color: var(--primary);
  opacity: 1;
  outline: none;
}
#agenda-list .cita-icon-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.agenda-config {
  grid-area: config;
  flex: 0 0 auto;
  margin-top: 0;
  border: 0;
  border-top: 1px dashed var(--centro-line);
  border-radius: 0;
  background: transparent;
  padding: 0;
  opacity: 0.85;
}
.agenda-config-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 6px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}
.agenda-config-summary::-webkit-details-marker { display: none; }
.agenda-config-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.agenda-config[open] .agenda-config-summary {
  border-bottom: 1px solid var(--centro-line);
  color: var(--text);
  opacity: 1;
}
.agenda-config .agenda-horarios-summary {
  margin: 0;
  font-weight: 500;
  font-size: 0.68rem;
  max-width: min(420px, 55vw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agenda-config-body {
  padding: 12px 14px 14px;
}
.agenda-config-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
#agenda-detail-dialog[hidden] {
  display: none !important;
}
.agenda-detail-grid {
  display: grid;
  gap: 10px;
  margin: 0;
}
.agenda-detail-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  align-items: baseline;
}
.agenda-detail-row dt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.agenda-detail-row dd {
  margin: 0;
  font-size: 0.88rem;
}
.agenda-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.agenda-detail-actions .is-danger {
  color: var(--danger);
}

#centro-panel-agenda .side-block--compact {
  padding: 12px 14px;
}
#centro-panel-agenda .agenda-horarios-summary {
  margin: 0 0 8px;
  font-size: 0.78rem;
  line-height: 1.4;
}
#centro-panel-agenda .horario-list--compact {
  max-height: 160px;
  margin-bottom: 6px;
}
#centro-panel-agenda .horario-list--compact:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#gc-list,
#gc-list.agenda-gc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: none;
}
#centro-panel-agenda .side-block .list#gc-list {
  max-height: min(52vh, 420px);
}

/* FAB Centro */
.centro-fab-wrap {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.centro-fab-wrap[hidden] {
  display: none !important;
}
.centro-fab-wrap > .centro-fab,
.centro-fab-wrap > .centro-fab-actions:not([hidden]) {
  pointer-events: auto;
}
.centro-fab {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 0;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 35%, transparent);
  transition: transform var(--dur-fast) var(--ease-out);
}
.centro-fab .nav-ico {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.centro-fab.is-open { transform: rotate(45deg); }
.centro-fab-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  animation: planner-fab-in var(--dur-fast) var(--ease-out);
}
.centro-fab-actions[hidden] { display: none !important; }
.centro-fab-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--centro-line);
  background: var(--surface-2, var(--surface));
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.centro-fab-action:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--centro-line));
  color: var(--primary);
}

#unassigned-list .gap-mods-label {
  display: block;
  width: 100%;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--centro-muted-2);
  margin-bottom: 2px;
}
#unassigned-list .gap-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  min-width: 168px;
  max-width: 200px;
  width: 168px;
}

#location-list .location-stat-value.v,
#location-list .sede-stat .v {
  font-variant-numeric: tabular-nums;
}
#location-list .sede-stat:first-child .v,
#location-list .location-stat:first-child .location-stat-value {
  color: var(--primary);
}

@media (max-width: 900px) {
  #churn-stats.row-kpis,
  #churn-stats.stat-grid { grid-template-columns: 1fr; }
  #churn-alerts-list > li.alert-card,
  #churn-alerts-list > li.churn-alert-item {
    grid-template-columns: 1fr;
  }
  #unassigned-list > li.gap-row {
    grid-template-columns: 1fr;
  }
  #client-list .client-attrs { grid-template-columns: 1fr; }
}

/* ── Module filter chips (Centro → Sin tareas) ───────────────────────── */
.module-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.module-filter-chips .module-chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 5px 11px;
  cursor: pointer;
  user-select: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.module-filter-chips .module-chip span {
  line-height: 1.2;
}

.module-filter-chips .module-chip:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  color: var(--text);
}

.module-filter-chips .module-chip.active,
.module-filter-chips .module-chip:has(input:checked) {
  border-color: var(--primary);
  color: var(--text);
  background: var(--primary-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 32%, transparent);
}

.module-filter-chips .module-chip:focus-within {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary);
}

/* ── Empty block minimal (Planificador) ─────────────────────────────── */
.empty-block--minimal {
  border-style: solid;
  border-color: var(--hairline);
  background: transparent;
  padding: 28px 20px;
  gap: 8px;
}

.empty-block-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
}

.empty-block-actions .btn-primary,
.empty-block-actions .ghost {
  width: auto;
  margin: 0;
  padding: 8px 14px;
  font-size: 0.82rem;
}

/* ── Ejercicios / Planificador / Métricas — fill viewport ───────────── */
#tab-ejercicios.tab-panel.active,
#tab-planificador.tab-panel.active,
#tab-metricas.tab-panel.active,
#tab-comidas.tab-panel.active,
#tab-lib-wellness.tab-panel.active,
#tab-lib-fisioterapia.tab-panel.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-x: hidden;
  gap: 0;
  min-width: 0;
  max-width: 100%;
}

#tab-ejercicios .exercise-panel-head {
  flex: 0 0 auto;
}

#tab-ejercicios .panel-desc {
  display: none; /* el topbar ya orienta; gana altura para el grid */
}

#tab-ejercicios .ex-active-filters {
  margin-bottom: 6px;
}

#tab-ejercicios .ex-filter-panel.chip-row {
  margin-bottom: 0;
  gap: 6px;
}

#tab-ejercicios .exercise-catalog {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

#tab-ejercicios #exercise-catalog-error,
#tab-ejercicios .exercise-infinite-status {
  flex: 0 0 auto;
}

/* ── Planificador — vista calendario ──────────────────────────────
   El catálogo dejó de ser un panel fijo (vive en modal), así que el tab es
   una sola columna: cabecera de plan → semanas → días. */

#tab-planificador,
#tab-comidas,
#tab-recuperacion {
  position: relative;
}

#tab-planificador .planner-panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  position: relative;
  z-index: 6;
}

#tab-planificador .planner-panel-head .planner-contextbar {
  flex: 1 1 auto;
  min-width: 0;
}

#tab-planificador #plan-refresh {
  flex: 0 0 auto;
  margin-left: auto;
  margin-bottom: 8px;
}

/* Barra de contexto: dos disparadores con icono (cliente / plan).
   Actualizar vive fuera, anclado a la derecha del head, para no perderse
   detrás del scroll ni al ocultar los pickers en Biblioteca. */
.planner-contextbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  min-width: 0;
}

.planner-picker { position: relative; min-width: 0; }

.planner-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 260px;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 82%, transparent);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) ease,
    background var(--dur-fast) ease;
}

.planner-picker-trigger:hover,
.planner-picker-trigger.is-open {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: var(--primary-soft);
}

.planner-picker-trigger .nav-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  color: var(--primary);
}

/* Icono primero, con su propia pastilla: el disparador se lee como un botón de
   icono (igual que la lupa de Ejercicios) y el nombre del cliente es el
   acompañante, no un campo de formulario. */
.planner-picker-ico {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-left: -3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  transition: background var(--dur-fast) ease;
}

.planner-picker-trigger:hover .planner-picker-ico,
.planner-picker-trigger.is-open .planner-picker-ico {
  background: color-mix(in srgb, var(--primary) 34%, transparent);
}

.planner-picker-ico .nav-ico { width: 14px; height: 14px; }

.planner-picker-caret {
  color: var(--muted) !important;
  width: 13px !important;
  height: 13px !important;
}

.planner-picker-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planner-picker-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-sticky, 20);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(360px, 78vw);
  padding: 12px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 14px;
  background: var(--sys-surface, var(--surface));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  box-sizing: border-box;
  overflow: hidden;
}

.planner-picker-pop[hidden] {
  display: none !important;
  pointer-events: none !important;
}

/* La caja de búsqueda "crece" desde el disparador al abrir: mismo gesto que la
   lupa del catálogo de Ejercicios, para que se lea como buscar y no como un
   formulario que aparece de golpe. */
.planner-picker-pop.is-open { animation: planner-pick-pop var(--dur-fast, 160ms) var(--ease-out, ease-out); }
.planner-picker-pop.is-open .planner-pick-search {
  animation: planner-pick-search-grow 220ms var(--ease-out, ease-out);
  transform-origin: left center;
}

@keyframes planner-pick-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes planner-pick-search-grow {
  from { transform: scaleX(0.35); opacity: 0.2; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .planner-picker-pop.is-open,
  .planner-picker-pop.is-open .planner-pick-search { animation: none; }
}

/* Una sola capa dentro del popover: buscador + lista. Antes el popover
   envolvía un `.fit-field` con su propia etiqueta y su propio borde, así que
   pulsar la píldora "Cliente" abría otra celda "CLIENTE" con otro buscador
   dentro (E2E Emilio: "celdas dentro de celdas"). */
.planner-pick-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 10px;
  box-sizing: border-box;
  align-self: stretch;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 45%, transparent);
  transition:
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.planner-pick-search:focus-within {
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.planner-pick-search .nav-ico {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  color: var(--muted);
}

#tab-planificador .planner-pick-search input,
#tab-comidas .planner-pick-search input,
#tab-recuperacion .planner-pick-search input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
  /* El input es transparente dentro de `.planner-pick-search`: el glow global
     de `input:focus` dibujaba un anillo flotante DESPLAZADO. El foco lo pinta
     solo el wrapper con `:focus-within`. */
  box-shadow: none !important;
}

#tab-planificador .planner-pick-search input:focus,
#tab-comidas .planner-pick-search input:focus,
#tab-recuperacion .planner-pick-search input:focus {
  outline: none;
  border: none;
  box-shadow: none !important;
}

/* Exactamente ~5 filas visibles y el resto con scroll interno: la lista de 100
   clientes ya no se estira hasta el infinito tapando media pantalla (E2E
   Emilio). `--pick-row` es la altura real de una fila (nombre + correo). */
.planner-pick-list {
  --pick-row: 44px;
  --pick-rows: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(var(--pick-row) * var(--pick-rows) + 2px * (var(--pick-rows) - 1));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scroll-padding: 2px 0;
  margin: 0 -4px;
  padding: 0 4px;
}

.planner-pick-list::-webkit-scrollbar { width: 8px; }
.planner-pick-list::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 34%, transparent);
}

/* Pie: "Mostrando 5 de 100 — escribe para filtrar". Sin esto la lista acotada
   parece que el gimnasio solo tiene 5 clientes. */
.planner-pick-meta {
  margin: 2px 2px 0;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  font-size: 0.7rem;
  color: var(--muted);
}

.planner-pick-meta.hidden { display: none; }

/* PU-025 — filtros de etiquetas S085 en pickers Planificador / Nutri / Fisio */
.planner-pick-tag-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 2px 6px;
  max-height: 72px;
  overflow-y: auto;
}
.planner-pick-tag-filters:empty { display: none; }
.planner-pick-tag-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}
.planner-pick-tag-filter-btn.is-on {
  outline: 1px solid color-mix(in srgb, var(--primary, #e65100) 55%, transparent);
  font-weight: 750;
  background: color-mix(in srgb, var(--primary, #e65100) 14%, transparent);
}
.planner-pick-tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.planner-pick-tag-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.planner-pick-tag-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--text);
  background: color-mix(in srgb, var(--sys-surface-2, var(--surface)) 80%, transparent);
  border-left: 3px solid var(--muted);
}

.planner-pick-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 55%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) ease,
    background var(--dur-fast) ease,
    color var(--dur-fast) ease;
}

.planner-pick-filter:hover {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: var(--primary-soft);
  color: var(--primary);
}

.planner-pick-filter[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: var(--primary-soft);
  color: color-mix(in srgb, var(--primary) 82%, white);
}

.planner-pick-group {
  margin: 8px 2px 2px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

#centro-panel-clientes .workspace-toolbar {
  flex-wrap: wrap;
  gap: 8px;
}

#client-coach-filter {
  max-width: 160px;
  min-width: 0;
}

.planner-pick-clear {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  color: var(--text);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}

.planner-pick-clear:hover { background: color-mix(in srgb, var(--primary) 32%, transparent); }
.planner-pick-clear.hidden { display: none; }

.planner-pick-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition:
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}

.planner-pick-option:hover,
.planner-pick-option.is-cursor {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
}

.planner-pick-option.is-selected { background: var(--primary-soft); }

.planner-pick-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }

.planner-pick-main {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.planner-pick-sub {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Punto = el plan que el cliente ve hoy en la app. */
.planner-pick-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--primary);
}

.planner-pick-check {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  color: var(--primary);
}

.planner-pick-empty {
  margin: 6px 2px;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Campo premium: etiqueta Syne pequeña + control con icono, en vez del
   select nativo pelado que tenía el planificador. */
.fit-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.fit-field-label {
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 2px;
}

.fit-field-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 82%, transparent);
  transition:
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.fit-field-control:focus-within {
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.fit-field-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  color: var(--muted);
}

#tab-planificador .planner-picker-pop .fit-field-control input,
#tab-planificador .planner-picker-pop .fit-field-control select,
#tab-planificador .fit-field-control input,
#tab-planificador .fit-field-control select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 500;
  outline: none;
}

#tab-planificador .fit-field-select select {
  appearance: none;
  padding-right: 18px;
  cursor: pointer;
}

#tab-planificador .fit-field-control select option {
  background: var(--sys-surface, var(--surface));
  color: var(--text);
}

.fit-field-caret {
  position: absolute;
  right: 10px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  color: var(--muted);
}

#tab-planificador .planner-client-label {
  margin: 2px 0 0 2px;
  font-size: 0.75rem;
}

/* Cabecera de plan: aquí viven las acciones contextuales (editar, duplicar
   semana, borrar) — ya no hay botón de editar suelto en la barra. */
.planner-plan-header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "id actions"
    "bar bar"
    "warn warn";
  align-items: center;
  gap: 6px 14px;
  padding: 9px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 60%),
    color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, transparent);
}

.planner-plan-id { grid-area: id; min-width: 0; }

.planner-plan-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.planner-plan-title-row h3 {
  margin: 0;
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.28;
}

.planner-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  margin: 0;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  cursor: default;
}

.planner-plan-badge:disabled,
.planner-plan-badge[aria-disabled="true"] {
  opacity: 1;
  cursor: default;
}

.planner-plan-badge-check {
  width: 11px;
  height: 11px;
  stroke-width: 2.2;
}

.planner-plan-badge.is-activo {
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  color: color-mix(in srgb, var(--primary) 78%, white);
}

.planner-plan-badge.is-activar {
  height: 22px;
  cursor: pointer;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 38%, transparent);
  color: color-mix(in srgb, var(--primary) 82%, white);
  transition:
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
    background 160ms cubic-bezier(0.23, 1, 0.32, 1),
    border-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .planner-plan-badge.is-activar:hover:not(:disabled) {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  }
}

.planner-plan-badge.is-activar:active:not(:disabled) {
  transform: scale(0.97);
}

.planner-plan-badge.is-activar:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.planner-plan-badge.is-programado {
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  color: color-mix(in srgb, var(--ok) 80%, white);
}

.planner-plan-badge.is-finalizado {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  border-color: var(--hairline, var(--border));
  color: var(--muted);
}

.planner-plan-badge.is-solapado {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
  color: color-mix(in srgb, var(--warn) 85%, white);
}

.planner-plan-id .hint { margin: 2px 0 0; font-size: 0.74rem; }

.planner-plan-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.planner-plan-actions .ex-tool-chip.danger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--err) 55%, transparent);
  color: color-mix(in srgb, var(--err) 88%, white);
  background: color-mix(in srgb, var(--err) 10%, transparent);
}

.planner-plan-progress {
  grid-area: bar;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 20%, transparent);
  overflow: hidden;
}

.planner-plan-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 55%, var(--ok)));
  transition: width var(--dur-base) var(--ease-out);
}

.planner-warn {
  grid-area: warn;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: color-mix(in srgb, var(--warn) 88%, white);
  font-size: 0.76rem;
}

/* Banner de deload (antes panel plegado al fondo que nadie abría) */
.planner-deload-banner {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

.planner-deload-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 38%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}

.planner-deload-ico .nav-ico {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  color: color-mix(in srgb, var(--warn) 85%, white);
}

.planner-deload-text { flex: 1 1 auto; min-width: 0; }
.planner-deload-text strong { font-size: 0.84rem; }

.planner-deload-count {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 20%, transparent);
  font-size: 0.66rem;
  font-weight: 700;
}

.planner-deload-text .hint { margin: 2px 0 0; font-size: 0.74rem; }

.planner-deload-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Pestañas del módulo: Planes vs Biblioteca de sesiones (PL-UI-49) ───
   Son dos pantallas distintas, no dos vistas del mismo plan: la biblioteca se
   edita sin cliente ni plan abierto. */

.planner-tabs {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 2px;
  margin-bottom: 8px;
  padding: 2px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
}

.planner-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 11px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  pointer-events: auto;
  touch-action: manipulation;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.planner-tab .nav-ico { width: 16px; height: 16px; }

.planner-tab:hover { color: var(--text); }

.planner-tab.is-active {
  background: var(--primary-soft);
  color: color-mix(in srgb, var(--primary) 82%, white);
}

.planner-tab-count {
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  font-size: 0.7rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  #tab-planificador .planner-panel-head {
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  #tab-planificador .planner-panel-head::-webkit-scrollbar { display: none; }
  #tab-planificador .planner-tabs {
    flex: 0 0 auto;
    margin-bottom: 0;
  }
  #tab-planificador .planner-panel-head .planner-contextbar {
    flex: 0 0 auto;
    gap: 6px;
    margin-bottom: 0;
  }
  #tab-planificador .planner-picker {
    flex: 0 0 auto;
  }
  #tab-planificador .planner-picker-trigger {
    width: auto;
    max-width: 132px;
    height: 32px;
    padding: 0 8px 0 6px;
    gap: 5px;
  }
  #tab-planificador .planner-picker-caret { display: none; }
  #tab-planificador .planner-tab {
    padding: 5px 8px;
    gap: 4px;
  }
  #tab-planificador #plan-refresh {
    position: sticky;
    right: 0;
    z-index: 3;
    margin-bottom: 0;
    background: var(--sys-bg, var(--bg));
    box-shadow: -10px 0 12px -4px var(--sys-bg, var(--bg));
  }
}

/* Phone (~390–560px): chips de contexto = solo icono. Sin texto cortado. */
@media (max-width: 560px) {
  #tab-planificador .planner-panel-head {
    position: relative;
    overflow: visible;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  #tab-planificador .planner-tabs {
    overflow: visible;
    padding: 2px;
    gap: 2px;
  }
  #tab-planificador .planner-tab {
    position: relative;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  #tab-planificador .planner-tab-label {
    display: none;
  }
  #tab-planificador .planner-tab-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    line-height: 16px;
    font-size: 0.58rem;
    text-align: center;
  }
  #tab-planificador .planner-panel-head .planner-contextbar {
    flex: 0 0 auto;
    gap: 8px;
    margin-left: auto;
  }
  #tab-planificador .planner-picker-trigger {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 10px;
    gap: 0;
  }
  #tab-planificador .planner-picker-value,
  #tab-planificador .planner-picker-caret {
    display: none;
  }
  #tab-planificador .planner-picker-ico {
    margin: 0;
    width: 22px;
    height: 22px;
  }
  #tab-planificador #plan-refresh {
    width: 36px;
    min-width: 36px;
    height: 36px;
    position: static;
    box-shadow: none;
    flex-shrink: 0;
    margin-left: 0;
  }
  #tab-planificador.is-library #plan-refresh {
    margin-left: auto;
  }
  #tab-planificador .planner-tabs,
  #tab-planificador .planner-picker {
    flex-shrink: 0;
  }
  #tab-planificador .planner-picker {
    position: static;
  }
  #tab-planificador .planner-picker-pop {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
}

/* La pestaña activa decide qué se ve. Los diálogos siguen colgando del panel,
   así que no se tocan: solo se ocultan los bloques de la pantalla de planes. */
#planner-pane-biblioteca { display: none; }

#tab-planificador.is-library #planner-pane-biblioteca {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
}

#tab-planificador.is-library .planner-contextbar,
#tab-planificador.is-library #planner-plan-header,
#tab-planificador.is-library #planner-deload-banner,
#tab-planificador.is-library #planner-viewswitch,
#tab-planificador.is-library #planner-view-sesiones,
#tab-planificador.is-library #planner-view-calendario,
#tab-planificador.is-library #plan-error {
  display: none !important;
}

/* FAB SIEMPRE visible en Biblioteca y Planes. Nunca meter #planner-fab-wrap
   en la lista de display:none de arriba: el hueco lo da el padding de
   .libpane-items, no ocultando el flotante.
   pointer-events none en el wrap: un flex item abspos con align-self:stretch
   puede volverse una capa full-width (o full-pane) que se traga clics de
   lista/búsqueda/pestañas; el botón y las acciones reactivan eventos. */
#tab-planificador.is-library #planner-fab-wrap,
#tab-planificador #planner-fab-wrap {
  display: flex !important;
  visibility: visible !important;
  align-self: flex-end;
  width: max-content;
  height: max-content;
  max-width: none;
  max-height: none;
  top: unset;
  left: unset;
  right: 18px;
  bottom: 18px;
  pointer-events: none;
  z-index: 50;
}
#tab-planificador #planner-fab-wrap > .planner-fab,
#tab-planificador #planner-fab-wrap > .planner-fab-actions:not([hidden]) {
  pointer-events: auto;
}

/* ── Biblioteca a pantalla completa: lista + editor ─────────────────────── */

.planner-libpane {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}
.planner-libpane > .libpane-side {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  z-index: 2;
}
.planner-libpane > .libpane-main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  z-index: 1;
}

.libpane-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding-right: 14px;
  border-right: 1px solid var(--hairline, var(--border));
}

.libpane-side-head {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.libpane-kind-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  gap: 0;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
}

.libpane-kind {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  text-align: center;
  transition: background 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms ease;
}

.libpane-kind:active {
  transform: scale(0.97);
}

.libpane-kind.is-on {
  background: color-mix(in srgb, var(--primary) 16%, var(--sys-surface, var(--surface)));
  color: var(--text);
}

.libpane-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, transparent);
}

.libpane-search .nav-ico {
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
  flex-shrink: 0;
}

.libpane-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  outline: none;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.libpane-count { margin: 0; font-size: 0.74rem; }

.planner-plan-clone {
  flex: 0 0 auto;
  opacity: 0.72;
}

.planner-plan-clone:hover {
  opacity: 1;
  color: var(--primary);
}

.libpane-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.libpane-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  z-index: 1;
  pointer-events: auto;
  touch-action: manipulation;
  transition:
    border-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
    background 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.libpane-card:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--sys-surface-2, var(--surface-2)) 70%, transparent);
}

.libpane-card.is-active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--sys-surface, var(--surface)));
}

.libpane-card-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.libpane-card-name {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.libpane-card-meta {
  font-size: 0.72rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.libpane-card-go {
  display: none;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0.55;
}

.libpane-card.is-active .libpane-card-go {
  color: var(--primary);
  opacity: 0.9;
}

.libpane-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.libpane-placeholder {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.libpane-placeholder.hidden { display: none; }

.libpane-placeholder .empty-block {
  border: none;
  background: transparent;
  padding: 12px 20px;
}

.libpane-placeholder .empty-block h4 {
  color: var(--muted);
  font-weight: 650;
  font-size: 1.02rem;
}

.libpane-placeholder .empty-block p { display: none; }

.libpane-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  flex: 1 1 auto;
}

.libpane-editor.hidden { display: none; }

.libpane-back { display: none; }

.libpane-editor-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline, var(--border));
}

.libpane-editor-head .ex-tool-chip-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
}

.libpane-editor-head .ex-tool-chip-icon:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}

.libpane-editor-head .ex-tool-chip-icon:active:not(:disabled) {
  transform: scale(0.97);
}

.libpane-editor-head .ex-tool-chip-icon.danger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--err) 50%, var(--border));
  color: var(--err);
  background: color-mix(in srgb, var(--err) 10%, transparent);
}

/* Título inline: lectura = h3 + lápiz; edición = input + ✓/✕. Nunca los 3. */
.libpane-title-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1 1 180px;
  justify-content: flex-start;
}

.libpane-title-row h3 {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(420px, calc(100% - 36px));
  font-family: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0;
  font-stretch: normal;
  transform: none;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.libpane-title-row .icon-mini { flex: 0 0 auto; }

.libpane-title-row.is-renaming h3 { display: none; }

.libpane-name-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: 18rem;
  margin: 0;
  padding: 2px 0;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 55%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  font-family: inherit;
  letter-spacing: 0;
  font-stretch: normal;
}

.libpane-name-input:focus {
  outline: none;
  border-bottom-color: var(--primary);
}

.libpane-items {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Hueco para el FAB (+) abajo-derecha: no tapa la última fila. */
  padding-right: 88px;
  padding-bottom: 96px;
}

.libpane-plan-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1 1 auto;
}

.libpane-plan-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.libpane-plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  cursor: help;
}

.libpane-plan-chip input {
  width: 3.1rem;
  min-width: 0;
  padding: 2px 4px;
  border: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 55%, transparent);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: center;
}

.libpane-plan-edit .planner-form-grid,
.libpane-plan-meta {
  max-width: none;
  gap: 8px;
}

.libpane-plan-sessions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

.libpane-plan-sessions-head {
  display: none;
}

.libpane-plan-session {
  cursor: grab;
  padding: 8px 10px;
  gap: 8px;
}

.libpane-plan-session:active {
  cursor: grabbing;
}

.libpane-plan-handle {
  flex: 0 0 auto;
  color: var(--muted);
}

.libpane-plan-idx {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 750;
}

.libpane-plan-session .saved-item-move {
  flex: 0 0 auto;
}

.libpane-editor-head .ex-tool-chip-icon,
.lib-ex-detail-actions .icon-mini {
  cursor: help;
}

.libpane-plan-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 0;
  border: none;
  border-radius: 0;
}

.libpane-plan-picker.hidden,
.libpane-plan-picker[hidden] {
  display: none !important;
}

.plan-assign-mode.hidden,
#plan-assign-create-block.hidden,
#plan-assign-start-wrap.hidden,
#plan-assign-replace-start-wrap.hidden {
  display: none !important;
}

.plan-assign-card {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  gap: 8px;
  min-inline-size: 0;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 55%, transparent);
}

.plan-assign-card h4,
.plan-assign-card legend {
  padding: 0;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--text);
}

.plan-assign-card > .hint,
.plan-assign-names {
  margin: 0;
}

.plan-assign-names {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--muted);
}

.plan-assign-names:empty {
  display: none;
}

.plan-assign-card strong {
  font-weight: 750;
  color: var(--text);
}

#plan-assign-replace-start-wrap {
  margin-inline-start: 26px;
}

/* Acciones de fila en Biblioteca: naranja del portal, no gris. Papelera roja. */
.libpane-items .icon-mini:not(.danger) {
  color: var(--primary);
}

.libpane-items .icon-mini:not(.danger):hover:not(:disabled) {
  color: color-mix(in srgb, var(--primary) 72%, white);
  border-color: color-mix(in srgb, var(--primary) 42%, transparent);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  transform: scale(1.08);
}

.libpane-items .icon-mini {
  transition:
    color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    background var(--dur-fast) ease,
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.libpane-items .icon-mini:active:not(:disabled) {
  transform: scale(0.97);
}

.saved-item-move {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: grab;
}

.saved-item-move:active {
  cursor: grabbing;
}

.saved-item-handle {
  margin-bottom: 2px;
}

/* Si el menú FAB está abierto en Biblioteca, súbelo para no tapar filas. */
#tab-planificador.is-library .planner-fab-wrap:has(.planner-fab.is-open) {
  bottom: 72px;
}

@media (max-width: 900px) {
  .planner-libpane {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    max-width: 100%;
  }
  .planner-libpane > .libpane-side {
    grid-column: 1;
    grid-row: 1;
    z-index: 3;
  }
  .planner-libpane > .libpane-main {
    grid-column: 1;
    grid-row: 2;
    z-index: 1;
  }
  /* Sin sesión: no pintar el placeholder encima de la lista (tragaba taps). */
  .planner-libpane:not(.has-editor) > .libpane-main {
    display: none;
    pointer-events: none;
  }
  .planner-libpane:not(.has-editor) {
    grid-template-rows: minmax(0, 1fr);
  }
  /* Con sesión: master-detail — la lista cede el viewport al editor. */
  .planner-libpane.has-editor > .libpane-side {
    display: none;
  }
  .planner-libpane.has-editor > .libpane-main {
    display: flex;
    grid-row: 1;
    min-height: 0;
    pointer-events: auto;
    z-index: 4;
  }
  .planner-libpane.has-editor {
    grid-template-rows: minmax(0, 1fr);
  }
  /* Nunca el overview de tarjetas de 4 campos: sesión → detalle de ejercicio. */
  .planner-libpane.has-editor:not(.has-ex-detail) > .libpane-side {
    display: flex;
  }
  .planner-libpane.has-editor:not(.has-ex-detail) > .libpane-main {
    display: none !important;
    pointer-events: none;
  }
  .libpane-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }
  .libpane-back .nav-ico {
    width: 22px;
    height: 22px;
    transform: rotate(90deg);
  }
  .libpane-side {
    padding-right: 0;
    border-right: none;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hairline, var(--border));
    min-width: 0;
    max-width: 100%;
  }
  .libpane-list { max-height: none; flex: 1 1 auto; }
  .planner-libpane.has-editor .libpane-list { max-height: 22vh; }
  .libpane-editor-head {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--sys-bg, var(--bg));
  }
  .libpane-editor-head .toolbar-spacer { display: none; }
  .libpane-card-go { display: block; }
}

/* Phone (~390–412px): Biblioteca must not create page-level horizontal scroll.
   Desktop grid (5 metric columns + FAB gutter) stays as-is above this breakpoint. */
@media (max-width: 560px) {
  #tab-planificador.is-library,
  #tab-planificador.is-library #planner-pane-biblioteca,
  #tab-planificador .planner-libpane {
    overflow-x: hidden;
    max-width: 100%;
    min-width: 0;
  }

  #tab-planificador .planner-libpane,
  #tab-planificador .libpane-side,
  #tab-planificador .libpane-main,
  #tab-planificador .libpane-editor,
  #tab-planificador .libpane-items,
  #tab-planificador .libpane-search,
  #tab-planificador .libpane-card,
  #tab-planificador .libpane-editor-head,
  #tab-planificador .lib-circuit,
  #tab-planificador .saved-item,
  #tab-planificador .saved-item-head,
  #tab-planificador .saved-item-fields {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #tab-planificador .libpane-search {
    width: 100%;
  }

  #tab-planificador .libpane-search input {
    width: 100%;
    min-width: 0;
  }

  #tab-planificador .libpane-card-name,
  #tab-planificador .libpane-card-meta {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
  }

  #tab-planificador .libpane-editor-head {
    gap: 6px;
  }

  #tab-planificador .libpane-title-row {
    flex: 1 1 100%;
  }

  #tab-planificador .libpane-title-row h3 {
    max-width: calc(100% - 36px);
    white-space: normal;
  }

  #tab-planificador .libpane-editor-head .ex-tool-chip {
    flex-shrink: 0;
  }

  #tab-planificador .libpane-items {
    padding-right: 0;
    padding-bottom: calc(96px + var(--fit-safe-bottom) + var(--vv-bottom-inset, 0px));
    gap: 14px;
  }

  #tab-planificador .libpane-items .lib-rest-after {
    margin: -6px 4px;
    gap: 8px;
  }

  #tab-planificador .libpane-items .lib-circuit {
    gap: 12px;
    padding: 10px 8px 12px;
  }

  #tab-planificador .libpane-items .lib-circuit .lib-rest-after {
    margin: 0 4px;
  }

  #tab-planificador .libpane-items .lib-rest-after-field {
    min-width: 0;
    flex: 1 1 auto;
    max-width: 16rem;
  }

  #tab-planificador .libpane-items .saved-item {
    width: 100%;
    padding: 0;
    overflow: hidden;
  }

  #tab-planificador .libpane-items .saved-item-media {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    max-height: 220px;
    border-radius: 12px 12px 0 0;
  }

  #tab-planificador .libpane-items .saved-item-media .block-thumb-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    max-height: none;
    border-radius: 12px 12px 0 0;
  }

  #tab-planificador .libpane-items .saved-item-body {
    padding: 12px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #tab-planificador .libpane-items .saved-item-head {
    flex: 0 0 auto;
    align-items: flex-start;
  }

  #tab-planificador .saved-item-main h4 {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: unset;
    font-size: 1.08rem;
    font-family: inherit;
    letter-spacing: 0;
    font-stretch: normal;
  }

  #tab-planificador .libpane-items .block-thumb-wrap {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
  }

  /* Name full width; rx chips wrap 2-up. SECCIÓN spans the row. */
  #tab-planificador .libpane-items .saved-item-fields,
  #tab-planificador .block-row-fields,
  .planner-detail-body .block-row-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    width: 100%;
    flex: none;
  }

  #tab-planificador .libpane-items .saved-item.is-collapsed .saved-item-fields {
    display: none;
  }

  #tab-planificador .libpane-items .saved-item-fields > label,
  #tab-planificador .libpane-items .saved-item-num,
  #tab-planificador .libpane-items .planner-rx-field {
    min-width: 0;
    width: 100%;
  }

  #tab-planificador .libpane-items .saved-item-fields input,
  #tab-planificador .libpane-items .saved-item-fields select,
  #tab-planificador .libpane-items .saved-item-num input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #tab-planificador .libpane-items .saved-item-fields > label:has([data-saved-field="seccion"]),
  #tab-planificador .libpane-items .saved-item-fields select[data-saved-field="seccion"],
  #tab-planificador .block-row-fields > label:has(.block-seccion),
  .planner-detail-body .block-row-fields > label:has(.block-seccion) {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  /* FAB: fixed chip only — NEVER a full-screen hit layer.
     `inset` shorthand sets top:auto; on iOS that becomes top:0 and the wrap
     stretches from the navbar to the home indicator, eating every touch. */
  #tab-planificador.is-library #planner-fab-wrap,
  #tab-planificador #planner-fab-wrap,
  #tab-planificador.is-library.has-ex-detail #planner-fab-wrap {
    position: fixed;
    z-index: 80;
    inset: unset;
    top: unset;
    left: unset;
    right: 16px;
    bottom: calc(20px + var(--fit-safe-bottom) + var(--vv-bottom-inset, 0px));
    width: fit-content;
    height: fit-content;
    max-width: none;
    max-height: none;
    pointer-events: none;
  }

  #tab-planificador.is-library:not(.has-ex-detail) #planner-fab-wrap:has(.planner-fab.is-open) {
    bottom: calc(72px + var(--fit-safe-bottom) + var(--vv-bottom-inset, 0px));
  }

  #tab-planificador.has-ex-detail #planner-pane-biblioteca,
  #tab-planificador.has-ex-detail #lib-ex-detail {
    min-height: 0;
    max-height: 100%;
    height: 100%;
  }

  .lib-ex-detail-dock {
    display: none !important;
    position: static;
    inset: unset;
    height: 0;
    padding: 0;
    border: none;
    background: none;
    pointer-events: none;
    visibility: hidden;
  }

  .lib-ex-detail-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--vv-bottom-inset, 0px));
  }

  .lib-ex-detail-next-wrap {
    padding-bottom: 8px;
  }
}

/* ── Biblioteca: detalle de ejercicio en teléfono (calca mobile-detalle) ── */

.lib-ex-detail {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  z-index: 8;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
  background: var(--sys-bg, var(--bg));
  pointer-events: auto;
}

.lib-ex-detail.hidden,
.lib-ex-detail[hidden],
#lib-ex-detail[hidden],
#lib-ex-detail[aria-hidden="true"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  inset: unset !important;
  z-index: 0;
}

#tab-planificador.has-ex-detail > .planner-panel-head {
  display: none;
}

#tab-planificador.has-ex-detail #planner-pane-biblioteca {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
}

#tab-planificador.has-ex-detail .libpane-side,
#tab-planificador.has-ex-detail .libpane-main {
  display: none !important;
  pointer-events: none !important;
}

#tab-planificador.has-ex-detail #lib-ex-detail {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  pointer-events: auto;
  z-index: 8;
  overflow: hidden;
}

@media (max-width: 560px) {
  .saved-item-move { display: none; }
}

.lib-ex-detail-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 6px 6px 6px 4px;
  min-width: 0;
  background: var(--sys-bg, var(--bg));
}

.lib-ex-detail-back {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.lib-ex-detail-back .nav-ico {
  width: 22px;
  height: 22px;
  transform: rotate(90deg);
}

.lib-ex-detail-titles {
  flex: 1 1 0;
  min-width: 0;
}

.lib-ex-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 56%;
}

.lib-ex-detail-actions .icon-mini {
  width: 36px;
  height: 36px;
  min-width: 32px;
  flex: 0 0 auto;
}

.lib-ex-detail-actions .icon-mini .nav-ico {
  width: 18px;
  height: 18px;
}

@media (max-width: 380px) {
  .lib-ex-detail-actions {
    max-width: 58%;
    gap: 0;
  }

  .lib-ex-detail-actions .icon-mini {
    width: 32px;
    height: 32px;
    min-width: 30px;
  }
}

.lib-ex-detail-titles h2 {
  margin: 0;
  font-family: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0;
  font-stretch: normal;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lib-ex-detail-titles p {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.lib-ex-detail-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 0 12px calc(72px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lib-ex-detail-hero {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
}

.lib-ex-detail-hero-media,
.lib-ex-detail-hero-media .block-thumb,
.lib-ex-detail-hero-media .exercise-thumb-fallback {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}

.lib-ex-detail-play {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 5px 10px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.68);
  color: #fff;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
}

.lib-ex-detail-play.is-locked {
  pointer-events: none;
}

.lib-ex-detail-play .nav-ico {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.lib-ex-detail-name {
  margin: 2px 0 0;
  font-family: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0;
  font-stretch: normal;
  line-height: 1.2;
}

.lib-ex-detail-rx {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lib-ex-detail-rx-line {
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: 0;
  color: var(--primary);
}

.lib-ex-detail-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sys-surface-2, var(--surface-2)) 80%, transparent);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
}

.lib-ex-detail-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 2px;
}

.lib-ex-detail-fields > label,
.lib-ex-detail-fields .saved-item-num,
.lib-ex-detail-fields .planner-rx-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 6px 10px;
  font-size: 0.58rem;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, var(--sys-surface-2, var(--surface-2)));
}

.lib-ex-detail-fields input,
.lib-ex-detail-fields select,
.lib-ex-detail-fields .rest-combo input {
  width: 100%;
  min-width: 0;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  border: none;
  background: transparent;
  color: var(--text);
}

.lib-ex-detail-fields > label:has([data-saved-field="seccion"]) {
  grid-column: 1 / -1;
}

.lib-ex-detail-next-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 12px 6px;
}

.lib-ex-detail-next-label {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.lib-ex-detail-next {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 80%, transparent);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lib-ex-detail-next:active {
  transform: scale(0.98);
}

.lib-ex-detail-next-thumb,
.lib-ex-detail-next-thumb .block-thumb,
.lib-ex-detail-next-thumb .exercise-thumb-fallback {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  overflow: hidden;
}

.lib-ex-detail-next-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lib-ex-detail-next-copy strong {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lib-ex-detail-next-copy span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
}

.lib-ex-detail-next-go {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
  color: var(--muted);
}

.lib-ex-detail-dock {
  display: none !important;
  position: static;
  inset: unset;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  pointer-events: none;
  visibility: hidden;
}


@media (min-width: 561px) {
  .lib-ex-detail {
    display: none !important;
  }
}

/* ── Vista primaria: sesiones con nombre ────────────────────────────────
   El coach ve una lista de sesiones («Tren superior · Lun Mié Vie»), no tres
   columnas de día a pantalla completa. Solo una tarjeta se despliega a la vez,
   que es lo que quita el scroll interminable. */

.planner-viewswitch {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 2px;
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 2px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
}

.planner-viewswitch-btn {
  margin: 0;
  padding: 5px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  transition:
    background var(--dur-fast) ease,
    color var(--dur-fast) ease;
}

.planner-viewswitch-btn.is-active {
  background: var(--primary-soft);
  color: color-mix(in srgb, var(--primary) 82%, white);
}

/* Cada vista es la región con scroll del tab: el cromo de arriba es fijo. */
#tab-planificador .planner-view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#tab-planificador .planner-view[hidden] { display: none; }

.planner-sessions-bar,
.planner-calendar-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.planner-sessions-bar .toolbar-spacer { flex: 1 1 auto; min-width: 8px; }

.planner-sessions-count { margin: 0; font-size: 0.76rem; }

.planner-sessions-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 1px 4px 12px 0;
}

#tab-planificador .planner-view--metrics {
  overflow: hidden;
  padding: 0;
  min-height: 0;
}

.planner-metrics {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.planner-metrics.is-empty {
  align-items: center;
  justify-content: center;
  min-height: 180px;
}

.planner-metrics.is-empty .empty-block {
  max-width: 28rem;
  pointer-events: auto;
}

.planner-metrics.is-empty .empty-block p {
  display: block;
  color: var(--muted);
}

.planner-progress {
  --pp-ease: cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding: 16px 16px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 42%),
    color-mix(in srgb, var(--sys-surface, var(--surface)) 94%, #000 6%);
  box-shadow: 0 0 28px -10px color-mix(in srgb, var(--primary) 38%, transparent);
  overflow: visible;
}

.planner-progress::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 6%,
    color-mix(in srgb, var(--primary) 70%, transparent) 38%,
    transparent 96%
  );
  pointer-events: none;
}

.planner-progress {
  position: relative;
}

.planner-progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.planner-progress-head-copy {
  min-width: 0;
}

.planner-progress-head h4 {
  margin: 0;
  min-width: 0;
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.28;
  text-wrap: balance;
  color: var(--text);
}

.planner-progress-chip {
  flex: 0 0 auto;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--muted) 28%, transparent);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 20px;
  white-space: nowrap;
}

.planner-progress-chip b { font-weight: 750; color: var(--text); }
.planner-progress-chip-of { color: var(--muted); }

.planner-progress-lead,
.planner-progress-hero-lead {
  margin: 6px 0 0;
  max-width: 42ch;
  font-size: 0.86rem;
  font-weight: 550;
  line-height: 1.35;
  color: var(--text);
  text-wrap: pretty;
}

.planner-progress-hero-lead,
.planner-progress-spark.is-desktop,
.pp-mod-rpe,
.pp-mod-load,
.pp-volbars--weeks,
.pp-last-chev,
.pp-mod-last,
.pp-mod-vol .pp-mod-head,
.pp-mod-vol .pp-mod-sub,
.planner-progress-week-copy .is-full,
.planner-progress-chip-of {
  display: none;
}

.planner-progress-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
  justify-items: center;
  min-width: 0;
}

.planner-progress-col { min-width: 0; width: 100%; }

.planner-progress-col.is-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.planner-progress-hero-week {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.72rem;
  font-weight: 550;
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
}
.planner-progress-hero-week strong {
  font-size: 0.82rem;
  font-weight: 750;
  color: var(--text);
}
.planner-progress-hero-week span {
  font-size: 0.7rem;
}

.planner-progress-spark-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 4px;
  position: relative;
  z-index: 3;
}
.planner-progress-spark-head p {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--text);
}

.pp-chart-cap {
  margin: 0 0 6px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--text);
}

.planner-progress-col.is-stack {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.planner-progress-hero {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 50%;
}
.planner-progress-hero:active { transform: scale(0.97); }

.planner-progress-ring-wrap {
  position: relative;
  width: 112px;
  height: 112px;
  flex: 0 0 auto;
  display: block;
}

.planner-progress-ring {
  width: 112px;
  height: 112px;
  transform: rotate(-90deg);
  overflow: visible;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--primary) 55%, transparent));
}

.planner-progress-ring-track,
.planner-progress-ring-fill {
  fill: none;
  stroke-width: 9.5;
}

.planner-progress-ring-track {
  stroke: color-mix(in srgb, var(--muted) 22%, transparent);
}

.planner-progress-ring-fill {
  stroke: var(--primary);
  stroke-linecap: round;
}

.planner-progress-ring-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.planner-progress-pct {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0;
  line-height: 0.85;
  color: var(--text);
}

.planner-progress-pct strong {
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  font-size: 1.48rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.planner-progress-pct span {
  margin-top: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text);
}

.planner-progress-pct-k {
  margin-top: 2px;
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--text) 62%, var(--muted));
}

.planner-progress-spark {
  min-width: 0;
  position: relative;
  cursor: pointer;
}

.pp-chart {
  position: relative;
  min-width: 0;
}
.pp-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.pp-chart.is-spark svg { height: 108px; }
.pp-chart.is-desktop svg { height: 132px; }
.pp-chart.is-sheet svg { height: 176px; }
.pp-chart.is-rpe svg { height: 120px; }

.pp-grid {
  stroke: color-mix(in srgb, var(--muted) 16%, transparent);
  stroke-width: 1;
}
.pp-axis {
  fill: color-mix(in srgb, var(--text) 55%, var(--muted));
  font-size: 9px;
  text-anchor: end;
}
.pp-x {
  fill: color-mix(in srgb, var(--text) 48%, var(--muted));
  font-size: 10px;
  font-weight: 650;
  text-anchor: middle;
}
.pp-x.is-now { fill: var(--primary); }
.pp-area { opacity: 0.9; }
.pp-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pp-line.is-thin { stroke-width: 1.8; stroke: color-mix(in srgb, var(--text) 88%, white); }
.pp-dot {
  fill: var(--primary);
  stroke: color-mix(in srgb, var(--bg) 40%, #000);
  stroke-width: 1;
}
.pp-dot.is-now {
  fill: #fff;
  stroke: var(--primary);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px var(--primary));
}
.pp-cursor {
  stroke: color-mix(in srgb, var(--text) 55%, transparent);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
  pointer-events: none;
}
.pp-hit {
  fill: transparent;
  cursor: pointer;
}
.pp-empty {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--text);
}

.pp-tip {
  position: absolute;
  top: auto;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg) 88%, #000);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent);
}
.pp-tip.is-sheet {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: normal;
  min-width: 132px;
  max-width: 180px;
}
.pp-tip.is-sheet strong {
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 750;
}
.pp-tip.is-sheet span { color: var(--text); font-weight: 550; }

.pp-mod { min-width: 0; }
.pp-mod-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 70%, var(--muted));
}
.pp-mod-head strong,
.pp-mod-head .pp-mod-val {
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.018em;
  text-transform: none;
  color: var(--text);
  line-height: 1.22;
}
.pp-mod-sub {
  margin: 2px 0 8px;
  font-size: 0.72rem;
  color: var(--text);
}

.pp-volbars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-height: 64px;
}
.pp-volbars.pp-volbars--weeks { display: none; }
.pp-volbars.is-empty {
  min-height: 36px;
  align-items: center;
  color: var(--text);
  font-size: 0.78rem;
}
.pp-vbar {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.pp-vbar span {
  font-size: 0.62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.pp-vbar i {
  display: block;
  width: 100%;
  max-width: 18px;
  height: var(--h, 8%);
  border-radius: 5px 5px 2px 2px;
  background: color-mix(in srgb, var(--primary) 42%, #3a2a1c);
  transform: scaleY(1);
  transform-origin: bottom center;
}
.planner-progress.is-enter .pp-vbar i {
  animation: ppBarGrow 520ms var(--pp-ease) both;
}
.pp-vbar.is-now i {
  background: var(--primary);
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 55%, transparent);
}
.pp-vbar.is-void i { background: color-mix(in srgb, var(--muted) 22%, transparent); }
.pp-vbar:active { transform: scale(0.97); }

.pp-dayvol { width: 100%; min-width: 0; }
.pp-volbars--sessions {
  position: relative;
  min-height: 96px;
  padding-top: 8px;
  background-image:
    linear-gradient(to top, color-mix(in srgb, var(--muted) 22%, transparent) 1px, transparent 1px),
    repeating-linear-gradient(
      to top,
      color-mix(in srgb, var(--muted) 14%, transparent) 0 1px,
      transparent 1px 24px
    );
  background-size: 100% 72px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.pp-volbars--sessions .pp-vbar {
  height: 96px;
  gap: 3px;
}
.pp-volbars--sessions .pp-vbar-val {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.pp-volbars--sessions .pp-vbar-val small {
  font-size: 0.52rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--text) 62%, var(--muted));
}
.pp-volbars--sessions .pp-vbar-dow {
  font-size: 0.58rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--text) 55%, var(--muted));
}

@keyframes ppBarGrow {
  from { transform: scaleY(0.12); }
  to { transform: scaleY(1); }
}

.pp-last {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--muted) 20%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, transparent);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.pp-last.is-empty {
  color: var(--text);
  font-size: 0.8rem;
}
.pp-last:active { transform: scale(0.98); }
.pp-last-ico {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}
.pp-last-ico .nav-ico,
.pp-last .nav-ico {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
}
.pp-last-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pp-last-copy small {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 58%, var(--muted));
}
.pp-last-copy strong {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-last-meta {
  font-size: 0.72rem;
  font-weight: 550;
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
  white-space: nowrap;
}
.pp-last-rpe { display: none; }
.pp-mobile-last .pp-last-copy {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.planner-progress-week {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.planner-progress-week-nav {
  display: none;
}

.planner-progress-week-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  flex: 0 0 auto;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) ease, background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.planner-progress-week-btn::before {
  content: "";
  position: absolute;
  inset: -6px;
}
.planner-progress-week-btn:active:not(:disabled) { transform: scale(0.97); }

.planner-progress-week-copy {
  min-width: 0;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 550;
  color: var(--text);
}
.planner-progress-week-copy span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planner-progress-week-copy em {
  font-style: normal;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
}

.planner-progress-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 1 auto;
  min-width: 0;
}
.planner-progress-dots li {
  flex: 0 0 auto;
}

.planner-progress-dow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 36px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.planner-progress-dow:active { transform: scale(0.96); }

.planner-progress-dow span {
  font-size: 0.62rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--text) 55%, var(--muted));
}

.planner-progress-dot {
  display: block;
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.6px solid color-mix(in srgb, var(--muted) 38%, transparent);
  background: transparent;
}

.planner-progress-dow.is-done .planner-progress-dot {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 70%, transparent);
}
.planner-progress-dow.is-done span { color: var(--text); }
.planner-progress-dow.is-pending .planner-progress-dot {
  border-color: color-mix(in srgb, var(--primary) 62%, transparent);
}
.planner-progress-dow.is-missed .planner-progress-dot {
  border-color: color-mix(in srgb, var(--muted) 55%, transparent);
  background: color-mix(in srgb, var(--muted) 30%, transparent);
}
.planner-progress-dow.is-rest .planner-progress-dot {
  border-color: color-mix(in srgb, var(--muted) 22%, transparent);
}

.pp-gauge { position: relative; width: 100%; max-width: 148px; margin: 0 auto; }
.pp-gauge svg { display: block; width: 100%; overflow: visible; }
.pp-gauge-track {
  fill: none;
  stroke: color-mix(in srgb, var(--muted) 26%, transparent);
  stroke-width: 7;
  stroke-linecap: round;
}
.pp-gauge-fill {
  fill: none;
  stroke: url(#pp-rpe-arc);
  stroke-width: 7;
  stroke-linecap: round;
}
.pp-gauge-tick {
  stroke: color-mix(in srgb, var(--sys-surface, var(--surface)) 82%, #000);
  stroke-width: 3.2;
  stroke-linecap: butt;
}
.pp-gauge-tick.is-major {
  stroke: color-mix(in srgb, var(--sys-bg, var(--bg)) 88%, #000);
  stroke-width: 3.6;
}
.pp-gauge-ticklab {
  fill: color-mix(in srgb, var(--text) 58%, var(--muted));
  font-size: 8px;
  font-weight: 700;
  text-anchor: middle;
}
.pp-gauge-well {
  fill: color-mix(in srgb, var(--sys-bg, var(--bg)) 92%, #000);
  stroke: color-mix(in srgb, var(--text) 28%, transparent);
  stroke-width: 1.4;
}
.pp-gauge-num {
  fill: var(--text);
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-anchor: middle;
}
.pp-gauge-needle line {
  stroke: color-mix(in srgb, var(--text) 88%, white);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.pp-gauge-needle circle { fill: var(--text); }

.pp-load-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 70%, var(--muted));
}
.pp-load-head strong {
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  font-size: 0.96rem;
  font-weight: 650;
  letter-spacing: -0.018em;
  text-transform: none;
  color: var(--text);
}
.pp-load-track {
  height: 6px;
  margin: 6px 0 2px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  overflow: hidden;
}
.pp-load-track i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 50%, transparent);
}
.pp-load p, .pp-load.is-empty {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text);
}

.planner-progress-info {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--text) 55%, var(--muted));
  cursor: pointer;
  position: relative;
  z-index: 4;
}
.planner-progress-info .nav-ico { width: 14px; height: 14px; stroke: currentColor; fill: none; }

dialog.planner-progress-dialog {
  --modal-w: min(640px, calc(100vw - 24px));
  --modal-max-h: min(82svh, 720px);
  --modal-radius: 18px;
  width: min(640px, calc(100vw - 24px));
  height: auto;
  max-height: min(82svh, 720px);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
    0 24px 64px -20px rgba(0, 0, 0, 0.72);
}

.planner-progress-sheet-head { align-items: flex-start; }
.planner-progress-sheet-head h3 {
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}
.planner-progress-sheet-sub {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--text);
}
.planner-progress-sheet-sub b {
  color: var(--primary);
  font-weight: 750;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
}

.planner-progress-sheet-tabs {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 16px 10px;
}
.pp-sheet-tab {
  flex: 1 1 0;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 650;
  cursor: pointer;
}
.pp-sheet-tab.is-on {
  background: var(--primary);
  color: var(--tenant-primary-contrast, #fff);
}
.pp-sheet-tab:active { transform: scale(0.97); }

.pp-sheet-kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--text);
}
.pp-sheet-empty {
  margin: 8px 0;
  font-size: 0.88rem;
  color: var(--text);
}
.pp-volbars--sheet { min-height: 92px; }
.pp-volbars--sheet .pp-vbar { height: 92px; }
.pp-rpe-lab {
  fill: color-mix(in srgb, var(--text) 70%, var(--muted));
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
}
.pp-rpe-lab.is-now { fill: var(--primary); }

.planner-progress-sheet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pp-sheet-last {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--text);
}
.pp-sheet-last .nav-ico {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}
.pp-sheet-last strong { font-weight: 700; }
.pp-sheet-last em { font-style: normal; color: var(--text); }
.planner-progress-sheet-foot .btn-primary {
  flex: 0 0 auto;
  min-width: 88px;
  border-radius: 12px;
}

@media (min-width: 901px) {
  .planner-progress {
    flex: 1 1 auto;
    min-height: 0;
    gap: 8px;
    padding: 10px 16px 8px;
    justify-content: space-between;
    overflow: hidden;
  }
  /* CVEP: card crece; scroll vive en .planner-metrics */
  .planner-progress.is-cvep {
    flex: 0 0 auto;
    overflow: visible;
    justify-content: flex-start;
    padding: 16px 18px 18px;
  }
  .planner-progress-lead { display: none; }
  .planner-progress-hero-lead { display: block; }
  .planner-progress-hero-week { display: flex; }
  .planner-progress-spark-head { display: flex; }
  .planner-progress-spark.is-desktop,
  .pp-mod-rpe,
  .pp-mod-load { display: block; }
  .pp-volbars.pp-volbars--weeks { display: flex; }
  .pp-last-chev { display: none; }
  .pp-mod-last { display: flex; }
  .pp-mod-vol .pp-mod-head { display: flex; }
  .pp-mod-vol .pp-mod-sub { display: none; }
  .planner-progress-chip-of { display: inline; }
  .planner-progress-spark.is-mobile,
  .pp-dayvol,
  .pp-volbars--sessions,
  .pp-mobile-last,
  .planner-progress-week-copy,
  .planner-progress-week-copy .is-compact { display: none; }
  .planner-progress-pct-k { display: none; }
  .planner-progress-stage {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: minmax(132px, 0.68fr) minmax(0, 1.5fr) minmax(248px, 1.12fr);
    gap: 8px 14px;
    align-items: stretch;
    justify-items: stretch;
  }
  .planner-progress-col.is-hero,
  .planner-progress-col.is-spark,
  .planner-progress-col.is-stack {
    grid-column: auto;
    width: auto;
  }
  .planner-progress-col.is-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }
  .planner-progress-hero-lead {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.35;
    max-width: 22ch;
  }
  .planner-progress-hero-week {
    margin: 0;
    min-height: 0;
  }
  .planner-progress-ring-wrap,
  .planner-progress-ring {
    width: 108px;
    height: 108px;
  }
  .planner-progress-pct strong { font-size: 1.42rem; }
  .pp-chart.is-desktop svg { height: 108px; }
  .planner-progress-col.is-stack {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(120px, 0.85fr);
    grid-template-rows: auto auto auto;
    gap: 6px 12px;
    padding-left: 10px;
    border-left: 1px solid color-mix(in srgb, var(--muted) 16%, transparent);
    align-content: start;
  }
  .pp-mod-vol, .pp-mod-rpe, .pp-mod-load, .pp-mod-last {
    padding-bottom: 0;
    border-bottom: none;
  }
  .pp-mod-vol { grid-column: 1; grid-row: 1; }
  .pp-mod-rpe {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  .pp-mod-load { grid-column: 1; grid-row: 2; }
  .pp-mod-last {
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
  }
  .pp-mod-last .pp-last {
    height: auto;
    padding: 7px 10px;
  }
  .pp-mod-last .pp-last-copy {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
  }
  .pp-mod-last .pp-last-copy strong {
    font-weight: 600;
  }
  .pp-gauge { max-width: 120px; margin: 0 auto; }
  .pp-volbars--weeks { min-height: 32px; }
  .pp-volbars--weeks .pp-vbar { height: 32px; }
  .pp-volbars--weeks .pp-vbar i { max-width: 9px; }
  .pp-volbars--weeks .pp-vbar span { display: none; }
  .planner-progress-week {
    flex: 0 0 auto;
    gap: 4px;
    padding: 2px 88px 2px 8px;
  }
  .planner-progress-week-btn {
    z-index: 2;
  }
  .planner-progress-dots { gap: 0; }
  .planner-progress-dow { width: 34px; }
  .planner-metrics {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  /* CVEP: el host scrollea; el card crece con el contenido */
  .planner-metrics:has(.planner-progress.is-cvep) {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    /* Cinta de seguridad si flex no acota (header + plan bar) */
    max-height: calc(100dvh - 11.5rem);
  }
  #tab-planificador .planner-view--metrics {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .planner-progress-ring-fill,
  .pp-vbar i,
  .pp-last,
  .planner-progress-tool,
  .planner-progress-week-btn,
  .planner-progress-dow,
  .pp-sheet-tab,
  .pp-line {
    animation: none !important;
    transition: none;
  }
  .planner-progress.is-enter .pp-vbar i { transform: scaleY(1); }
}

@media (max-width: 900px) {
  dialog.planner-progress-dialog {
    margin: auto 0 0;
    width: 100%;
    max-width: 100%;
    --modal-w: 100%;
    --modal-max-h: min(86svh, 760px);
    max-height: min(86svh, 760px);
    border-radius: 20px 20px 0 0;
  }
  dialog.planner-progress-dialog[open] { transform: none; }
  @starting-style {
    dialog.planner-progress-dialog[open] {
      opacity: 1;
      transform: translateY(18px);
    }
  }
  .planner-progress-sheet-foot {
    flex-wrap: wrap;
  }
  .planner-progress-sheet-foot .btn-primary {
    min-height: 44px;
  }
  .planner-progress-week-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex: 0 0 auto;
  }
  .planner-progress-week {
    padding-right: 72px;
    justify-content: flex-start;
  }
}

/* —— Cómo va este plan v1.1 (dense / mock) —— */
.planner-progress.is-cvep {
  gap: 12px;
  padding: 16px 18px 18px;
  font-size: 13px;
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}
.cvep-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.cvep-head-copy { min-width: 0; }
.cvep-head h4 {
  margin: 0 0 2px;
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.cvep-lead {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.cvep-head-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.cvep-badge-week {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  font-weight: 600;
  font-size: 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
}
.cvep-strip {
  display: grid;
  grid-template-columns: 112px 1.1fr 1fr;
  gap: 10px;
}
.cvep-cell {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.cvep-cell-lab {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.cvep-leg {
  display: flex;
  gap: 8px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
}
.cvep-leg span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}
.cvep-leg .is-done::before { background: var(--primary); }
.cvep-leg .is-plan::before { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.cvep-hero-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
}
.cvep-ring-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.cvep-ring-wrap {
  position: relative;
  width: 84px;
  height: 84px;
  display: block;
}
.cvep-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cvep-ring-pct {
  font-family: "Plus Jakarta Sans", "Syne", var(--fitos-font, sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
}
.cvep-ring-pct strong { font-weight: 700; }
.cvep-ring-pct small {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
}
.cvep-ring-k {
  font-size: 0.62rem;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.cvep-ring-week {
  margin: 6px 0 0;
  text-align: center;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.3;
}
.cvep-ring-week strong {
  color: var(--text);
  display: block;
  font-size: 11px;
}
.cvep-spark-svg { width: 100%; height: 100px; display: block; }
.cvep-spark-svg.is-line { height: 100px; }
.cvep-spark-grid {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.7;
}
.cvep-spark-axis {
  fill: var(--muted);
  font-size: 8px;
  font-family: inherit;
}
.cvep-spark-axis-line { stroke: var(--border); stroke-width: 1; }
.cvep-spark-line {
  stroke: var(--primary);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.cvep-spark-dot {
  fill: var(--bg);
  stroke: var(--primary);
  stroke-width: 2.25;
  cursor: pointer;
}
.cvep-spark-dot.is-sel {
  fill: var(--primary);
  stroke: var(--primary);
  r: 5;
}
.cvep-spark-dot.is-void {
  fill: color-mix(in srgb, var(--muted) 35%, transparent);
  stroke: color-mix(in srgb, var(--muted) 55%, transparent);
  stroke-width: 1.25;
  cursor: pointer;
}
.cvep-spark-bar {
  fill: color-mix(in srgb, var(--muted) 40%, transparent);
  cursor: pointer;
  transition: fill 160ms;
}
.cvep-spark-bar.is-sel { fill: var(--primary); }
.cvep-spark-bar.is-void { fill: color-mix(in srgb, var(--muted) 28%, transparent); }
.cvep-spark-pct,
.cvep-spark-lbl {
  fill: var(--muted);
  font-size: 9px;
  font-family: inherit;
  font-weight: 600;
}
.cvep-spark-pct.is-sel,
.cvep-spark-lbl.is-sel { fill: var(--primary); font-weight: 700; }
.cvep-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cvep-title-row h4 { margin: 0; }
.cvep-date-filter { position: relative; }
.cvep-date-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.cvep-date-btn:hover,
.cvep-date-btn[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--primary) 18%, transparent);
}
.cvep-date-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 8;
  width: min(340px, 86vw);
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 96%, #000 4%);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.55);
  display: none;
}
.cvep-date-pop.is-open { display: grid; gap: 10px; }
.cvep-date-modes {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cvep-date-modes.is-compact {
  display: inline-flex;
}
.cvep-date-mode {
  appearance: none;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 4px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  display: grid;
  gap: 4px;
  justify-items: center;
}
.cvep-date-mode.is-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 9px;
  display: grid;
  place-items: center;
  gap: 0;
}
.cvep-date-ico {
  font-size: 12px;
  line-height: 1;
  opacity: 0.9;
  display: grid;
  place-items: center;
}
.cvep-date-mode.is-active {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}
.cvep-mini-cal {
  display: grid;
  gap: 8px;
}
.cvep-cal-nav {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 4px;
}
.cvep-cal-nav-btn {
  appearance: none;
  width: 32px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.cvep-cal-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.cvep-cal-month {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  background: color-mix(in srgb, var(--bg) 40%, transparent);
}
.cvep-cal-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  text-align: center;
}
.cvep-cal-dow,
.cvep-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.cvep-cal-dow span {
  font-size: 9px;
  color: var(--muted);
  font-weight: 600;
  padding: 2px 0;
}
.cvep-cal-day,
.cvep-cal-empty {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
}
button.cvep-cal-day { cursor: pointer; }
.cvep-cal-day.is-out {
  color: color-mix(in srgb, var(--muted) 45%, transparent);
  font-weight: 500;
}
.cvep-cal-day.is-today { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent); }
.cvep-cal-day.is-on {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
}
.cvep-cal-day.is-edge {
  background: var(--primary);
  color: #fff;
}
.cvep-date-hint { margin: 0; font-size: 10px; color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.cvep-view-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  flex-shrink: 0;
}
.cvep-view-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.cvep-view-tab:hover { color: var(--text); }
.cvep-view-tab.is-active {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
}
.cvep-table-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 8px;
}
.cvep-table-head .cvep-sec-lab { margin: 0; }
.cvep-table-hint {
  margin: 2px 0 0;
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
}
.cvep-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cvep-callouts { display: grid; gap: 5px; }
.cvep-callout {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 2px solid var(--primary);
  font-size: 11.5px;
  line-height: 1.35;
}
.cvep-callout.is-hyp { border-left-color: #f59e0b; }
.cvep-callout.is-rpe { border-left-color: var(--primary); }
.cvep-callout.is-miss { border-left-color: #ef4444; }
.cvep-star { color: #f59e0b; font-weight: 700; flex-shrink: 0; font-size: 11px; }
.cvep-callout strong { font-weight: 600; }
.cvep-dim { color: var(--muted); font-weight: 400; }
.cvep-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.45fr) minmax(110px, 0.75fr);
  gap: 8px;
}
.cvep-metric {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 11px;
}
.cvep-metric-lab {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.cvep-metric-val {
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}
.cvep-metric-val small {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 3px;
}
.cvep-metric-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 4px;
  gap: 6px;
}
.cvep-vol-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
}
.cvep-vol-bars.is-slim {
  width: 72px;
  height: 28px;
  gap: 3px;
  flex: 0 0 auto;
}
.cvep-vol-bars i {
  flex: 1;
  border-radius: 1px;
  display: block;
  background: color-mix(in srgb, #22c55e 50%, transparent);
  min-height: 3px;
}
.cvep-vol-bars.is-slim i {
  flex: 0 0 5px;
  width: 5px;
  max-width: 5px;
  border-radius: 1.5px;
  background: color-mix(in srgb, var(--primary) 70%, transparent);
}
.cvep-vol-bars i.low { background: color-mix(in srgb, #f59e0b 55%, transparent); }
.cvep-vol-bars i.miss { background: color-mix(in srgb, var(--muted) 35%, transparent); }
.cvep-vol-bars.is-slim i.miss { background: color-mix(in srgb, var(--muted) 28%, transparent); }
.cvep-load-arc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
.cvep-load-arc svg { display: block; overflow: visible; }
.cvep-load-track { stroke: color-mix(in srgb, var(--border) 80%, transparent); }
.cvep-load-rainbow { opacity: 0.92; }
.cvep-load-needle-line {
  stroke: color-mix(in srgb, var(--text) 88%, white);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.cvep-load-needle {
  fill: var(--bg);
  stroke: var(--primary);
  stroke-width: 1.75;
}
.cvep-load-arc-lab {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
}
.cvep-load-arc-lab small {
  font-size: 8px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
}
.cvep-metric.is-rpe {
  min-width: 0;
}
.cvep-gauge {
  position: relative;
  height: 6px;
  background: var(--bg);
  border-radius: 99px;
  overflow: hidden;
}
.cvep-gauge-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #22c55e, #f59e0b);
  width: var(--w, 0%);
  max-width: 100%;
  transition: width 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cvep-gauge-fill.is-rpe {
  background: linear-gradient(90deg, #22c55e, var(--primary));
}
.cvep-rpe-track {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  height: 6px;
}
.cvep-rpe-track i {
  border-radius: 1px;
  background: var(--border);
  display: block;
}
.cvep-rpe-track i.on { background: var(--primary); }
.cvep-rpe-track i.soft { background: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.cvep-last-pill {
  appearance: none;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cvep-last-pill .cvep-lab {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cvep-last-pill .cvep-val { font-weight: 600; font-size: 12px; }
.cvep-last-pill .cvep-sub { font-size: 11px; color: var(--primary); }
.cvep-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cvep-filter-wrap { display: none; }
.cvep-btn-icon {
  appearance: none;
  position: relative;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 160ms, color 160ms, background 160ms;
}
.cvep-btn-icon:hover,
.cvep-btn-icon[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.cvep-filter-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}
.cvep-filter-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 168px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 96%, #000 4%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top left;
  transition: opacity 160ms cubic-bezier(0.16, 1, 0.3, 1), transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cvep-filter-pop.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.cvep-pop-lab {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 6px 8px 4px;
  font-weight: 600;
}
.cvep-filt {
  appearance: none;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.cvep-filt:hover { background: var(--bg); color: var(--text); }
.cvep-filt.is-active {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  font-weight: 600;
}
.cvep-filt.is-active::after { content: "✓"; font-size: 11px; }
.cvep-filter-chip {
  font-size: 11px;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.cvep-filter-chip strong { color: var(--text); font-weight: 600; }
.cvep-cues {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.cvep-cue {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
}
.cvep-cue.is-ok {
  color: #22c55e;
  border-color: color-mix(in srgb, #22c55e 35%, var(--border));
}
.cvep-cue.is-warn {
  color: #f59e0b;
  border-color: color-mix(in srgb, #f59e0b 35%, var(--border));
}
.cvep-sec-lab {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  margin: 0;
}
.cvep-ex-panel {
  display: grid;
  gap: 8px;
}
.cvep-ex-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}
.cvep-ex-head .cvep-sec-lab { margin: 0; }
.cvep-ex-count {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.cvep-ex-combo {
  position: relative;
  display: grid;
  gap: 0;
}
.cvep-ex-q {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.cvep-ex-combo.is-open .cvep-ex-q {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}
.cvep-ex-q:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}
.cvep-ex-combo-list {
  position: absolute;
  z-index: 40;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(5 * 36px);
  overflow-y: auto;
  display: grid;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: color-mix(in srgb, var(--surface, var(--bg)) 92%, #000);
  box-shadow: 0 10px 28px color-mix(in srgb, #000 35%, transparent);
}
.cvep-ex-combo-list[hidden] { display: none; }
.cvep-ex-combo-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--muted);
}
.cvep-ex-opt {
  appearance: none;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.cvep-ex-opt:last-child { border-bottom: 0; }
.cvep-ex-opt:hover,
.cvep-ex-opt:focus {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  outline: none;
}
.cvep-ex-opt.is-today .cvep-ex-opt-mark { color: var(--primary); }
.cvep-ex-opt.is-done .cvep-ex-opt-meta { color: #22c55e; }
.cvep-ex-opt-mark {
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}
.cvep-ex-opt-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 560;
}
.cvep-ex-opt-meta {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.cvep-ex-today-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
}
.cvep-ex-card.is-today {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
.cvep-empty {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 12px;
}
.cvep-ex-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.cvep-ex-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  width: 100%;
  padding: 8px 10px 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 160ms, background 160ms, transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cvep-ex-card:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.cvep-ex-card:active { transform: scale(0.985); }
.cvep-ex-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.cvep-ex-copy { min-width: 0; flex: 1 1 auto; }
.cvep-ex-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
}
.cvep-ex-name { font-weight: 600; font-size: 12px; line-height: 1.25; }
.cvep-ex-meta { font-size: 10px; color: var(--muted); margin-top: 1px; }
.cvep-ex-delta {
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cvep-ex-delta.is-up { color: #22c55e; }
.cvep-ex-delta.is-down { color: #ef4444; }
.cvep-ex-delta.is-flat { color: var(--muted); }
.cvep-mini-spark {
  width: 100%;
  height: 48px;
  display: block;
  margin-top: 4px;
}
.cvep-mini-spark .cvep-ms-line {
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.cvep-mini-spark .cvep-ms-dot {
  fill: var(--bg);
  stroke: var(--primary);
  stroke-width: 2;
}
.cvep-mini-spark .cvep-ms-dot.is-void {
  fill: color-mix(in srgb, var(--muted) 35%, transparent);
  stroke: color-mix(in srgb, var(--muted) 55%, transparent);
  stroke-width: 1.25;
}
.cvep-mini-spark .cvep-ms-lab {
  fill: var(--muted);
  font-size: 8px;
  font-weight: 600;
}
.cvep-mini-spark.is-ok .cvep-ms-line { stroke: #22c55e; }
.cvep-mini-spark.is-ok .cvep-ms-dot { stroke: #22c55e; }
.cvep-mini-spark.is-warn .cvep-ms-line { stroke: #f59e0b; }
.cvep-mini-spark.is-warn .cvep-ms-dot { stroke: #f59e0b; }
.cvep-mini-spark.is-miss .cvep-ms-line { stroke: #ef4444; }
.cvep-mini-spark.is-miss .cvep-ms-dot { stroke: #ef4444; }
.cvep-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: 11px;
}
.cvep-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.cvep-status.is-green { color: #22c55e; }
.cvep-status.is-green::before { background: #22c55e; }
.cvep-status.is-amber { color: #f59e0b; }
.cvep-status.is-amber::before { background: #f59e0b; }
.cvep-status.is-red { color: #ef4444; }
.cvep-status.is-red::before { background: #ef4444; }
.cvep-sticky-kpi {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 2px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 92%, #000 8%);
  backdrop-filter: blur(10px);
  font-size: 12px;
  color: var(--muted);
}
.cvep-sticky-kpi b {
  color: var(--text);
  font-weight: 700;
  margin-right: 4px;
}
.cvep-sticky-kpi span:first-child { color: var(--primary); }
.cvep-sticky-kpi span:first-child b { color: var(--primary); }
.cvep-metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cvep-load-ring {
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.cvep-load-ring svg { display: block; }
.cvep-load-ring-lab {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  pointer-events: none;
}
.cvep-load-ring-lab small {
  font-size: 8px;
  font-weight: 500;
  color: var(--muted);
}
.cvep-rpe-scale {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  max-width: none;
  width: 100%;
  font-size: 10px;
  color: var(--muted);
}
.cvep-rpe-scale .cvep-rpe-track { flex: 1; }
.cvep-ok-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, #22c55e 22%, transparent);
  color: #22c55e;
  font-size: 10px;
  font-weight: 800;
}
.cvep-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.9fr);
  gap: 10px;
  align-items: stretch;
}
.cvep-week-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.cvep-week-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 10px;
  color: var(--muted);
  justify-content: center;
}
.cvep-week-legend span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.cvep-week-legend .is-done::before { background: #22c55e; }
.cvep-week-legend .is-partial::before { background: #f59e0b; }
.cvep-week-legend .is-miss::before { background: #ef4444; }
.cvep-week-legend .is-rest::before {
  background: transparent;
  border: 1.5px dashed var(--border);
  box-sizing: border-box;
}
.cvep-table-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.cvep-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.cvep-table th {
  text-align: left;
  padding: 7px 10px;
  background: var(--bg);
  color: var(--muted);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.cvep-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.cvep-table tr:last-child td { border-bottom: none; }
.cvep-table tr:hover td {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}
.cvep-table tr.is-clickable {
  cursor: pointer;
}
.cvep-table tr.is-clickable:hover td {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.cvep-table td.cvep-mono.is-done {
  white-space: normal;
  max-width: 28rem;
  line-height: 1.35;
  font-size: 0.82rem;
}
.cvep-mono {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.cvep-mono.is-done { color: var(--text); font-weight: 500; }
.cvep-insights {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.cvep-insights-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.cvep-insights h5 {
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  font-size: 14px;
  margin: 0;
  font-weight: 700;
}
.cvep-hint { font-size: 11px; color: var(--muted); }
.cvep-insights ul,
.cvep-insight-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 12px;
  display: grid;
  gap: 8px;
}
.cvep-insight-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
}
.cvep-insight-list li strong { color: var(--text); }
.cvep-insight-ico {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-top: 1px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.cvep-insight-list .is-info .cvep-insight-ico {
  background: color-mix(in srgb, #3b82f6 22%, transparent);
  color: #60a5fa;
}
.cvep-insight-list .is-info .cvep-insight-ico::before { content: "i"; }
.cvep-insight-list .is-warn .cvep-insight-ico {
  background: color-mix(in srgb, #f59e0b 22%, transparent);
  color: #fbbf24;
}
.cvep-insight-list .is-warn .cvep-insight-ico::before { content: "!"; }
.cvep-insight-list .is-danger .cvep-insight-ico {
  background: color-mix(in srgb, #ef4444 22%, transparent);
  color: #f87171;
}
.cvep-insight-list .is-danger .cvep-insight-ico::before { content: "✕"; }
.cvep-week-dots {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2px;
  padding-top: 0;
  border-top: none;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}
.cvep-dow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 1px;
  font-family: inherit;
  min-width: 0;
  flex: 1 1 0;
}
.cvep-dow i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--border) 80%, transparent);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  line-height: 1;
}
.cvep-dow-d { font-weight: 600; white-space: nowrap; }
.cvep-dow-st { display: none; }
.cvep-dow.is-done i {
  background: color-mix(in srgb, #22c55e 22%, transparent);
  color: #22c55e;
}
.cvep-dow.is-partial i,
.cvep-dow.is-pending i {
  background: color-mix(in srgb, #f59e0b 22%, transparent);
  color: #f59e0b;
}
.cvep-dow.is-miss i,
.cvep-dow.is-missed i {
  background: color-mix(in srgb, #ef4444 22%, transparent);
  color: #ef4444;
}
.cvep-dow.is-rest i {
  background: transparent;
  border: 1.5px dashed var(--border);
  color: var(--muted);
  font-weight: 500;
}
dialog.cvep-ex-dialog {
  --modal-w: min(980px, calc(100vw - 32px));
  --modal-max-h: min(92svh, 860px);
  width: min(980px, calc(100vw - 32px));
  max-height: min(92svh, 860px);
  border-radius: 16px;
}
.cvep-ex-dialog-head h3 {
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  letter-spacing: -0.03em;
}
.cvep-ex-dialog-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cvep-ex-dialog-name {
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}
.cvep-ex-dialog-meta { font-size: 12px; color: var(--muted); }
.cvep-ex-dialog-meta em {
  font-style: normal;
  color: var(--primary);
  font-weight: 600;
}
.cvep-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.cvep-mcard {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 12px 10px;
  min-width: 0;
}
.cvep-mcard-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.cvep-meta-pill {
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--text);
}
.cvep-mcard-val {
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.cvep-mcard-val.is-primary { color: var(--primary); }
.cvep-mcard-val em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
}
.cvep-mcard-val em.is-up { color: #22c55e; }
.cvep-mcard-val em.is-down { color: #ef4444; }
.cvep-mcard-val em.is-flat { color: var(--muted); font-weight: 500; }
.cvep-mcard-foot {
  margin: 6px 0 0;
  font-size: 10px;
  color: var(--muted);
}
.cvep-modal-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}
.cvep-msplit {
  padding: 12px 14px;
  background: color-mix(in srgb, var(--bg) 40%, transparent);
}
.cvep-msplit + .cvep-msplit { border-left: 1px solid var(--border); }
.cvep-msplit-lab {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
}
.cvep-msplit p { margin: 0 0 4px; font-size: 13px; }
.cvep-msplit .hint { margin: 0; font-size: 11px; }
.cvep-modal-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
  padding-top: 4px;
}
.cvep-chart-svg { width: 100%; height: 132px; display: block; overflow: visible; }
.cvep-chart-svg .cvep-axis { stroke: var(--border); stroke-width: 1; }
.cvep-chart-svg .cvep-guide {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.55;
}
.cvep-chart-svg .cvep-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cvep-chart-svg .cvep-area { opacity: 0.9; }
.cvep-chart-svg .cvep-dot {
  fill: var(--bg);
  stroke: var(--primary);
  stroke-width: 2.25;
}
.cvep-chart-svg .cvep-dot.is-void {
  fill: color-mix(in srgb, var(--muted) 30%, transparent);
  stroke: color-mix(in srgb, var(--muted) 50%, transparent);
  stroke-width: 1.25;
}
.cvep-chart-svg .cvep-tick { fill: var(--muted); font-size: 9px; }
.cvep-chart-svg .cvep-val-lbl { fill: var(--text); font-size: 9px; font-weight: 600; }
.cvep-vol-chart .cvep-vbar { fill: var(--primary); }
.cvep-vol-chart .cvep-vbar.is-void { fill: color-mix(in srgb, var(--muted) 35%, transparent); }
.cvep-rpe-strip { margin-top: 8px; }
.cvep-rpe-strip-lab {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 10px;
  font-weight: 600;
}
.cvep-rpe-nodes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.cvep-rpe-rail {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 7px;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.cvep-rpe-nodes { z-index: 1; }
.cvep-rpe-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.cvep-rpe-node i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sys-surface, var(--surface)) 90%, #000);
}
.cvep-rpe-node i.is-warm { background: #f59e0b; }
.cvep-rpe-node i.is-hot { background: var(--primary); }
.cvep-rpe-node i.is-void { background: var(--border); }
.cvep-rpe-node em {
  font-style: normal;
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
}
#planner-ex-progress-body.is-anim .cvep-vbar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: cvepBarUp 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
#planner-ex-progress-body.is-anim .cvep-area {
  animation: cvepFadeIn 500ms ease 200ms both;
}
@keyframes cvepBarUp {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes cvepFadeIn {
  from { opacity: 0; }
  to { opacity: 0.9; }
}
@media (max-width: 900px) {
  .cvep-strip,
  .cvep-metrics,
  .cvep-ex-grid,
  .cvep-modal-grid,
  .cvep-modal-split,
  .cvep-foot {
    grid-template-columns: 1fr;
  }
  .cvep-cues { margin-left: 0; width: 100%; }
  .cvep-msplit + .cvep-msplit { border-left: none; border-top: 1px solid var(--border); }
}
@media (prefers-reduced-motion: reduce) {
  .cvep-gauge-fill,
  .cvep-filter-pop,
  .cvep-ex-card,
  #planner-ex-progress-body.is-anim .cvep-vbar,
  #planner-ex-progress-body.is-anim .cvep-area {
    animation: none !important;
    transition: none !important;
  }
}

dialog.planner-sessions-dialog {
  --modal-w: min(760px, calc(100vw - 16px));
  --modal-max-h: 92svh;
  width: min(760px, calc(100vw - 16px));
  height: min(92svh, 880px);
  max-height: 92svh;
}

.planner-sessions-header {
  position: relative;
  align-items: flex-start;
  padding: 12px 48px 10px 16px;
}

.planner-sessions-heading {
  min-width: 0;
}

.planner-sessions-heading h3 {
  margin: 0;
  font-size: 0.95rem;
}

.planner-sessions-header .planner-sessions-count {
  margin: 2px 0 0;
}

.planner-sessions-header > [data-fit-modal-close] {
  position: absolute;
  top: 8px;
  right: 10px;
}

.planner-sessions-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0 12px 12px;
}

.planner-sessions-dialog .planner-sessions-list {
  flex: 1 1 auto;
  padding: 0 0 8px;
}

#tab-planificador .planner-session-card,
.planner-sessions-dialog .planner-session-card {
  display: flex;
  flex-direction: column;
  /* Sin esto la tarjeta se encoge (es un flex item de la lista) y su contenido
     desborda sobre la siguiente sesión. */
  flex: 0 0 auto;
  gap: 4px;
  margin: 0; /* la separación la da el `gap` de la lista */
  min-height: 0; /* anula el min-height legacy de .session-dropzone */
  padding: 10px 12px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 82%, transparent);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
  cursor: pointer;
}

#tab-planificador .planner-session-card:hover,
.planner-sessions-dialog .planner-session-card:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}

#tab-planificador .planner-session-card.is-active,
.planner-sessions-dialog .planner-session-card.is-active {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 94%, transparent);
}

#tab-planificador .planner-session-card.is-open,
.planner-sessions-dialog .planner-session-card.is-open {
  /* Legacy: el detalle ya no se despliega inline (PL-UI-27). */
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}

.planner-session-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.planner-session-head .toolbar-spacer { flex: 1 1 auto; min-width: 4px; }

.planner-session-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  min-width: 0;
}

.planner-session-caret {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  color: var(--muted);
  transform: rotate(-90deg);
}

.planner-session-card.is-active .planner-session-caret,
.planner-session-card.is-open .planner-session-caret {
  color: var(--primary);
}

.planner-session-name {
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.planner-session-days { display: none; }

.planner-day-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: color-mix(in srgb, var(--primary) 82%, white);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.planner-day-chip.is-empty {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: color-mix(in srgb, var(--warn) 85%, white);
}

.planner-session-meta { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }

.planner-session-tools { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }

.planner-session-tools .session-remove.danger {
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 28%, transparent);
}

.planner-session-tools .danger:hover:not(:disabled) {
  color: color-mix(in srgb, var(--err) 88%, white);
  border-color: color-mix(in srgb, var(--err) 50%, transparent);
  background: color-mix(in srgb, var(--err) 12%, transparent);
}

/* Plegada, la tarjeta resume sus ejercicios en una línea. */
.planner-session-preview {
  margin: 0;
  padding-left: 23px;
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.planner-session-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline, var(--border));
}

.planner-session-body[hidden] { display: none; }

.planner-session-note {
  margin: 0;
  font-size: 0.73rem;
  color: color-mix(in srgb, var(--warn) 85%, white);
}

#tab-planificador .planner-session-card .session-blocks,
.planner-sessions-dialog .planner-session-card .session-blocks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(52vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 4px;
}

#tab-planificador .planner-session-card .session-add-exercise,
.planner-sessions-dialog .planner-session-card .session-add-exercise {
  width: 100%;
  margin: 0;
  border-style: dashed;
  font-size: 0.8rem;
}

/* Nombre + días de la sesión (modal) */
.planner-session-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.planner-session-field > span {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--text);
}

/* Etiqueta + «?» de ayuda en la misma línea: cada campo de los modales del
   planificador explica para qué sirve sin ocupar una línea extra de texto. */
.planner-field-head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.planner-field-head > label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--text);
}

.planner-session-field .hint { margin: 0; }

/* body layout for #planner-session-dialog vive junto a .planner-session-mode */

/* Modal de detalle de sesión (lista limpia → detalle compacto + iconos).
   Usa --modal-w: dialog.modal-dialog gana en specificity al width suelto.
   ~820px: grid series/reps/descanso/RPE legible sin vacío lateral (también
   cuando FitModal mueve el dialog a <body> fuera de #tab-planificador). */
.planner-detail-dialog {
  --modal-w: min(820px, 94vw);
  --modal-max-h: min(78vh, 720px);
  max-height: var(--modal-max-h);
}

.planner-detail-header {
  position: relative;
  align-items: flex-start;
  gap: 8px;
  /* Hueco para la X absoluta en la esquina (no empuja el lápiz). */
  padding-right: 48px;
}

.planner-detail-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
}

.planner-detail-title-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  /* Título + lápiz juntos a la izquierda; no estirar el h3. */
  justify-content: flex-start;
}

.planner-detail-title-row h3 {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 40px);
  font-size: 1.05rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planner-detail-title-row .icon-mini {
  flex: 0 0 auto;
}

.planner-detail-title-row.is-renaming h3 { display: none; }

/* X de cerrar: pura esquina superior derecha del modal. */
.planner-detail-header > #planner-detail-close,
.planner-detail-close-x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  margin: 0;
}

#planner-detail-name-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: 18rem;
  margin: 0;
  padding: 2px 0;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 55%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  font-family: inherit;
}

#planner-detail-name-input:focus {
  outline: none;
  border-bottom-color: var(--primary);
}

.planner-detail-weekdays[hidden] {
  display: none !important;
}

.planner-detail-weekdays:not([hidden]) {
  display: flex;
  margin-top: 8px;
}

.planner-detail-weekdays.is-highlight:not([hidden]) {
  outline: 2px solid var(--primary, #e85d04);
  outline-offset: 4px;
  border-radius: 10px;
  padding: 4px;
}

.planner-detail-weekdays .planner-weekday-btn {
  min-width: 0;
  min-height: 36px;
  padding: 9px 4px;
  font-size: 0.84rem;
}

.planner-detail-weekdays .planner-weekday-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

#planner-detail-edit-error {
  margin: 0;
  font-size: 0.78rem;
}

.planner-detail-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(58vh, 520px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-top: 2px;
  -webkit-overflow-scrolling: touch;
}

.planner-detail-body .session-dropzone {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  min-height: 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.planner-detail-body .session-blocks {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  padding-right: 2px;
}

/* Misma tarjeta vertical que #tab-planificador .session-block-row.
   Crítico: si FitModal mueve #planner-detail-dialog a <body>, el selector
   #tab-planificador ya no aplica y el grid legacy de 7 cols «despicha» el nombre. */
.planner-detail-body .session-block-row {
  display: block;
  padding: 10px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 45%, transparent);
}

.planner-detail-body .block-row-head {
  gap: 4px;
  margin-bottom: 4px;
}

.planner-detail-body .block-row-fields {
  gap: 6px 8px;
}

.planner-detail-body .block-row-title .session-block-name {
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
}

.planner-detail-body .session-block-row input[type="number"],
.planner-detail-body .session-block-row input[type="text"],
.planner-detail-body .session-block-row select {
  padding: 4px 6px;
  font-size: 0.76rem;
  min-width: 0;
}

.planner-detail-body .block-row-fields > label {
  min-width: 0;
  max-width: none;
  font-size: 0.68rem;
  gap: 2px;
}

.planner-detail-body .session-section-head {
  margin: 4px 0 0;
  padding: 2px 0;
  font-size: 0.7rem;
}

.planner-detail-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}

.planner-detail-footer .toolbar-spacer { flex: 1 1 auto; min-width: 8px; }

.planner-detail-footer .icon-mini,
.planner-detail-header .icon-mini {
  width: 34px;
  height: 34px;
}

/* `display: inline-flex` de .icon-mini gana al [hidden] del UA → los tres
   controles del título (lápiz/✓/✕) se veían a la vez. */
.icon-mini[hidden] {
  display: none !important;
}

#planner-detail-group,
#lib-group {
  margin: 0;
  padding: 7px 11px;
  font-size: 0.76rem;
  white-space: nowrap;
}

#planner-detail-group[hidden],
#lib-group[hidden],
#planner-detail-duplicate[hidden],
#planner-detail-save-group[hidden] {
  display: none !important;
}

#planner-detail-edit-save:disabled {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}

.icon-mini.is-primary {
  color: color-mix(in srgb, var(--primary) 88%, white);
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  background: var(--primary-soft);
}

.icon-mini.is-primary:hover:not(:disabled) {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 65%, transparent);
}

/* Los 7 días reparten el ancho en una sola fila: antes envolvían y el modal
   crecía en vertical sin necesidad. */
#planner-session-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

#planner-session-weekdays .planner-weekday-btn {
  min-width: 0;
  padding: 8px 4px;
  text-align: center;
}

/* Nuevo plan: dos columnas para las cifras cortas (semanas, días, fecha) en vez
   de una pila de cinco campos a lo alto. Aprovecha el ancho del modal y baja
   el alto total ~35%. */
.planner-plan-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.planner-form-lead { margin: 0; }

.planner-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.planner-form-grid .planner-form-wide { grid-column: 1 / -1; }

.planner-form-grid input,
.planner-form-grid select {
  width: 100%;
  margin: 0;
}

@media (max-width: 560px) {
  .planner-form-grid { grid-template-columns: minmax(0, 1fr); }

  .planner-detail-dialog {
    --modal-w: calc(100vw - 12px);
    --modal-max-h: min(88dvh, 720px);
    max-height: var(--modal-max-h);
    margin: 8px auto;
  }

  .planner-detail-body {
    max-height: min(62dvh, 520px);
  }

  .planner-detail-body .block-row-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: hidden;
  }

  .planner-detail-footer {
    flex-wrap: nowrap;
    gap: 6px;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .planner-detail-footer .icon-mini {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  .planner-detail-footer .toolbar-spacer { min-width: 4px; }

  .planner-schedule-dialog {
    width: calc(100vw - 12px);
    max-height: min(96dvh, 880px);
  }
}

/* «?» en la cabecera de un modal: absorbe el hueco libre para que el título
   quede a la izquierda y el ✕ siga pegado a la derecha. */
.modal-dialog .modal-header > .fit-tip-q { margin-left: auto; }
.modal-dialog .modal-header > .fit-tip-q.hidden { display: none; }

/* Modal genérico de texto: etiqueta + «?» arriba, campo debajo, y el campo
   numérico opcional acotado en ancho (no ocupa la fila entera para pedir "3"). */
.generic-prompt-body {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.generic-prompt-body .hint { margin: 0; }
.generic-prompt-body .generic-prompt-textarea { width: 100%; margin: 0; }

.generic-prompt-extra-row { max-width: 220px; }
.generic-prompt-extra-row.hidden { display: none; }
.generic-prompt-extra-row input { width: 100%; margin: 0; }

.planner-weekday-row { display: flex; gap: 6px; flex-wrap: wrap; }

.planner-weekday-btn {
  margin: 0;
  min-width: 46px;
  padding: 7px 10px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 45%, transparent);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  transition:
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}

.planner-weekday-btn:hover { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }

.planner-weekday-btn.is-on {
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  color: color-mix(in srgb, var(--primary) 82%, white);
}

/* Semanas como pestañas de calendario */
.planner-week-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 1px 2px 6px;
  scrollbar-width: thin;
}

.planner-week-tab {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 5px 11px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--dur-fast) ease,
    background var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}

.planner-week-tab:hover { transform: translateY(-1px); }

.planner-week-tab.is-active {
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  background: var(--primary-soft);
}

.planner-week-tab.is-now .planner-week-tab-name { color: color-mix(in srgb, var(--primary) 80%, white); }

.planner-week-tab-name {
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
}

.planner-week-tab-meta {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Tablero de días de la semana seleccionada.
   Es la única región con scroll del tab: el resto del cromo (barra de
   contexto, cabecera de plan, deload, semanas) es fijo y compacto para que
   los días no queden aplastados. */
#tab-planificador .planner-week-board {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 0 4px 84px 0; /* aire para el FAB (lista de sesiones) */
}

#tab-planificador .planner-view--calendar {
  overflow: hidden;
}

#tab-planificador .planner-view--calendar .planner-week-board {
  overflow: hidden;
  padding: 0 2px 6px 0;
}

#tab-planificador .planner-view--calendar .planner-week-board:has(.planner-day-board) {
  overflow-y: auto;
}

.planner-view--calendar-teaser {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.planner-cal-teaser {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 20px 22px;
  text-align: left;
  border: 1px solid var(--hairline, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, transparent);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.planner-cal-teaser:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 96%, transparent);
}

.planner-cal-teaser-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
}

.planner-cal-teaser-icon .nav-ico {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}

.planner-cal-teaser-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.planner-cal-teaser-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.planner-cal-teaser-copy strong {
  font-size: 1.05rem;
  font-weight: 750;
}

.planner-cal-teaser-copy .hint { margin: 0; }

.planner-cal-teaser-cta {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--tenant-primary-contrast, #fff);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Calendario semanal (PL-UI-28): 7 bloques de día sin eje de horas.
   Cada columna muestra chip(s) de sesión o «Libre»; cabe en el viewport. */
.planner-agenda {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  width: 100%;
  border: 1px solid var(--hairline, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, transparent);
  overflow: hidden;
}

.planner-agenda-dayhead {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  border-left: 1px solid var(--hairline, var(--border));
  border-bottom: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 55%, transparent);
  text-align: center;
  min-width: 0;
}

.planner-agenda-dayhead:first-child { border-left: none; }

.planner-agenda-dayhead.is-today {
  background: var(--primary-soft);
}

.planner-agenda-dayname {
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.planner-agenda-dayhead.is-today .planner-agenda-dayname { color: var(--primary); }

.planner-agenda-daydate {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.planner-agenda-col {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 88px;
  max-height: min(42vh, 320px);
  padding: 8px 6px;
  border-left: 1px solid var(--hairline, var(--border));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.planner-agenda-col:first-of-type,
.planner-agenda > .planner-agenda-col:nth-child(8) { border-left: none; }

.planner-agenda-col.is-today {
  background-color: color-mix(in srgb, var(--primary) 6%, transparent);
}

.planner-agenda-col.is-free.slot-over,
.planner-agenda-col.slot-over {
  outline: 2px dashed color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: -3px;
  background-color: var(--primary-soft);
}

.planner-agenda-col.slot-copy {
  outline-style: solid;
  outline-color: color-mix(in srgb, var(--success, #34d399) 65%, transparent);
}

.planner-agenda-card.is-dragging { opacity: 0.5; }

.planner-day-chip.is-oneoff {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  color: var(--primary);
}

/* Modal Nueva sesión: columna de formulario acotada (no full-bleed). */
.planner-session-dialog {
  width: min(32rem, calc(100vw - 32px));
}

/* Formulario reutilizable en modales del planificador (Nueva sesión, Copiar,
   etc.): inputs con max-width razonable, no estirados al 100% del modal ancho.
   Los diálogos se reparentan a <body>, así que no dependen de #tab-planificador. */
.planner-modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 28rem;
  margin-inline: auto;
  width: 100%;
}

.planner-modal-form .planner-session-field > input:not([type="checkbox"]):not([type="radio"]),
.planner-modal-form .planner-session-field > select {
  width: 100%;
  max-width: 22rem;
  margin: 0;
}

.planner-modal-form .planner-modal-field-wide > .planner-modal-search,
.planner-modal-form .planner-modal-field-wide > .planner-clone-list {
  max-width: none;
  width: 100%;
}

.planner-modal-search {
  max-width: 22rem;
  width: 100%;
}

/* Buscador con lupa dentro del modal (mismo look que el picker, sin depender
   del ancestro #tab-planificador tras reparent a body). */
.modal-dialog .planner-pick-search.planner-modal-search input,
.planner-modal-search input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
  box-shadow: none !important;
}

.modal-dialog .planner-pick-search.planner-modal-search input:focus,
.planner-modal-search input:focus {
  outline: none;
  border: none;
  box-shadow: none !important;
}

#planner-session-dialog #planner-session-name {
  width: 100%;
  max-width: 22rem;
}

/* Segmented control compacto (una fila) — evita radio-cards enormes.
   El padre .planner-session-field es flex-column (align-self:stretch por
   defecto): sin width:fit-content el track se estira al ancho del modal. */
.planner-session-mode {
  display: inline-flex;
  flex-wrap: nowrap;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  gap: 0;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 55%, transparent);
}

.planner-session-mode-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.25;
  color: var(--muted);
  white-space: nowrap;
}

.planner-session-mode-opt:has(input:checked) {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface, #fff));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}

.planner-session-mode-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.planner-oneoff-date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  max-width: 28rem;
}

/* «Repetir hasta» del patrón semanal — PL-025. Vacío = hasta el fin del plan. */
.planner-session-until-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  max-width: 28rem;
}

.planner-session-until-row label {
  font-size: 0.78rem;
  color: var(--muted);
}

#planner-session-until {
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: var(--surface, var(--bg));
  color: inherit;
}

#planner-session-until:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

#planner-session-oneoff-date {
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 22rem;
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  padding: 6px 10px;
  background: var(--surface, #fff);
  font: inherit;
  font-size: 0.88rem;
}

.planner-oneoff-occupied-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.planner-oneoff-occupied-toggle input {
  margin: 0;
  accent-color: var(--primary);
}

#planner-session-oneoff-date option:disabled {
  color: var(--muted);
}

.planner-oneoff-empty {
  color: color-mix(in srgb, var(--warn) 80%, var(--text));
}

.planner-oneoff-empty.hidden {
  display: none;
}

.planner-agenda-free {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  height: 100%;
  min-height: 72px;
  justify-content: center;
}

.planner-agenda-add-oneoff {
  appearance: none;
  border: 1px dashed color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  color: var(--primary);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}

.planner-agenda-add-oneoff:hover {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-style: solid;
}

.planner-agenda-empty {
  margin: auto 0;
  padding: 6px 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  pointer-events: none;
  opacity: 0.8;
}

.planner-agenda-event {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 22%, var(--sys-surface, var(--surface)));
  color: var(--text);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 1px 2px color-mix(in srgb, #000 18%, transparent);
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.planner-agenda-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px color-mix(in srgb, #000 22%, transparent);
}

.planner-agenda-event:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.planner-agenda-event-name {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.planner-agenda-event-meta {
  font-size: 0.66rem;
  color: var(--muted);
}

/* Tarjeta = evento + su menú. Un día puede apilar varias (PL-027). */
.planner-agenda-card {
  position: relative;
  display: block;
  cursor: grab;
}

.planner-agenda-card:active { cursor: grabbing; }

.planner-agenda-menu-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.planner-agenda-card:hover .planner-agenda-menu-btn,
.planner-agenda-menu-btn:focus-visible,
.planner-agenda-menu-btn[aria-expanded="true"] {
  opacity: 1;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 85%, transparent);
}

.planner-agenda-menu {
  position: absolute;
  z-index: 30;
  top: 24px;
  right: 2px;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--sys-surface, var(--surface));
  box-shadow: 0 10px 26px color-mix(in srgb, #000 32%, transparent);
}

.planner-agenda-menu[hidden] { display: none; }

.planner-agenda-menu button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  padding: 7px 9px;
  border-radius: 7px;
  cursor: pointer;
}

.planner-agenda-menu button:hover { background: var(--primary-soft); }
.planner-agenda-menu button.danger { color: var(--danger, #f87171); }

/* Duplicar en otros días: chips de la semana. */
.clonecard-days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.clonecard-day {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.clonecard-day:hover:not(:disabled) { border-color: var(--primary); }

.clonecard-day.is-on {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.clonecard-day:disabled { opacity: 0.45; cursor: not-allowed; }

.clonecard-day-meta {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--muted);
}

/* Legacy day cards (por si alguna ruta residual las pinta) */
.planner-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 12px;
  align-items: start;
}

#tab-planificador .planner-day {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 82%, transparent);
}

#tab-planificador .planner-day.is-today {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--primary-soft);
}

.planner-day-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline, var(--border));
}

.planner-day-when { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.planner-day-date {
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

.planner-day-name {
  font-size: 0.9rem;
  font-weight: 600;
}

.planner-day-head-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.planner-day-count {
  font-size: 0.68rem;
  font-weight: 650;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: color-mix(in srgb, var(--primary) 80%, white);
  white-space: nowrap;
}

.planner-day-count.is-empty {
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted);
}

.planner-day-warn {
  margin: 0;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--warn) 85%, white);
}

/* Los ejercicios del día scrollean dentro de la tarjeta: así la cabecera del
   día y el botón "+ Añadir ejercicio" siguen visibles y ningún día queda
   cortado por abajo aunque tenga 12 ejercicios. */
#tab-planificador .planner-day .session-blocks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(46vh, 440px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 4px;
}

#tab-planificador .planner-day .session-add-exercise {
  width: 100%;
  margin: 0;
  border-style: dashed;
  font-size: 0.8rem;
}

.session-empty {
  margin: 0;
  padding: 14px 10px;
  border: 1px dashed var(--hairline, var(--border));
  border-radius: 10px;
  text-align: center;
  font-size: 0.78rem;
}

/* Botón de acción compacto dentro de las filas de ejercicio */
.icon-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition:
    color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    background var(--dur-fast) ease;
}

.icon-mini:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 60%, transparent);
}

.icon-mini:disabled { opacity: 0.28; cursor: default; }

.icon-mini .nav-ico { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.75; }

/* Acciones destructivas — rojo consistente (planificador + patrón global) */
.icon-mini.danger,
.ex-tool-chip.danger,
.icon-btn.danger {
  color: var(--err);
}

.icon-mini.danger {
  border-color: color-mix(in srgb, var(--err) 28%, transparent);
}

.icon-mini.danger:hover:not(:disabled) {
  color: color-mix(in srgb, var(--err) 88%, white);
  border-color: color-mix(in srgb, var(--err) 50%, transparent);
  background: color-mix(in srgb, var(--err) 12%, transparent);
}

.ex-tool-chip.danger {
  border-color: color-mix(in srgb, var(--err) 35%, var(--border));
}

.ex-tool-chip.danger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--err) 55%, transparent);
  color: color-mix(in srgb, var(--err) 88%, white);
  background: color-mix(in srgb, var(--err) 10%, transparent);
}

.block-delete,
#tab-planificador .block-delete {
  color: var(--err);
}

.block-delete:hover:not(:disabled),
#tab-planificador .block-delete:hover:not(:disabled) {
  color: color-mix(in srgb, var(--err) 88%, white);
  border-color: color-mix(in srgb, var(--err) 45%, transparent);
  background: color-mix(in srgb, var(--err) 10%, transparent);
}

/* La fila de ejercicio pasa de grid de columnas fijas a dos filas
   (cabecera con nombre/acciones + campos), que es lo que aguanta el ancho de
   una tarjeta de día. */
#tab-planificador .session-block-row {
  display: block;
  padding: 10px;
  border: 1px solid var(--hairline, var(--border));
  border-bottom: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 45%, transparent);
}

#tab-planificador .session-block-row:last-child { border-bottom: 1px solid var(--hairline, var(--border)); }

#tab-planificador .block-delete {
  padding: 0;
  border-color: color-mix(in srgb, var(--err) 22%, transparent);
  font-size: 0.8rem;
}

#tab-planificador .block-select-wrap { padding-bottom: 0; }

#tab-planificador .block-ungroup {
  margin-bottom: 0;
  padding: 2px 7px;
  font-size: 0.78rem;
}

#tab-planificador .session-block-row input[type="number"],
#tab-planificador .session-block-row input[type="text"] {
  width: 100%;
  min-width: 0;
  padding: 5px 7px;
  font-size: 0.8rem;
}

#tab-planificador .block-row-fields > label {
  min-width: 0;
  max-width: none;
}

#tab-planificador .block-save {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
}

/* Fuera del área con scroll: "Guardar cambios del día" y "Agrupar en circuito"
   quedan fijas al pie de la tarjeta aunque el día tenga 15 ejercicios. */
#tab-planificador .circuit-toolbar {
  gap: 6px;
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px solid var(--hairline, var(--border));
}

#tab-planificador .circuit-toolbar .ghost {
  width: auto;
  margin: 0;
  padding: 7px 12px;
  font-size: 0.76rem;
}

#tab-planificador .session-save-all { margin-top: 0; }

/* Identidad del ejercicio a la izquierda (puede envolver badges) y acciones
   siempre en la misma línea a la derecha. */
.block-row-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.block-row-id {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}

.block-row-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  padding-top: 1px;
}

.block-row-title .session-block-name {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.block-row-tools {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Progreso: hit target + acento para que no se pierda entre grises */
.block-ex-progress.icon-mini {
  width: 30px;
  height: 30px;
  min-width: 30px;
  color: color-mix(in srgb, var(--primary) 88%, white);
  border-color: color-mix(in srgb, var(--primary) 48%, transparent);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}

.block-ex-progress.icon-mini:hover:not(:disabled) {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 72%, transparent);
  background: color-mix(in srgb, var(--primary) 24%, transparent);
}

.block-ex-progress.icon-mini .nav-ico {
  width: 16px;
  height: 16px;
}

.planner-detail-body .block-ex-progress.icon-mini {
  width: 32px;
  height: 32px;
  min-width: 32px;
}

.block-row-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 8px 10px;
  margin-top: 8px;
}

.block-row-fields > label:has(.block-seccion) {
  grid-column: span 2;
}

.block-row-fields > label.block-coach-note-wrap {
  grid-column: 1 / -1;
}

.block-coach-note {
  width: 100%;
  min-height: 2.4rem;
  resize: vertical;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border, #2a2a2a);
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  color: inherit;
}

.block-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: var(--muted);
  cursor: grab;
  border-radius: 8px;
  border: 1px solid transparent;
}

.block-handle:hover {
  color: var(--text);
  border-color: var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 55%, transparent);
}

.block-handle:active {
  cursor: grabbing;
}

.block-handle .nav-ico { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.75; }

.saved-item[draggable="true"],
.session-block-row[draggable="true"] {
  cursor: default;
}

.session-block-row[draggable="true"] .block-handle {
  cursor: grab;
}

.saved-item[draggable="true"]:active,
.session-block-row[draggable="true"] .block-handle:active {
  cursor: grabbing;
}

.block-handle .nav-ico { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.75; }

/* Miniatura del ejercicio dentro de la sesión — PL-UI-43. Formato apaisado
   pequeño para no romper la densidad de la fila; el play solo aparece si el
   ejercicio tiene video. */
.block-thumb-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 32px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  line-height: 0;
  cursor: pointer;
}

.block-thumb-wrap:hover {
  border-color: var(--primary);
}

.block-thumb-wrap:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.block-thumb,
.block-thumb-wrap .exercise-thumb-fallback {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
  font-size: 0.9rem;
  transition: transform var(--dur-base, 220ms) var(--ease-out, ease);
}

.block-thumb-wrap:hover .block-thumb,
.block-thumb-wrap:hover .exercise-thumb-fallback {
  transform: scale(1.06);
}

.block-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast, 160ms) var(--ease-out, ease);
}

.block-thumb-wrap:hover .block-thumb-play,
.block-thumb-wrap:focus-visible .block-thumb-play {
  opacity: 1;
}

.block-thumb-play svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

@media (prefers-reduced-motion: reduce) {
  .block-thumb,
  .block-thumb-wrap .exercise-thumb-fallback,
  .block-thumb-play {
    transition: none;
  }

  .block-thumb-wrap:hover .block-thumb,
  .block-thumb-wrap:hover .exercise-thumb-fallback {
    transform: none;
  }
}

.block-badge {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.block-badge-cardio {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: color-mix(in srgb, var(--ok) 82%, white);
}

/* PU-040 — builder de intervalos cardio (casillas, no free-text) */
.block-cardio-intervals-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2, var(--panel)) 70%, transparent);
}

.cardio-iv-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cardio-iv-title {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: uppercase;
}

.cardio-iv-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.9;
}

.cardio-iv-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cardio-iv-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.9fr) auto;
  gap: 8px;
  align-items: end;
}

.cardio-iv-row label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.68rem;
  color: var(--muted);
}

.cardio-iv-row input,
.cardio-iv-row select {
  width: 100%;
  min-width: 0;
}

.cardio-iv-add {
  align-self: flex-start;
  font-size: 0.78rem;
  padding: 4px 10px;
}

.cardio-iv-advanced {
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--muted);
}

.cardio-iv-advanced summary {
  cursor: pointer;
  user-select: none;
}

.cardio-iv-raw-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.cardio-iv-raw-wrap input {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
}

@media (max-width: 720px) {
  .cardio-iv-row {
    grid-template-columns: 1fr 1fr auto;
  }
  .cardio-iv-lab {
    grid-column: 1 / -2;
  }
}

.block-badge-injury {
  background: color-mix(in srgb, var(--err) 16%, transparent);
  color: color-mix(in srgb, var(--err) 85%, white);
  cursor: help;
}

.session-block-row.is-restricted {
  border-left: 2px solid color-mix(in srgb, var(--err) 60%, transparent);
  background: color-mix(in srgb, var(--err) 6%, transparent);
}

.block-1rm {
  font-size: 0.68rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* FAB con dos sub-acciones: crear a mano o generar con IA */
.planner-fab-wrap {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: max-content;
  height: max-content;
  pointer-events: none;
}
.planner-fab-wrap > .planner-fab,
.planner-fab-wrap > .planner-fab-actions:not([hidden]) {
  pointer-events: auto;
}

.planner-fab-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  animation: planner-fab-in var(--dur-fast) var(--ease-out);
}

/* `display: flex` / `inline-flex` ganan al `display: none` implícito de [hidden]. */
.planner-fab-actions[hidden] { display: none !important; }
.planner-fab-action[hidden] { display: none !important; }

@keyframes planner-fab-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.planner-fab-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  margin: 0;
  padding: 0 6px 0 14px;
  height: 44px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 94%, transparent);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--elev-2, 0 8px 24px rgba(0, 0, 0, 0.35));
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) ease;
}

.planner-fab-action:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
}

.planner-fab-action-label {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.planner-fab-action-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: color-mix(in srgb, var(--primary) 85%, white);
}

.planner-fab-action-ico .nav-ico { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.75; }

#tab-planificador .planner-fab,
#tab-comidas .planner-fab,
#tab-recuperacion .planner-fab,
#tab-ejercicios .planner-fab,
#tab-clases-vod .planner-fab,
#tab-wellness .planner-fab {
  position: static;
  transition: transform var(--dur-fast) var(--ease-out);
}

#tab-planificador .planner-fab.is-open,
#tab-comidas .planner-fab.is-open,
#tab-recuperacion .planner-fab.is-open,
#tab-ejercicios .planner-fab.is-open,
#tab-clases-vod .planner-fab.is-open,
#tab-wellness .planner-fab.is-open { transform: rotate(45deg); }

/* Generando un plan: el FAB es el único punto visible del flujo (sus
   sub-acciones se ocultan al pulsarlas), así que aquí vive el "estoy trabajando". */
#tab-planificador .planner-fab.is-busy,
#tab-comidas .planner-fab.is-busy,
#tab-recuperacion .planner-fab.is-busy {
  cursor: progress;
  opacity: 0.85;
}

#tab-planificador .planner-fab.is-busy .nav-ico {
  animation: plannerFabSpin 0.9s linear infinite;
}

@keyframes plannerFabSpin {
  to { transform: rotate(360deg); }
}

/* Catálogo de ejercicios dentro del modal */
.planner-catalog-dialog { --modal-w: 1080px; }

.planner-catalog-head {
  min-width: 0;
  flex: 1 1 auto;
}
.planner-catalog-head h3 { margin: 0; }
.planner-catalog-head .hint { margin: 3px 0 0; font-size: 0.74rem; }

.planner-catalog-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.planner-catalog-toolbar { margin: 0; }

/* En el modal: buscador compacto (solo el ancho necesario). */
.planner-catalog-toolbar .ex-search-wrap {
  flex: 0 1 220px;
  min-width: 150px;
  max-width: 260px;
}

.planner-catalog-toolbar #pcat-search {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 32px;
  padding: 4px 10px;
  opacity: 1;
  pointer-events: auto;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 55%, transparent);
  color: var(--text);
  font-size: 0.8rem;
}

.planner-catalog-grid {
  flex: 1 1 auto;
  min-height: 260px;
  max-height: min(52svh, 520px);
  overflow-y: auto;
  padding-right: 4px;
}

.planner-catalog-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.planner-catalog-footer .hint {
  margin: 0;
  margin-right: auto;
  font-size: 0.74rem;
}

.planner-pick-card {
  position: relative;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.planner-pick-card.is-selected {
  border-color: color-mix(in srgb, var(--primary) 70%, transparent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--primary) 28%, transparent),
    0 8px 18px color-mix(in srgb, var(--primary) 16%, transparent);
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--primary-soft, var(--primary)) 35%, var(--sys-surface, var(--surface)));
}

.planner-pick-order {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 40%, transparent);
}

.planner-pick-card.is-in-session {
  cursor: default;
  opacity: 0.78;
  border-color: color-mix(in srgb, var(--text) 26%, var(--border));
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 82%, transparent);
  box-shadow: none;
  transform: none;
}

.planner-pick-card.is-in-session:hover {
  border-color: color-mix(in srgb, var(--text) 26%, var(--border));
  box-shadow: none;
  transform: none;
}

.planner-pick-card.is-in-session .planner-pick-order {
  background: color-mix(in srgb, var(--text) 62%, var(--surface));
  color: var(--bg, #0b0b0b);
  box-shadow: none;
}

.planner-pick-in-session {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
}

.planner-pick-card.is-in-session .exercise-thumb-wrap {
  cursor: pointer;
}

.planner-pick-card.is-adding { opacity: 0.55; }

.planner-pick-card.is-added {
  border-color: color-mix(in srgb, var(--ok) 55%, transparent);
}

/* Prescripción por serie */
.planner-sets-dialog { --modal-w: 560px; }

.planner-sets-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.planner-sets-row {
  display: grid;
  grid-template-columns: 70px repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
}

.planner-sets-num {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.planner-sets-row label,
.planner-sets-1rm {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--muted);
}

.planner-sets-1rm { max-width: 200px; margin-top: 12px; }

@media (max-width: 900px) {
  .planner-day-grid { grid-template-columns: 1fr; }
  .planner-plan-header {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "id" "actions" "bar" "warn";
  }
  .planner-plan-actions { justify-content: flex-start; }
}

#tab-metricas .metrics-panel-head {
  flex: 0 0 auto;
}

#tab-metricas .metrics-toolbar {
  align-items: flex-end;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}

#tab-metricas .metrics-toolbar .toolbar-field {
  flex: 0 1 220px;
  min-width: 130px;
}

#tab-metricas .metrics-toolbar .metrics-date-field {
  flex: 0 0 140px;
  min-width: 120px;
  max-width: 150px;
}

#tab-metricas .metrics-toolbar input {
  padding: 6px 8px;
  font-size: 0.82rem;
}

#tab-metricas .metrics-client-label {
  margin: 0 0 8px;
  font-size: 0.75rem;
}

#tab-metricas .metrics-kpis {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 8px;
}

#tab-metricas .metrics-kpis .stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  margin: 0;
}

#tab-metricas .metrics-kpis .stat-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

#tab-metricas .metrics-kpis .stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

#tab-metricas .metrics-kpis .stat.is-loading .stat-value {
  color: transparent;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--sys-surface) 0%, var(--sys-surface-2) 50%, var(--sys-surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}

#tab-metricas .metrics-workspace {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

#tab-metricas .metrics-panel {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#tab-metricas .metrics-panel > h3 {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
}

#tab-metricas .metrics-panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px 12px;
}

#tab-metricas .metrics-panel-scroll .bar-chart {
  min-height: 140px;
}

/* ── Nutrición — sub-shell con tabs ─────────────────────────────────── */
#tab-comidas .nutrition-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
}

#tab-comidas .nutrition-chrome {
  flex: 0 0 auto;
}

#tab-comidas .nutrition-panel {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  gap: 8px;
}

#tab-comidas .nutrition-panel.active {
  display: flex;
}

#tab-comidas .nutrition-toolbar {
  flex: 0 0 auto;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 10px;
  margin: 0;
}

#tab-comidas .nutrition-toolbar .toolbar-field {
  flex: 0 1 260px;
  min-width: 160px;
}

#tab-comidas .nutrition-toolbar input {
  padding: 6px 8px;
  font-size: 0.82rem;
}

#tab-comidas .nutrition-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

#tab-comidas .nutrition-toolbar-actions .btn-primary,
#tab-comidas .nutrition-toolbar-actions .ghost,
#tab-comidas .nutrition-foods-toolbar .btn-primary,
#tab-comidas .planner-col-head .btn-primary,
#tab-comidas .planner-col-head .ghost {
  width: auto;
  margin: 0;
  padding: 7px 12px;
  font-size: 0.78rem;
}

#tab-comidas .nutrition-client-label {
  margin: 0;
  font-size: 0.75rem;
}

#tab-comidas .nutrition-plan-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.85fr);
  gap: 10px;
}

#tab-comidas .nutrition-plan-main,
#tab-comidas .nutrition-side-card {
  min-height: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#tab-comidas .planner-col-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hairline);
}

#tab-comidas .planner-col-head h3,
#tab-comidas .nutrition-side-card > h3,
#tab-comidas .nutrition-hist-panel > h3 {
  margin: 0;
  padding: 8px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

#tab-comidas .planner-col-head h3 {
  padding: 0;
}

#tab-comidas .nutrition-plan-content,
#tab-comidas .nutrition-plan-history,
#tab-comidas .nutrition-side-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px 12px;
}

#tab-comidas .nutrition-plan-side {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#tab-comidas .nutrition-side-card {
  flex: 1 1 0;
}

#tab-comidas .nutrition-fotos-toolbar {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 10px;
}

#tab-comidas .meals-review-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  padding-right: 2px;
}

#tab-comidas .meal-review-card {
  padding: 10px;
  gap: 6px;
}

#tab-comidas .meal-review-card h4 {
  font-size: 0.85rem;
}

#tab-comidas .meal-photo-thumb,
#tab-comidas .meal-photo-placeholder {
  max-height: 120px;
  object-fit: cover;
}

#tab-comidas .nutrition-historial-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#tab-comidas .nutrition-hist-panel {
  min-height: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#tab-comidas .nutrition-hist-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 12px 12px;
}

#tab-comidas .nutrition-foods-toolbar {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hairline);
}

#tab-comidas .nutrition-foods-toolbar input,
#tab-comidas .nutrition-foods-toolbar select {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font-size: 0.8rem;
}

@media (max-width: 1100px) {
  #tab-metricas .metrics-workspace,
  #tab-planificador .planner-grid,
  #tab-comidas .nutrition-plan-body,
  #tab-comidas .nutrition-historial-grid {
    grid-template-columns: 1fr;
  }
  #tab-metricas .metrics-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  #tab-ejercicios.tab-panel.active,
  #tab-planificador.tab-panel.active,
  #tab-metricas.tab-panel.active,
  #tab-comidas.tab-panel.active {
    overflow-y: auto;
    overflow-x: hidden;
  }
  #tab-planificador .planner-view--metrics {
    overflow-y: visible;
    overflow-x: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  #exercise-catalog .exercise-group:not([open]):hover,
  #exercise-catalog .exercise-group:not([open]):hover .exercise-group-visual {
    transform: none;
  }
}

/* ── Fisioterapia — sub-shell ───────────────────────────────────────── */
#tab-recuperacion.tab-panel.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 0;
}

#tab-recuperacion.is-library .physio-shell,
#tab-recuperacion.is-library #recovery-fab-wrap {
  display: none !important;
}

#tab-recuperacion .recovery-library-pane {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 10px;
  padding: 4px 2px 16px;
  overflow: auto;
}

#tab-recuperacion.is-library .recovery-library-pane {
  display: flex;
}

#tab-recuperacion .recovery-library-pane .list {
  flex: 1 1 auto;
  min-height: 0;
}

#tab-recuperacion .physio-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
  padding-bottom: 72px;
}

#tab-recuperacion .physio-contextbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  flex: 0 0 auto;
  min-width: 0;
}

#tab-recuperacion .physio-contextbar .planner-picker {
  flex: 0 0 auto;
  max-width: none;
}

#tab-recuperacion .planner-picker-trigger {
  width: auto;
  max-width: 220px;
  height: auto;
  min-height: 0;
  padding: 5px 10px 5px 5px;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 650;
  border-radius: 10px;
}

#tab-recuperacion .planner-picker-ico {
  width: 24px;
  height: 24px;
  margin-left: 0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary);
}

#tab-recuperacion .planner-picker-ico .nav-ico {
  display: none;
}

#tab-recuperacion .planner-picker-caret {
  width: 11px !important;
  height: 11px !important;
  opacity: 0.55;
}

#tab-recuperacion .planner-picker-value {
  max-width: 140px;
}

#tab-recuperacion .physio-plan-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 280px;
  min-width: 0;
  flex-wrap: wrap;
}

#tab-recuperacion .physio-plan-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

#tab-recuperacion .physio-plan-meta strong {
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tab-recuperacion .physio-plan-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--muted);
}

#tab-recuperacion .physio-plan-badge.is-active {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--hairline));
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

#tab-recuperacion .physio-plan-badge.is-expired,
#tab-recuperacion .physio-plan-badge.is-empty,
#tab-recuperacion .physio-plan-badge.is-archived {
  color: var(--err, #ef4444);
  border-color: color-mix(in srgb, var(--err, #ef4444) 40%, var(--hairline));
}

#tab-recuperacion .physio-plan-vigencia {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
}

#tab-recuperacion .physio-plan-actions {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

#tab-recuperacion .physio-plan-actions .ghost {
  padding: 5px 9px;
  font-size: 0.72rem;
}

#tab-recuperacion .physio-caseload-filters {
  display: flex;
  gap: 4px;
  padding: 6px 8px 0;
  flex-wrap: wrap;
}

#tab-recuperacion .physio-caseload-filters .ghost {
  padding: 4px 8px;
  font-size: 0.68rem;
}

#tab-recuperacion .physio-caseload-filters .ghost.is-on {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--hairline));
}

#tab-recuperacion .physio-caseload-alerts {
  flex: 1 0 100%;
  margin: 0;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--err, #ef4444) 80%, var(--text));
}

#tab-recuperacion .physio-pick-badges {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

#tab-recuperacion .physio-pick-badge {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
}

#tab-recuperacion .physio-pick-badge.is-warn {
  color: #b45309;
  border-color: color-mix(in srgb, #f59e0b 50%, var(--hairline));
}

#tab-recuperacion .physio-pick-badge.is-alert {
  color: var(--err, #ef4444);
  border-color: color-mix(in srgb, var(--err, #ef4444) 45%, var(--hairline));
}

#tab-recuperacion .physio-decision-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 0 0 auto;
}

#tab-recuperacion .physio-mini-chart {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 8px;
  min-width: 0;
}

#tab-recuperacion .physio-mini-chart > .hint {
  margin: 0 0 6px;
  font-size: 0.68rem;
}

#tab-recuperacion .physio-adh-bar {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  overflow: hidden;
}

#tab-recuperacion .physio-adh-bar > span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: inherit;
}

#tab-recuperacion .physio-pain-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 64px;
}

#tab-recuperacion .physio-pain-bar {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

#tab-recuperacion .physio-pain-bar i {
  display: block;
  width: 100%;
  max-width: 14px;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--primary) 70%, #f59e0b);
}

#tab-recuperacion .physio-pain-bar em {
  font-style: normal;
  font-size: 0.55rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

#tab-recuperacion .physio-client-label {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tab-recuperacion .physio-consult-canvas {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#tab-recuperacion .physio-consult-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hairline, var(--border));
}

#tab-recuperacion .physio-consult-ident {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#tab-recuperacion .physio-consult-ident h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: Syne, "Plus Jakarta Sans", sans-serif;
}

#tab-recuperacion .physio-consult-ident h3.physio-injury-title {
  cursor: pointer;
}

#tab-recuperacion .physio-consult-ident h3.physio-injury-title:hover {
  color: var(--primary);
}

#tab-recuperacion .physio-consult-sub {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tab-recuperacion .physio-consult-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#tab-recuperacion .physio-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-weight: 650;
  font-size: 0.78rem;
  cursor: pointer;
}

#tab-recuperacion .physio-stat-chip .physio-stat-k {
  color: var(--muted);
  font-weight: 550;
}

#tab-recuperacion .physio-stat-chip.is-warn {
  border-color: color-mix(in srgb, #f87171 40%, transparent);
  background: color-mix(in srgb, #f87171 12%, transparent);
}

#tab-recuperacion .physio-overflow {
  position: relative;
}

#tab-recuperacion .physio-overflow-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 168px;
  z-index: 30;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--surface-2, #151a1f);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#tab-recuperacion .physio-overflow-menu[hidden] {
  display: none !important;
}

#tab-recuperacion .physio-overflow-menu button {
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 0.82rem;
  cursor: pointer;
}

#tab-recuperacion .physio-overflow-menu button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}

#tab-recuperacion .physio-overflow-menu button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#tab-recuperacion .physio-overflow-menu button.is-danger {
  color: #f87171;
}

#tab-recuperacion .physio-consult-tools .ex-tool-chip-icon,
#tab-recuperacion .physio-consult-tools .icon-btn {
  height: 32px;
  min-width: 32px;
  width: 32px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

#tab-recuperacion .physio-consult-tools .ex-tool-chip-icon:has(.physio-ico-val) {
  width: auto;
  padding: 0 8px;
}

#tab-recuperacion .physio-ico-val {
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 1px;
}

#tab-recuperacion .physio-ficha-alert {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 35%, var(--hairline));
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  font-size: 0.78rem;
}

#tab-recuperacion .physio-consult-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
}

#tab-recuperacion .physio-consult-empty p {
  margin: 0;
  color: var(--muted);
}

#tab-recuperacion .physio-consult-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

/* Fila 1: mapa + EVA lado a lado — visible al entrar */
#tab-recuperacion .physio-consult-primary {
  flex: 0 0 auto;
  min-height: clamp(340px, 48vh, 520px);
  max-height: 56vh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  min-width: 0;
  border-bottom: 1px solid var(--hairline);
}

#tab-recuperacion .physio-map-col {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(55% 45% at 50% 28%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 70%),
    color-mix(in srgb, var(--sys-bg) 55%, #050807);
}

#tab-recuperacion .physio-consult-side {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-left: 1px solid var(--hairline);
  border-top: none;
  background: color-mix(in srgb, var(--sys-bg) 35%, transparent);
}

#tab-recuperacion .physio-insights-band {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 12px 14px;
  background: color-mix(in srgb, var(--sys-bg) 42%, transparent);
}

#tab-recuperacion .physio-insight-card {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--sys-bg) 55%, transparent);
  display: flex;
  flex-direction: column;
  min-height: 148px;
}

#tab-recuperacion .physio-adh-gauge-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
}

#tab-recuperacion .physio-adh-gauge {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--primary) 35%, transparent));
}

#tab-recuperacion .physio-adh-gauge-bg {
  fill: none;
  stroke: color-mix(in srgb, var(--muted) 20%, transparent);
  stroke-width: 7;
}

#tab-recuperacion .physio-adh-gauge-fg {
  fill: none;
  stroke: url(#physio-adh-grad);
  stroke-width: 7;
  stroke-linecap: round;
}

#tab-recuperacion .physio-adh-gauge-wrap--low .physio-adh-gauge-fg {
  stroke: var(--err, #ef4444);
}

#tab-recuperacion .physio-adh-gauge-wrap--mid .physio-adh-gauge-fg {
  stroke: var(--primary);
}

#tab-recuperacion .physio-adh-gauge-wrap--ok .physio-adh-gauge-fg {
  stroke: var(--ok, #22c55e);
}

#tab-recuperacion .physio-adh-gauge-pct {
  font-size: 16px;
  font-weight: 800;
  fill: var(--text);
  font-family: Syne, "Plus Jakarta Sans", sans-serif;
}

#tab-recuperacion .physio-adh-gauge-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#tab-recuperacion .physio-adh-gauge-meta strong {
  font-size: 1.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

#tab-recuperacion .physio-adh-gauge-meta strong span {
  color: var(--muted);
  font-weight: 600;
}

#tab-recuperacion .physio-adh-gauge-meta > span {
  font-size: 0.68rem;
  color: var(--text);
}

#tab-recuperacion .physio-adh-gauge-meta em {
  font-style: normal;
  font-size: 0.62rem;
  color: var(--muted);
}

#tab-recuperacion .physio-pain-svg {
  width: 100%;
  height: 130px;
  min-height: 130px;
  display: block;
}

.physio-pain-rect {
  fill: color-mix(in srgb, var(--primary) 78%, #fff);
}

.physio-pain-bar-val {
  font-size: 9px;
  font-weight: 700;
  fill: var(--text);
  font-family: "Plus Jakarta Sans", sans-serif;
}

.physio-pain-bar-date {
  font-size: 8px;
  fill: var(--muted);
  font-family: "Plus Jakarta Sans", sans-serif;
}

.physio-chart-yunit {
  font-size: 7px;
  fill: var(--muted);
}

#tab-recuperacion .physio-week-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

#tab-recuperacion .physio-week-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

#tab-recuperacion .physio-week-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1;
}

#tab-recuperacion .physio-week-nav span {
  font-size: 0.62rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#tab-recuperacion .physio-hep-days--week {
  gap: 6px;
  min-height: 72px;
}

#tab-recuperacion .physio-hep-days--week .physio-hep-day i {
  max-width: 100%;
  height: 36px;
}

#tab-recuperacion .physio-hep-days--week .physio-hep-day em {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text);
}

#tab-recuperacion .physio-hep-days--week .physio-hep-day span {
  font-size: 0.5rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

#tab-recuperacion .physio-hep-day.is-empty i {
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--muted) 30%, transparent);
  opacity: 0.5;
}

#tab-recuperacion .physio-insight-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#tab-recuperacion .physio-insight-body .hint {
  margin: auto 0;
  text-align: center;
  font-size: 0.68rem;
}

#tab-recuperacion .physio-hep-days {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  min-height: 52px;
  flex: 1 1 auto;
}

#tab-recuperacion .physio-hep-day {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#tab-recuperacion .physio-hep-day i {
  display: block;
  width: 100%;
  max-width: 14px;
  height: 28px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--muted) 28%, transparent);
}

#tab-recuperacion .physio-hep-day.is-done i {
  background: var(--primary);
}

#tab-recuperacion .physio-hep-day.is-pending i {
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  border: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent);
}

#tab-recuperacion .physio-hep-day em {
  font-style: normal;
  font-size: 0.52rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

#tab-recuperacion .physio-hep-plan-pct {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.1;
}

#tab-recuperacion .physio-map-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 8px 10px 4px;
}

#tab-recuperacion .physio-map-hint {
  margin: 0;
  font-size: 0.68rem;
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tab-recuperacion #recovery-fab-wrap {
  display: flex;
  z-index: 50;
}

#tab-recuperacion .physio-map-view-toggle .ghost {
  width: auto;
  margin: 0;
  padding: 7px 12px;
  font-size: 0.78rem;
}

#tab-recuperacion .physio-ident-head {
  gap: 6px;
}

#tab-recuperacion .physio-ident-head h3 {
  margin-right: 2px;
}

#tab-recuperacion .physio-ident-head .icon-btn,
#tab-recuperacion .physio-ident-head .ex-tool-chip-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

#recovery-recommend-dialog .recovery-rec-item,
#recovery-copilot-dialog .recovery-rec-item {
  display: grid;
  grid-template-columns: auto 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
}

#recovery-recommend-dialog .recovery-rec-item .exercise-thumb,
#recovery-copilot-dialog .recovery-rec-item .exercise-thumb,
#recovery-recommend-dialog .recovery-rec-item .exercise-thumb-fallback {
  width: 52px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

#tab-recuperacion .physio-eva-copy {
  margin: 0;
  font-size: 0.72rem;
}

#tab-recuperacion .physio-eva-consult {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex: 0 0 auto;
  padding: 2px 0 4px;
}

.physio-eva-scale {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  width: 100%;
}

.physio-eva-scale input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  accent-color: var(--primary);
}

.physio-eva-scale input[type="range"]:focus {
  outline: none;
}

.physio-eva-scale input[type="range"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 70%, transparent);
  outline-offset: 3px;
  border-radius: 8px;
}

.physio-eva-scale input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border: none;
  border-radius: 99px;
  background: linear-gradient(
    to right,
    var(--primary) 0,
    var(--primary) var(--eva-pct, 30%),
    color-mix(in srgb, var(--muted) 42%, transparent) var(--eva-pct, 30%),
    color-mix(in srgb, var(--muted) 42%, transparent) 100%
  );
}

.physio-eva-scale input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid color-mix(in srgb, var(--primary) 35%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

.physio-eva-scale input[type="range"]::-moz-range-track {
  height: 3px;
  border: none;
  border-radius: 99px;
  background: color-mix(in srgb, var(--muted) 42%, transparent);
}

.physio-eva-scale input[type="range"]::-moz-range-progress {
  height: 3px;
  border: none;
  border-radius: 99px;
  background: var(--primary);
}

.physio-eva-scale input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--primary) 35%, #fff);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

.physio-eva-ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 7px;
  pointer-events: none;
}

.physio-eva-ticks span {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1.15em;
  gap: 3px;
  font-size: 0.58rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  line-height: 1;
}

.physio-eva-ticks span::before {
  content: "";
  width: 1px;
  height: 5px;
  background: color-mix(in srgb, var(--muted) 55%, transparent);
}

.physio-eva-ticks span.is-current {
  color: var(--primary);
  font-weight: 700;
}

.physio-eva-ticks span.is-current::before {
  background: var(--primary);
}

#tab-recuperacion .physio-eva-consult-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

#tab-recuperacion .physio-eva-consult-actions output {
  min-width: 1.35em;
  text-align: right;
  font-size: 1.12rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--primary);
}

#tab-recuperacion .physio-eva-consult .btn-primary {
  width: auto;
  margin: 0;
  padding: 6px 12px;
  font-size: 0.74rem;
}

#tab-recuperacion .physio-eva-trend {
  margin: 0;
  font-size: 0.72rem;
}

.hep-session-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 2px;
  border-bottom: 1px solid var(--hairline);
}

.hep-session-row:last-child { border-bottom: none; }

.hep-session-row .exercise-thumb,
.hep-session-row .exercise-thumb-fallback,
.hep-session-row .exercise-thumb-wrap {
  width: 44px;
  height: 34px;
  border-radius: 7px;
  object-fit: cover;
}

.hep-session-meta {
  min-width: 0;
}

.hep-session-meta h4 {
  margin: 0;
  font-size: 0.82rem;
  font-family: Syne, "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

.hep-session-meta .hint {
  margin: 2px 0 0;
  font-size: 0.68rem;
}

.hep-dose {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.hep-dose-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hep-dose-field span {
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.hep-dose input {
  width: 46px;
  padding: 4px 6px;
  font-size: 0.78rem;
  text-align: center;
}

.hep-dose-x {
  align-self: center;
  padding-top: 12px;
  color: var(--muted);
  font-weight: 700;
}

#tab-recuperacion .recovery-rec-item {
  display: grid;
  grid-template-columns: auto 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
}

#tab-recuperacion .pain-point-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#tab-recuperacion .pain-point-del {
  flex: 0 0 auto;
}

#tab-recuperacion .physio-map-stage {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 8px 8px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--hairline) 80%, transparent);
  background:
    radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 52%),
    linear-gradient(180deg, #12171c 0%, #0c1014 100%);
}

#tab-recuperacion .body-pain-map {
  width: 100%;
  height: 100%;
  max-width: 300px;
  max-height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 6px 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#tab-recuperacion .body-pain-map .bpm-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tab-recuperacion .body-pain-map--vector .bpm-svg {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

#tab-recuperacion .bpm-view--vector {
  max-width: 100%;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#tab-recuperacion .bpm-view-label {
  display: none;
}

#tab-recuperacion .bpm-legend {
  padding: 4px 4px 0;
}

#tab-recuperacion .physio-adh-pct {
  margin-top: 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

#tab-recuperacion .physio-adh-pct span {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  margin-left: 4px;
}

#tab-recuperacion .physio-pain-bars {
  flex: 1 1 auto;
  min-height: 48px;
}

#tab-recuperacion .physio-progress-meta {
  display: none;
}

#tab-recuperacion .physio-eva-trend {
  display: none;
}

#tab-recuperacion .physio-eva-chart {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  background: color-mix(in srgb, var(--sys-bg) 55%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 12px 8px;
}

#tab-recuperacion .physio-eva-chart .physio-eva-svg--wide {
  flex: 1 1 auto;
  width: 100%;
  min-height: 120px;
  max-height: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

#tab-recuperacion .physio-eva-chart .physio-chart-head {
  flex: 0 0 auto;
}

#tab-recuperacion .physio-eva-chart .physio-eva-axis {
  flex: 0 0 auto;
}

#tab-recuperacion .physio-eva-chart .physio-chart-foot {
  flex: 0 0 auto;
  margin-top: auto;
}

#tab-recuperacion .physio-chart-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--text);
}

#tab-recuperacion .physio-chart-unit,
.physio-chart-unit {
  font-weight: 500;
  color: var(--muted);
}

#tab-recuperacion .physio-chart-stats {
  margin: 2px 0 0;
  font-size: 0.68rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

#tab-recuperacion .physio-chart-stats strong {
  color: var(--text);
  font-size: 0.82rem;
}

#tab-recuperacion .physio-chart-stats .is-good { color: var(--ok, #22c55e); }
#tab-recuperacion .physio-chart-stats .is-bad { color: var(--err, #ef4444); }

#tab-recuperacion .physio-chart-foot {
  margin: 0;
  font-size: 0.62rem;
  color: var(--muted);
  flex: 0 0 auto;
}

#tab-recuperacion .physio-mini-chart-title {
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--text);
}

.physio-chart-grid {
  stroke: color-mix(in srgb, var(--muted) 22%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.physio-chart-ylabel,
.physio-chart-thresh-label {
  font-size: 8px;
  fill: var(--muted);
  font-family: "Plus Jakarta Sans", sans-serif;
}

.physio-chart-thresh-label {
  fill: color-mix(in srgb, var(--err, #ef4444) 75%, var(--muted));
}

#tab-recuperacion .physio-eva-svg {
  flex: 0 0 auto;
  width: 100%;
  height: 150px;
  min-height: 150px;
  max-height: 150px;
  display: block;
}

#tab-recuperacion .physio-decision-charts {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#tab-recuperacion .physio-adh-bar--ok > span { background: var(--ok, #22c55e); }
#tab-recuperacion .physio-adh-bar--mid > span { background: var(--primary); }
#tab-recuperacion .physio-adh-bar--low > span { background: var(--err, #ef4444); }

#tab-recuperacion .physio-pain-bars-wrap {
  display: flex;
  gap: 6px;
  align-items: stretch;
  min-height: 56px;
}

#tab-recuperacion .physio-pain-yaxis {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.58rem;
  color: var(--muted);
  padding: 0 0 14px;
  font-variant-numeric: tabular-nums;
}

#tab-recuperacion .physio-pain-bar .physio-pain-val {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--text);
  font-style: normal;
  line-height: 1;
}

#tab-recuperacion .physio-pain-bar .physio-pain-date {
  font-size: 0.56rem;
}

.physio-eva-dialog {
  --modal-w: 420px;
  --modal-max-h: min(70svh, 380px);
}

.physio-eva-dialog .physio-eva-consult-actions {
  justify-content: center;
  margin-top: 8px;
}

.physio-eva-dialog .physio-eva-consult-actions output {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
}

#tab-recuperacion .physio-pain-list {
  margin: 0;
  flex: 0 0 auto;
  max-height: 88px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 0 10px 8px;
}

#tab-recuperacion .physio-pain-list li {
  padding: 5px 8px;
  margin-bottom: 3px;
  font-size: 0.74rem;
}

#tab-recuperacion .physio-eva-chart:has(> .hint:only-child) {
  justify-content: center;
  align-items: center;
  text-align: center;
}

#tab-recuperacion .physio-eva-consult.is-pulse {
  border-radius: 10px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  padding: 4px 6px;
  transition: box-shadow 180ms ease-out, background 180ms ease-out;
}

#tab-recuperacion .physio-hep-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex: 0 0 auto;
}

#tab-recuperacion .physio-hep-copy {
  margin: 0;
  font-size: 0.7rem;
}

.hep-plan-root {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

#tab-recuperacion .physio-map-view-toggle {
  display: inline-flex;
  gap: 0;
  padding: 2px;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background: color-mix(in srgb, var(--sys-bg) 40%, transparent);
  flex: 0 0 auto;
}

#tab-recuperacion .physio-map-view-toggle .ghost {
  border: none;
  border-radius: 7px;
  padding: 5px 14px;
  background: transparent;
  font-weight: 650;
}

#tab-recuperacion .physio-map-view-toggle .ghost.active {
  border-color: transparent;
  background: color-mix(in srgb, var(--primary) 22%, var(--sys-surface));
  color: var(--text);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

#tab-recuperacion .physio-mini-heading {
  margin: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  flex: 0 0 auto;
}

#tab-recuperacion .body-pain-map--vector,
#tab-recuperacion .body-pain-map--photo {
  padding: 4px 8px 6px;
}

#tab-recuperacion .body-pain-map-hint {
  inset: auto 12px 36px 12px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(11, 13, 16, 0.78);
  font-size: 0.7rem;
  z-index: 3;
}

@media (max-width: 1100px) {
  #tab-recuperacion .physio-consult-primary {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(280px, 42vh) minmax(220px, auto);
    max-height: none;
  }
  #tab-recuperacion .physio-consult-side {
    border-left: none;
    border-top: 1px solid var(--hairline);
  }
  #tab-recuperacion .physio-insights-band {
    grid-template-columns: 1fr;
  }
  #tab-recuperacion .physio-consult-head {
    flex-wrap: wrap;
  }
}

@media (max-width: 800px) {
  #tab-recuperacion.tab-panel.active { overflow-y: auto; }
}
/* ═══════════════════════════════════════════════════════════════════════
   Portal polish pass — shell + Relación/Negocio/Wellness (2026-08-03)
   ═══════════════════════════════════════════════════════════════════════ */

.page-title {
  font-family: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0;
  font-stretch: normal;
  font-synthesis: none;
  transform: none;
  line-height: 1.2;
}

.page-breadcrumb {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 650;
}

.workspace-lede {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  align-self: center;
  max-width: 36ch;
}

/* Icon buttons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface) 70%, transparent);
  color: var(--text);
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.icon-btn .nav-ico { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.icon-btn:hover:not(:disabled) {
  transform: scale(1.06);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.icon-btn.danger:hover:not(:disabled) {
  border-color: color-mix(in srgb, #ef4444 50%, var(--border));
  color: #f87171;
  background: color-mix(in srgb, #ef4444 12%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 16%, transparent);
}
.icon-btn-primary,
label.icon-btn-primary {
  background: var(--primary);
  border-color: transparent;
  color: var(--on-primary, #fff);
}
.icon-btn-primary:hover:not(:disabled),
label.icon-btn-primary:hover {
  background: color-mix(in srgb, var(--primary) 88%, #fff);
  color: var(--on-primary, #fff);
}
.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
}
.btn-with-icon .nav-ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.9; }
label.files-upload-btn { margin: 0; cursor: pointer; }

/* Collapsible sidebar — expand/collapse lives in sidebar footer, not under logo */
.sidebar-brand-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.sidebar-expand-foot {
  position: relative;
  z-index: 1;
  display: flex;
  margin-left: 0;
  margin-top: auto;
  flex: 0 0 auto;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sidebar-bg) 94%, #000);
}
.sidebar-brand-actions .icon-btn,
.sidebar-expand-foot .icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
/* Desktop: sin botón "ocultarme" — solo rail↔expand */
.sidebar-hide-desktop,
#sidebar-hide-toggle {
  display: none !important;
}
/* Floating reopen lives in a reserved topbar slot when sidebar is hidden */
:root {
  --sidebar-reopen-size: 42px;
  --sidebar-reopen-inset: 12px;
  --sidebar-reopen-gap: 12px;
  --sidebar-reopen-clearance: calc(
    var(--sidebar-reopen-inset) + var(--sidebar-reopen-size) + var(--sidebar-reopen-gap)
  );
}
.sidebar-reopen {
  position: fixed;
  left: var(--sidebar-reopen-inset);
  top: calc((var(--header-h) - var(--sidebar-reopen-size)) / 2);
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--sidebar-reopen-size);
  height: var(--sidebar-reopen-size);
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface) 92%, transparent);
  color: var(--text);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  cursor: pointer;
}
.sidebar-reopen .nav-ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.sidebar-reopen:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

html[data-sidebar-mode="icons"],
html[data-sidebar-mode="rail"] {
  --sidebar-w: 76px;
}

/* Section rail icons: only in icons mode (hidden when expanded / mobile) */
.nav-section-label > .nav-ico {
  display: none;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  opacity: 0.78;
}

/* Desktop rail: one icon per SECTION — hide leaf children */
@media (min-width: 901px) {
  html[data-sidebar-mode="icons"] .sidebar-brand-block,
  html[data-sidebar-mode="icons"] .sidebar-brand-sub,
  html[data-sidebar-mode="icons"] .nav-item > span,
  html[data-sidebar-mode="icons"] .nav-section-label > span,
  html[data-sidebar-mode="icons"] .nav-section-label .nav-chevron,
  html[data-sidebar-mode="icons"] .sidebar .user-chip-copy,
  html[data-sidebar-mode="icons"] .sidebar .user-chip .nav-chevron,
  html[data-sidebar-mode="rail"] .sidebar-brand-block,
  html[data-sidebar-mode="rail"] .sidebar-brand-sub,
  html[data-sidebar-mode="rail"] .nav-item > span,
  html[data-sidebar-mode="rail"] .nav-section-label > span,
  html[data-sidebar-mode="rail"] .nav-section-label .nav-chevron,
  html[data-sidebar-mode="rail"] .sidebar .user-chip-copy,
  html[data-sidebar-mode="rail"] .sidebar .user-chip .nav-chevron {
    display: none !important;
  }
  /* Undo prior force-show of leaves — children live in flyout only */
  html[data-sidebar-mode="icons"] .nav-group-items,
  html[data-sidebar-mode="rail"] .nav-group-items {
    display: none !important;
  }
  html[data-sidebar-mode="icons"] .nav-section-label,
  html[data-sidebar-mode="rail"] .nav-section-label {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: 10px 0;
    margin: 0;
    border-radius: 10px;
    color: var(--muted);
    letter-spacing: 0;
    text-transform: none;
    font-size: 0;
  }
  html[data-sidebar-mode="icons"] .nav-section-label > .nav-ico,
  html[data-sidebar-mode="rail"] .nav-section-label > .nav-ico {
    display: block;
  }
  html[data-sidebar-mode="icons"] .nav-item .usuarios-subnav-badge,
  html[data-sidebar-mode="rail"] .nav-item .usuarios-subnav-badge {
    display: none !important;
  }
  html[data-sidebar-mode="icons"] .sidebar-brand,
  html[data-sidebar-mode="rail"] .sidebar-brand {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 18px 8px 16px;
    overflow: hidden;
    min-width: 0;
  }
  html[data-sidebar-mode="icons"] .sidebar-brand > .logo-img,
  html[data-sidebar-mode="icons"] #sidebar-logo,
  html[data-sidebar-mode="rail"] .sidebar-brand > .logo-img,
  html[data-sidebar-mode="rail"] #sidebar-logo {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    margin: 0;
    border-radius: 0;
    object-fit: contain;
  }
  html[data-sidebar-mode="icons"] .sidebar-expand-foot,
  html[data-sidebar-mode="rail"] .sidebar-expand-foot,
  html[data-sidebar-mode="icons"] .sidebar-brand-actions,
  html[data-sidebar-mode="rail"] .sidebar-brand-actions {
    flex-direction: column;
    justify-content: center;
    margin-left: 0;
    gap: 4px;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 8px 8px 12px;
  }
  html[data-sidebar-mode="icons"] .sidebar-expand-foot .icon-btn,
  html[data-sidebar-mode="rail"] .sidebar-expand-foot .icon-btn,
  html[data-sidebar-mode="icons"] .sidebar-brand-actions .icon-btn,
  html[data-sidebar-mode="rail"] .sidebar-brand-actions .icon-btn {
    width: 100%;
    height: auto;
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
  }
  html[data-sidebar-mode="icons"] .sidebar-expand-foot .icon-btn .nav-ico,
  html[data-sidebar-mode="rail"] .sidebar-expand-foot .icon-btn .nav-ico {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
    opacity: 0.78;
  }
  html[data-sidebar-mode="icons"] .sidebar-expand-foot .icon-btn:hover:not(:disabled),
  html[data-sidebar-mode="rail"] .sidebar-expand-foot .icon-btn:hover:not(:disabled) {
    transform: none;
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--primary);
    box-shadow: none;
  }
  html[data-sidebar-mode="icons"] .sidebar-expand-foot .icon-btn:hover:not(:disabled) .nav-ico,
  html[data-sidebar-mode="rail"] .sidebar-expand-foot .icon-btn:hover:not(:disabled) .nav-ico {
    opacity: 1;
  }
  html[data-sidebar-mode="icons"] .nav-section,
  html[data-sidebar-mode="rail"] .nav-section {
    margin-bottom: 4px;
  }
  html[data-sidebar-mode="icons"] .user-chip,
  html[data-sidebar-mode="rail"] .user-chip {
    justify-content: center;
    padding-inline: 8px;
  }
  html[data-sidebar-mode="icons"] .sidebar-nav,
  html[data-sidebar-mode="rail"] .sidebar-nav { padding-inline: 8px; }

  /* Active / open section = orange on SECTION icon only */
  html[data-sidebar-mode="icons"] .nav-section-label:hover,
  html[data-sidebar-mode="icons"] .nav-section.is-flyout-open > .nav-section-label,
  html[data-sidebar-mode="icons"] .nav-section.has-active > .nav-section-label,
  html[data-sidebar-mode="rail"] .nav-section-label:hover,
  html[data-sidebar-mode="rail"] .nav-section.is-flyout-open > .nav-section-label,
  html[data-sidebar-mode="rail"] .nav-section.has-active > .nav-section-label {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--primary);
  }
  html[data-sidebar-mode="icons"] .nav-section-label:hover > .nav-ico,
  html[data-sidebar-mode="icons"] .nav-section.is-flyout-open > .nav-section-label > .nav-ico,
  html[data-sidebar-mode="icons"] .nav-section.has-active > .nav-section-label > .nav-ico,
  html[data-sidebar-mode="rail"] .nav-section-label:hover > .nav-ico,
  html[data-sidebar-mode="rail"] .nav-section.is-flyout-open > .nav-section-label > .nav-ico,
  html[data-sidebar-mode="rail"] .nav-section.has-active > .nav-section-label > .nav-ico {
    color: var(--primary);
    opacity: 1;
  }
  html[data-sidebar-mode="icons"] .nav-section.has-active > .nav-section-label,
  html[data-sidebar-mode="rail"] .nav-section.has-active > .nav-section-label {
    box-shadow: inset 3px 0 0 var(--primary);
  }
}

/* Dropi-style flyout — body-fixed, dark FitOS */
.nav-rail-flyout {
  position: fixed;
  z-index: 240;
  min-width: 220px;
  max-width: min(280px, calc(100vw - 96px));
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface, #141a18) 96%, #000);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--text);
  pointer-events: auto;
}
.nav-rail-flyout[hidden] { display: none !important; }
/* Section header ≠ selected row: muted caps + divider */
.nav-rail-flyout-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 10px;
  margin: 2px 4px 4px;
  border-radius: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}
.nav-rail-flyout-head .nav-ico {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  opacity: 0.55;
  color: var(--muted);
}
.nav-rail-flyout-title { min-width: 0; }
.nav-rail-flyout-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0 2px;
}
.nav-rail-flyout-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast, 120ms) ease, color var(--dur-fast, 120ms) ease;
}
.nav-rail-flyout-item .nav-ico {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  opacity: 0.75;
}
.nav-rail-flyout-item:hover {
  background: color-mix(in srgb, var(--sys-surface) 70%, transparent);
  color: var(--text);
}
.nav-rail-flyout-item:hover .nav-ico { opacity: 1; }
.nav-rail-flyout-item.is-active {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
  font-weight: 600;
}
.nav-rail-flyout-item.is-active .nav-ico {
  color: var(--primary);
  opacity: 1;
}

html[data-sidebar-mode="hidden"] .sidebar {
  transform: translateX(-110%);
  pointer-events: none;
}
html[data-sidebar-mode="hidden"] {
  --sidebar-w: 0px;
}
html[data-sidebar-mode="hidden"] .main-area {
  margin-left: 0;
  width: 100%;
}
/* Reserve chrome so page titles (Planificador, etc.) never sit under the reopen control */
html[data-sidebar-mode="hidden"] .page-header {
  padding-left: var(--sidebar-reopen-clearance);
}
html[data-sidebar-mode="hidden"] .sidebar-reopen {
  display: inline-flex;
}
html[data-sidebar-mode="hidden"] .sidebar-reopen[hidden] {
  display: inline-flex !important;
}

/* Narrow: in-header .sidebar-toggle owns the control — no floating button / no extra pad */
@media (max-width: 900px) {
  html[data-sidebar-mode="hidden"] .page-header {
    padding-left: 16px;
  }
  html[data-sidebar-mode="hidden"] .sidebar-reopen,
  html[data-sidebar-mode="hidden"] .sidebar-reopen[hidden] {
    display: none !important;
  }
  .nav-rail-flyout { display: none !important; }
}

/* Fill-height tabs */
#tab-encuestas.tab-panel.active,
#tab-archivos.tab-panel.active,
#tab-clases-vod.tab-panel.active,
#tab-wellness.tab-panel.active,
#tab-pagos.tab-panel.active,
#tab-permisos.tab-panel.active,
#tab-diagnostico.tab-panel.active,
#tab-mensajes.tab-panel.active,
#tab-etiquetas.tab-panel.active,
#tab-marca.tab-panel.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 0;
}

/* Plantillas wellness (biblioteca): sin cliente ni asignar — solo catálogo/CRUD. */
#tab-wellness.is-library .wellness-toolbar {
  display: none !important;
}
#tab-wellness.is-library .wellness-subnav [data-wellness-panel="hoy"],
#tab-wellness.is-library .wellness-subnav [data-wellness-panel="hrv"] {
  display: none !important;
}
#tab-wellness.is-library #wellness-panel-habitos .workspace-side,
#tab-wellness.is-library #wellness-panel-mindfulness .workspace-side {
  display: none !important;
}
#tab-wellness.is-library #wellness-panel-habitos .workspace-split,
#tab-wellness.is-library #wellness-panel-mindfulness .workspace-split {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
}
#tab-wellness.is-library #wellness-panel-habitos .workspace-main,
#tab-wellness.is-library #wellness-panel-mindfulness .workspace-main {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-height: 0;
}
#tab-wellness .workspace-main-head.wellness-lib-head .btn-primary,
#tab-wellness .workspace-main-head .btn-primary.sm {
  width: auto;
  margin-top: 0;
  flex-shrink: 0;
}
#tab-wellness .wellness-programs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 4px 0 12px;
}
#tab-wellness .wellness-programs-list > li.wellness-program-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-surface) 70%, transparent);
}
#tab-wellness .wellness-programs-list > li.wellness-program-row:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--hairline));
  background: color-mix(in srgb, var(--sys-surface-2) 55%, transparent);
}
#tab-wellness .wellness-program-row-main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#tab-wellness .wellness-program-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.92rem;
  line-height: 1.3;
}
#tab-wellness .wellness-program-row-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tab-wellness .wellness-program-icon {
  flex-shrink: 0;
}
#tab-wellness .wellness-program-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#tab-wellness .wellness-tipo-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--hairline));
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--text);
}
#tab-wellness .wellness-program-meta {
  margin: 0;
  font-size: 0.74rem;
}
#tab-wellness .wellness-programs-empty {
  border-style: dashed;
  text-align: center;
  padding: 28px 16px;
}

#tab-encuestas .panel-desc,
#tab-archivos .panel-desc,
#tab-clases-vod .panel-desc,
#tab-wellness .panel-desc,
#tab-pagos .panel-desc,
#tab-permisos .panel-desc,
#tab-diagnostico .panel-desc,
#tab-mensajes .panel-desc,
#tab-etiquetas .panel-desc,
#tab-marca .panel-desc { display: none; }

/* Survey */
.survey-workspace { gap: 8px; }
.survey-table-shell { flex: 1 1 auto; min-height: 0; }
.survey-dense-list { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.survey-dense-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 12px;
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface) 60%, transparent);
}
.survey-dense-list .list-item-title { font-weight: 650; font-size: 0.9rem; }
.survey-dense-list .list-item-meta { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.survey-dense-list .card-body-text {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.survey-dense-list .list-item-actions { display: flex; gap: 4px; }
.survey-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.survey-modal-meta.form-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 16px;
  flex: 0 0 auto;
}
@media (min-width: 640px) {
  .survey-modal-meta.form-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .survey-modal-meta.form-2col .field.span-2 { grid-column: 1 / -1; }
}
.survey-modal-meta .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.survey-modal-meta textarea {
  min-height: 72px;
  resize: vertical;
  field-sizing: content;
}
.survey-modal-questions {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
}
.survey-modal-questions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hairline);
}
.survey-modal-questions-head h4 { margin: 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.survey-questions-scroll {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: min(36vh, 320px);
  overflow-y: auto;
  padding: 10px 12px;
  scrollbar-width: thin;
}

/* Files / VOD / Tags / Brand / Pagos workspaces already use .workspace */

/* Chat */
.chat-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(240px, 0.95fr) minmax(0, 1.35fr);
  gap: 10px;
  overflow: hidden;
}
.chat-inbox,
.chat-thread {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-surface) 55%, transparent);
  overflow: hidden;
}
.chat-inbox-head,
.chat-thread-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hairline);
}
.chat-inbox-head h3,
.chat-thread-head h3 { margin: 0; font-size: 0.9rem; font-weight: 700; }
.chat-create-panel { margin: 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--hairline); }
.chat-conv-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  scrollbar-width: thin;
}
.chat-conv-list > li { margin: 0 0 4px; padding: 0; border: 0; background: transparent; }
.chat-conv-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.chat-conv-btn:hover,
.chat-conv-btn[aria-current="true"] {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 55%, transparent);
}
.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--primary) 22%, var(--sys-surface));
  color: var(--text);
}
.chat-conv-name { font-weight: 650; font-size: 0.84rem; }
.chat-conv-preview { font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-unread-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary, #fff);
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
}
.chat-thread-actions { display: flex; gap: 4px; }
.chat-msg-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  max-height: none !important;
}
.chat-msg-list > li {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  list-style: none;
}
.chat-bubble {
  max-width: min(78%, 520px);
  padding: 8px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--sys-surface-2) 80%, transparent);
  border: 1px solid var(--hairline);
}
.chat-bubble.is-mine {
  margin-left: auto;
  background: color-mix(in srgb, var(--primary-soft) 70%, var(--sys-surface));
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
.chat-bubble-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: 3px;
}
.chat-bubble-body { font-size: 0.86rem; line-height: 1.4; white-space: pre-wrap; }
.chat-composer {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 10px 12px;
  border-top: 1px solid var(--hairline);
  margin: 0;
}
.chat-composer textarea {
  min-height: 40px;
  max-height: 120px;
  resize: none;
  margin: 0;
  border-radius: 12px;
}

/* Wellness */
.wellness-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
}
.wellness-toolbar .wellness-client-field { flex: 0 1 260px; min-width: 160px; max-width: 280px; }
.wellness-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.wellness-panel { display: none; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.wellness-panel.active { display: flex; flex-direction: column; }
.wellness-hrv-panel { flex: 1 1 auto; }
.side-mini-title {
  margin: 10px 0 6px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.wellness-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

/* Pagos */
.pagos-workspace { gap: 8px; }
.pagos-kpi-row {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.pagos-kpi-row .stat {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
}
.pagos-kpi-row .stat strong {
  display: block;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.pagos-kpi-row .stat .stat-label,
.pagos-kpi-row .stat-label {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}
.pagos-kpi-row .stat.ok {
  border-color: color-mix(in srgb, #22c55e 40%, var(--border));
  background: color-mix(in srgb, #22c55e 10%, var(--sys-surface));
}
.pagos-kpi-row .stat.warn {
  border-color: color-mix(in srgb, #f59e0b 45%, var(--border));
  background: color-mix(in srgb, #f59e0b 10%, var(--sys-surface));
}
.pagos-kpi-row .stat.danger {
  border-color: color-mix(in srgb, #ef4444 45%, var(--border));
  background: color-mix(in srgb, #ef4444 10%, var(--sys-surface));
}
.pagos-split { flex: 1 1 auto; min-height: 0; }
.pagos-products-drawer {
  flex: 0 0 auto;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  padding: 0;
  overflow: hidden;
}
.pagos-products-drawer > summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.pagos-products-body { padding: 8px 12px 12px; max-height: 180px; overflow: auto; }
.pagos-assign-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.pagos-assign-inline .btn-primary { width: auto; margin: 0; }

/* Tags / Brand color picker */
.color-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.color-swatch-preview {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  flex: 0 0 auto;
}
.color-picker-row input[type="color"] {
  width: 42px;
  height: 34px;
  padding: 2px;
  border-radius: 8px;
  cursor: pointer;
}
.color-picker-row input[type="text"] {
  width: 7.5rem;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
}
.tags-dense-list > li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.tags-dense-list .tag-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.12);
}
.brand-split { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(240px, 0.95fr) minmax(0, 1.1fr); }
.brand-preview-side { min-height: 0; }
.brand-live-preview {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 12px 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brand-preview-card {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 60%),
    color-mix(in srgb, var(--sys-surface-2) 70%, transparent);
  margin: 0;
}
.brand-preview-card img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  grid-row: 1;
  grid-column: 1;
}
.brand-preview-copy {
  grid-row: 1;
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.brand-preview-card strong {
  font-family: "Syne", "Plus Jakarta Sans", sans-serif;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.brand-preview-card .hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.3;
}
.brand-preview-swatch {
  grid-column: 1 / -1;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--primary);
}

.brand-section-images {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.brand-section-title {
  margin: 0;
  font-size: 0.95rem;
}

.brand-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}

.brand-section-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, transparent);
}

.brand-section-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #111;
}

.brand-section-meta {
  padding: 8px 10px 0;
  font-size: 0.78rem;
}

.brand-section-actions {
  display: flex;
  gap: 6px;
  padding: 8px 10px 10px;
  flex-wrap: wrap;
}

.brand-section-upload {
  cursor: pointer;
}

.brand-section-upload input {
  display: none;
}
#tab-marca .palette-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  overflow: hidden;
  align-content: start;
}
#tab-marca .palette-swatch {
  border-radius: 8px;
  min-width: 0;
}
#tab-marca .palette-swatch .color-block {
  height: 28px;
}
#tab-marca .palette-swatch .color-meta {
  padding: 4px 6px;
  font-size: 0.65rem;
  line-height: 1.25;
}
#tab-marca .palette-swatch .color-meta strong {
  font-size: 0.7rem;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tab-marca .palette-swatch .color-meta code {
  font-size: 0.62rem;
  color: var(--muted);
}
.brand-contrast-note {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.3;
}
.brand-theme-meta {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  margin: 0;
  padding-top: 2px;
  border-top: 1px solid var(--hairline);
}
.brand-meta-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.brand-meta-row span {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.brand-meta-row strong,
.brand-meta-row code {
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-meta-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 500;
  color: var(--text);
}
.brand-edit-form { padding: 12px 14px; gap: 10px; }
.brand-save-btn { width: auto !important; align-self: flex-start; min-width: 160px; }

@media (max-height: 820px) {
  #tab-marca .palette-swatch .color-block { height: 22px; }
  .brand-preview-card { padding: 8px 10px; }
  .brand-live-preview { padding: 8px 10px 10px; gap: 6px; }
}

/* VOD (legacy shell) */
.vod-workspace { gap: 8px; }
.vod-course-grid > li {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--sys-surface) 55%, transparent);
}

/* Videos biblioteca */
.videos-lib-workspace {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 10px;
  min-height: 0;
  height: 100%;
}
.videos-lib-toolbar {
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 10px;
}
.videos-lib-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 2px 28px;
  scrollbar-width: thin;
}
.videos-lib-filter-chips {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  /* Light-mode tokens (was hard dark --fit-* fallbacks → looked like dark mode). */
  background: var(--sys-surface-2, var(--surface-2, #f3f5f4));
  border: 1px solid var(--sys-border, var(--border, #d7ddd9));
}
.videos-lib-filter-chips .ex-scope-tab {
  color: var(--sys-muted, var(--muted, #5b6660));
}
.videos-lib-filter-chips .ex-scope-tab:hover {
  color: var(--sys-text, var(--text, #1a211e));
}
.videos-lib-filter-chips .ex-scope-tab.is-on,
.videos-lib-filter-chips .ex-scope-tab[aria-pressed="true"] {
  background: color-mix(
    in srgb,
    var(--tenant-primary, var(--primary, #b91c1c)) 14%,
    var(--sys-surface, var(--surface, #fff))
  );
  color: var(--sys-text, var(--text, #1a211e));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tenant-primary, var(--primary, #b91c1c)) 28%, transparent);
}
.videos-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  align-content: start;
  align-items: stretch;
}
.videos-lib-grid.is-horizontal-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.videos-lib-grid.is-vertical-grid {
  grid-template-columns: repeat(auto-fill, minmax(148px, 180px));
  justify-content: start;
  gap: 14px 12px;
}
.videos-lib-empty {
  grid-column: 1 / -1;
  padding: 28px 12px;
}
.videos-lib-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 78%, transparent);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.videos-lib-card:hover,
.videos-lib-card:focus-visible {
  border-color: color-mix(in srgb, #f97316 50%, var(--border));
  transform: translateY(-1px);
  outline: none;
}
.videos-lib-card-media {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  background: #0b0d10;
  overflow: hidden;
}
.videos-lib-card.is-horizontal .videos-lib-card-media {
  aspect-ratio: 16 / 9;
}
.videos-lib-card.is-vertical {
  max-width: none;
  width: 100%;
}
.videos-lib-card.is-vertical .videos-lib-card-media {
  aspect-ratio: 9 / 16;
  /* Cap height so tall 9:16 thumbs don't dominate; body (title) stays visible */
  max-height: min(52vh, 320px);
}
.videos-lib-card-thumb,
.videos-lib-card-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.videos-lib-card-ph {
  display: grid;
  place-items: center;
  color: color-mix(in srgb, #fdba74 70%, var(--muted));
}
.videos-lib-card-ph .nav-ico {
  width: 36px;
  height: 36px;
  opacity: 0.75;
}
.videos-lib-card-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #000 62%, transparent);
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
  backdrop-filter: blur(6px);
}
.videos-lib-card:hover .videos-lib-card-play,
.videos-lib-card:focus-within .videos-lib-card-play {
  opacity: 1;
}
.videos-lib-card-play:hover {
  background: color-mix(in srgb, #f97316 72%, #000);
  border-color: color-mix(in srgb, #f97316 55%, transparent);
  transform: translate(-50%, -50%) scale(1.03);
}
.videos-lib-card-play .nav-ico {
  width: 18px;
  height: 18px;
}
.videos-lib-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000 28%, transparent);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.videos-lib-card:hover .videos-lib-card-media::after,
.videos-lib-card:focus-within .videos-lib-card-media::after {
  opacity: 1;
}
.videos-lib-card-aspect {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fde68a;
  border: 1px solid color-mix(in srgb, #f97316 35%, transparent);
}
.videos-lib-card-body {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  padding: 10px 12px 12px;
  border: 0;
  border-top: 1px solid var(--hairline, var(--border));
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  min-width: 0;
  min-height: 4.6rem; /* room for title + tags + foot — never clipped by media */
}
.videos-lib-card-body:hover {
  background: color-mix(in srgb, #f97316 6%, transparent);
}
.videos-lib-card-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Explicit height so clamp never collapses under flex shrink */
  min-height: calc(1.35em * 2);
}
.videos-lib-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
}
.videos-lib-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 650;
  background: color-mix(in srgb, #f97316 14%, transparent);
  color: #fdba74;
  border: 1px solid color-mix(in srgb, #f97316 28%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.videos-lib-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.videos-lib-card-edit-hint {
  font-size: 0.68rem;
  font-weight: 650;
  color: color-mix(in srgb, #f97316 75%, var(--muted));
  opacity: 0.85;
}
.videos-lib-vis {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--muted);
}
.videos-lib-vis.is-on {
  color: color-mix(in srgb, #86efac 80%, var(--text));
}
.videos-lib-vis .nav-ico {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}
.videos-lib-persist-hint {
  margin: 0;
}

.videos-lib-player-shell {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #0b0d10;
  border: 1px solid var(--hairline, var(--border));
  min-height: 180px;
}
.videos-lib-player-shell:fullscreen,
.videos-lib-player-shell:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-height: none;
  border-radius: 0;
  border: 0;
  aspect-ratio: auto;
  background: #000;
}
.videos-lib-player-shell:fullscreen[data-aspect="vertical"],
.videos-lib-player-shell:-webkit-full-screen[data-aspect="vertical"] {
  --vl-v-h: 100vh;
  width: min(100vw, calc(100vh * 9 / 16));
  height: 100vh;
  max-width: 100vw;
  margin: 0 auto;
}
.videos-lib-player-shell[data-aspect="horizontal"] {
  aspect-ratio: 16 / 9;
}
/* Vertical: fijar alto y derivar ancho 9:16 (evitar max-height + width fijo → barras negras). */
.videos-lib-player-shell[data-aspect="vertical"] {
  --vl-v-h: min(58vh, 520px);
  aspect-ratio: 9 / 16;
  height: var(--vl-v-h);
  width: min(100%, calc(var(--vl-v-h) * 9 / 16));
  max-width: 100%;
  margin-inline: auto;
  min-height: 0;
}
.videos-lib-player-frame,
.videos-lib-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}
/* Shorts/YT en embed suelen pillarbox; ampliar iframe y recortar lados. */
.videos-lib-player-shell[data-aspect="vertical"] .videos-lib-player-frame {
  overflow: hidden;
}
.videos-lib-player-shell[data-aspect="vertical"] .videos-lib-embed {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(1.55);
  transform-origin: center center;
}
.videos-lib-player-loading,
.videos-lib-player-empty {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  color: color-mix(in srgb, #fff 78%, var(--muted));
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, #f97316 18%, #0b0d10), #0b0d10 70%);
  font-size: 0.88rem;
}
.videos-lib-player-loading[hidden],
.videos-lib-player-empty[hidden],
.videos-lib-player-overlay[hidden] {
  display: none !important;
}
.videos-lib-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, #fff 18%, transparent);
  border-top-color: #f97316;
  animation: videosLibSpin 0.75s linear infinite;
}
@keyframes videosLibSpin {
  to { transform: rotate(360deg); }
}
.videos-lib-player-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #000 35%, transparent);
  pointer-events: none;
}
.videos-lib-big-play {
  pointer-events: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #fff 30%, transparent);
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.videos-lib-big-play .nav-ico {
  width: 28px;
  height: 28px;
  margin-left: 2px;
}
.videos-lib-ctrl-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(transparent, color-mix(in srgb, #000 82%, transparent));
  /* Siempre visible: el iframe YouTube captura el :hover y la barra no salía al reproducir. */
  opacity: 1;
  pointer-events: auto;
}
.videos-lib-ctrl {
  appearance: none;
  border: 0;
  background: color-mix(in srgb, #fff 10%, transparent);
  color: #fff;
  border-radius: 8px;
  min-width: 36px;
  height: 32px;
  padding: 0 8px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.videos-lib-ctrl:hover {
  background: color-mix(in srgb, #f97316 55%, transparent);
}
.videos-lib-ctrl-play {
  width: 36px;
  display: grid;
  place-items: center;
}
.videos-lib-ctrl-play .nav-ico {
  width: 16px;
  height: 16px;
}
.videos-lib-ctrl-fs .nav-ico {
  width: 15px;
  height: 15px;
}
.videos-lib-ctrl-play .vl-ico-pause {
  display: none;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(#fff, #fff) left / 4px 100% no-repeat,
    linear-gradient(#fff, #fff) right / 4px 100% no-repeat;
}
.videos-lib-player-shell.is-playing .vl-ico-play { display: none; }
.videos-lib-player-shell.is-playing .vl-ico-pause { display: block; }
.videos-lib-player-shell.is-paused .vl-ico-play { display: block; }
.videos-lib-player-shell.is-paused .vl-ico-pause { display: none; }
.videos-lib-time {
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, #fff 80%, transparent);
  white-space: nowrap;
  min-width: 5.5rem;
}
.videos-lib-seek {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: #f97316;
}
.videos-lib-speed {
  height: 28px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  background: color-mix(in srgb, #000 40%, transparent);
  color: #fff;
  font: inherit;
  font-size: 0.72rem;
  padding: 0 6px;
}

.videos-lib-dialog {
  --modal-w: min(920px, 96vw);
}
.videos-lib-form-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.videos-lib-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.95fr);
  gap: 16px;
  align-items: start;
}
.videos-lib-form-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.videos-lib-preview-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.videos-lib-preview-label {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.videos-lib-toggle-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--text);
}
.videos-lib-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 3px;
  border-radius: 12px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface-2, #1c2228) 80%, transparent);
}
.videos-lib-switch-opt {
  position: relative;
  cursor: pointer;
  margin: 0;
}
.videos-lib-switch-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.videos-lib-switch-face {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease;
}
.videos-lib-switch-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.videos-lib-switch-copy strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: inherit;
}
.videos-lib-switch-copy em {
  font-style: normal;
  font-size: 0.68rem;
  opacity: 0.85;
}
.videos-lib-switch-opt input:checked + .videos-lib-switch-face {
  background: color-mix(in srgb, #f97316 16%, transparent);
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f97316 40%, transparent);
}
.videos-lib-switch-face .nav-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  opacity: 0.85;
}
.videos-lib-aspect-ico {
  display: block;
  flex: 0 0 auto;
  width: 26px;
  height: 15px;
  border-radius: 3px;
  border: 1.5px solid color-mix(in srgb, #f97316 55%, transparent);
  background: color-mix(in srgb, #f97316 12%, transparent);
}
.videos-lib-aspect-ico.is-v {
  width: 13px;
  height: 22px;
}
.videos-lib-thumb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.videos-lib-thumb-row input[type="url"] {
  flex: 1 1 140px;
  min-width: 0;
}
.videos-lib-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.videos-lib-footer .toolbar-spacer {
  flex: 1 1 auto;
}
@media (max-width: 760px) {
  .videos-lib-form-grid,
  .videos-lib-switch {
    grid-template-columns: 1fr;
  }
  .videos-lib-player-shell[data-aspect="vertical"] {
    --vl-v-h: min(52vh, 420px);
    width: min(100%, calc(var(--vl-v-h) * 9 / 16));
  }
}

/* Nutrición compact client + adherencia fit */
#tab-comidas .nutrition-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 10px;
}
#tab-comidas .nutrition-client-field {
  flex: 0 1 240px;
  min-width: 160px;
  max-width: 260px;
}
#tab-comidas .nutrition-client-label {
  flex: 1 1 140px;
  min-width: 120px;
  max-width: 280px;
  align-self: center;
  margin: 0;
}
#tab-comidas .nutrition-toolbar-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
#tab-comidas .nutrition-plan-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
#tab-comidas .nutrition-side-card:has(.nutrition-adherence-fit) {
  flex: 0 0 auto;
  overflow: visible;
}
#tab-comidas .nutrition-adherence-fit {
  padding: 10px 12px 12px;
  overflow: visible;
}
#tab-comidas .nutrition-side-card:has(#meals-shopping-list) {
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 1100px) {
  .chat-shell,
  .pagos-kpi-row { grid-template-columns: 1fr 1fr; }
  .pagos-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  #tab-encuestas.tab-panel.active,
  #tab-archivos.tab-panel.active,
  #tab-clases-vod.tab-panel.active,
  #tab-wellness.tab-panel.active,
  #tab-pagos.tab-panel.active,
  #tab-permisos.tab-panel.active,
  #tab-diagnostico.tab-panel.active,
  #tab-mensajes.tab-panel.active,
  #tab-etiquetas.tab-panel.active,
  #tab-marca.tab-panel.active { overflow-y: auto; }
  .chat-shell { grid-template-columns: 1fr; }
  html[data-sidebar-mode="icons"],
  html[data-sidebar-mode="rail"],
  html[data-sidebar-mode="hidden"] { --sidebar-w: var(--sidebar-w, 260px); }
  html[data-sidebar-mode="icons"] .sidebar,
  html[data-sidebar-mode="rail"] .sidebar,
  html[data-sidebar-mode="hidden"] .sidebar { transform: none; }
}

/* ── Centro → Planes: pricing table premium (FB-005) ── */
.plans-panel-scroll { padding: 4px 2px 24px; }

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  align-items: stretch;
  margin-bottom: 22px;
}

.plans-grid > .empty-block {
  grid-column: 1 / -1;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px 20px;
  box-shadow: var(--elev-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.plan-card:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }

.plan-card.is-recommended {
  border-color: var(--tenant-primary);
  border-width: 2px;
  padding-top: 20px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), 0 0 0 3px var(--tenant-primary-soft);
  transform: translateY(-4px);
}

.plan-card.is-recommended:hover { transform: translateY(-6px); }

/* W4 mockup portal-centro: featured sin glow / lift (deck controla transform) */
#centro-panel-planes .plans-deck .plan-card.is-recommended,
#centro-panel-planes .plans-deck .plan-card.featured {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  border-width: 1px;
}
#centro-panel-planes .plans-deck .plan-card.is-recommended.deck-center,
#centro-panel-planes .plans-deck .plan-card.featured.deck-center {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38), 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent);
}
#centro-panel-planes .checkout-demo-panel {
  border-left: 3px solid var(--primary);
  border-style: solid;
}

.plan-card.is-inactive { opacity: 0.55; border-style: dashed; }

.plan-recommended-badge {
  position: absolute;
  top: -13px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--tenant-primary);
  color: var(--tenant-primary-contrast);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: var(--elev-1);
}

.plan-recommended-badge svg { width: 12px; height: 12px; }

.plan-inactive-badge {
  position: absolute;
  top: 14px;
  right: 16px;
  margin: 0;
}

.plan-card-name {
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 6px;
  padding-right: 60px;
}

.plan-card-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 2px;
}

.plan-card-price-amount {
  font-family: inherit;
  font-size: 1.55rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.15;
}
#centro-panel-planes .plan-card-price-amount {
  font-family: inherit;
  font-size: 1.28rem;
  font-weight: 700;
}

.plan-card.is-recommended .plan-card-price-amount { color: var(--tenant-primary); }

.plan-card-price-period {
  font-size: 0.82rem;
  color: var(--muted);
}

.plan-card-scope {
  margin: 0 0 14px;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.plan-services-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
  flex: 1;
}

.plan-services-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
}

.plan-check-ico {
  width: 15px;
  height: 15px;
  color: var(--sys-ok);
  flex-shrink: 0;
}

.plan-miss-ico {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--sys-danger, #e5484d) 70%, var(--muted));
  opacity: 0.88;
}

.plan-services-checklist li.is-excluded {
  opacity: 0.62;
}

.plan-services-checklist li.is-excluded .plan-service-ico,
.plan-services-checklist li.is-excluded span {
  color: var(--muted);
}

.plan-service-ico {
  width: 15px;
  height: 15px;
  color: var(--muted);
  flex-shrink: 0;
}

.plan-card-sedes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.plan-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
}

.plan-card.is-recommended .plan-chip {
  background: var(--tenant-primary-soft);
  color: var(--tenant-primary);
  border-color: transparent;
}

.plan-item-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.plan-item-actions .btn-primary,
.plan-item-actions .ghost { flex: 1; margin: 0; }

/* Checkout demo — separado deliberadamente de la gestión real de planes
   (feedback M2: riesgo de confundir demo con datos reales) */
.checkout-demo-panel {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 4px 16px;
}

.checkout-demo-panel summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--muted);
}

.checkout-demo-panel summary::-webkit-details-marker { display: none; }

.checkout-demo-summary-text { display: flex; align-items: center; gap: 10px; }

.checkout-demo-badge {
  background: var(--sys-warn);
  color: #1a1206;
  margin-left: 0;
}

.checkout-demo-caret {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.checkout-demo-panel[open] .checkout-demo-caret { transform: rotate(180deg); }

.checkout-demo-body { padding-bottom: 14px; }

@media (max-width: 640px) {
  .plans-grid { grid-template-columns: 1fr; }
  .plan-card.is-recommended { transform: none; }
}

/* ── Centro → Staff: fila enriquecida (FB-006) — solo listas, no filas de tabla ── */
#staff-list > li.staff-row,
#usuarios-staff-list > li.staff-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}
#staff-list > li.staff-row:last-child,
#usuarios-staff-list > li.staff-row:last-child {
  border-bottom: none;
}

.staff-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tenant-primary-soft);
  color: var(--tenant-primary);
  font-weight: 700;
  font-size: 0.82rem;
}

.staff-row-body { flex: 1; min-width: 0; }
.staff-row-email { margin: 1px 0 6px; }
.staff-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
  align-self: center;
}
.staff-action-btn {
  width: 34px;
  height: 34px;
}
.staff-inactive-badge {
  margin-left: 6px;
  background: color-mix(in srgb, var(--sys-err, #f87171) 18%, transparent);
  color: var(--sys-err, #f87171);
}

.staff-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.staff-role-badge { margin-left: 0; font-weight: 700; }

.staff-sede-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* ── Centro → Sedes: fila con capacidad/ocupación + servicios (FB-007/FB-008) ── */
.location-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}

.location-row:last-child { border-bottom: none; }

.location-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.location-row-head strong { font-size: 0.95rem; }

.location-row-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.location-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 64px;
}

.location-stat-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.location-stat-value { font-weight: 700; font-size: 0.95rem; }

.location-occupancy-bar {
  width: 100%;
  max-width: 220px;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  margin-top: 4px;
}

.location-occupancy-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--sys-ok);
  transition: width var(--dur-base) var(--ease-out);
}

.location-occupancy-fill.is-high { background: var(--sys-warn); }
.location-occupancy-fill.is-full { background: var(--sys-err); }

.location-service-chips { display: flex; flex-wrap: wrap; gap: 6px; }

#staff-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#centro-panel-staff .workspace-main,
#usuarios-panel-equipo .workspace-main {
  border: 1px solid var(--centro-line);
}

#centro-panel-staff.centro-panel.active {
  overflow: hidden;
}
#usuarios-panel-equipo.usuarios-panel.active {
  overflow-x: hidden;
  overflow-y: visible;
}
#centro-panel-staff .workspace {
  flex: 1 1 auto;
  min-height: 0;
}
#usuarios-panel-equipo .workspace {
  flex: 0 0 auto;
  min-height: auto;
}
#centro-panel-staff .workspace-split.is-list-detail {
  flex: 1 1 auto;
  min-height: 0;
}
#usuarios-panel-equipo .workspace-split.is-list-detail {
  flex: 0 0 auto;
  min-height: auto;
}
#centro-panel-staff .workspace-main,
#centro-panel-staff .workspace-side {
  flex: 1 1 auto;
  min-height: 0;
}
#usuarios-panel-equipo .workspace-main,
#usuarios-panel-equipo .workspace-side {
  flex: 0 0 auto;
  min-height: auto;
}
#centro-panel-staff .workspace-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
#usuarios-panel-equipo .workspace-scroll {
  flex: 0 0 auto;
  min-height: auto;
  overflow-y: visible;
}

#staff-list > li.staff-list-item,
#usuarios-staff-list > li.staff-list-item {
  display: block;
  padding: 0;
  margin: 0 0 8px;
  border: 0;
  background: transparent;
  list-style: none;
  cursor: pointer;
}
#staff-list .staff-row-inner,
#usuarios-staff-list .staff-row-inner {
  display: block;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 140ms ease, border-color 140ms ease;
}
#staff-list > li.staff-list-item.is-selected .staff-row-inner,
#staff-list > li.staff-row.is-selected .staff-row-inner,
#usuarios-staff-list > li.staff-list-item.is-selected .staff-row-inner,
#usuarios-staff-list > li.staff-row.is-selected .staff-row-inner {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  background: color-mix(in srgb, var(--primary-soft) 50%, var(--surface-2));
}
#staff-list > li.staff-list-item:not(.is-selected):hover .staff-row-inner,
#staff-list > li.staff-row:not(.is-selected):hover .staff-row-inner,
#usuarios-staff-list > li.staff-list-item:not(.is-selected):hover .staff-row-inner,
#usuarios-staff-list > li.staff-row:not(.is-selected):hover .staff-row-inner {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--centro-line));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-2));
}
#staff-list .staff-identity {
  display: flex;
  gap: 10px;
  min-width: 0;
}
#staff-list .staff-identity .txt { min-width: 0; flex: 1; }
#staff-list .staff-identity .name-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#staff-list .staff-identity .name {
  font-weight: 650;
  font-size: 0.84rem;
}
#staff-list .staff-identity .email {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#staff-list .staff-attrs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--muted);
}
#staff-list .staff-attrs span b {
  color: var(--text);
  font-weight: 600;
}
#staff-list .staff-list-role-chip {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-color: color-mix(in srgb, var(--chip-accent, var(--primary)) 45%, transparent);
  background: color-mix(in srgb, var(--chip-accent, var(--primary)) 16%, var(--surface));
}

#centro-panel-staff .staff-detail-fields,
#usuarios-panel-equipo .staff-detail-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 10px;
  align-content: start;
}
#centro-panel-staff .staff-detail-fields > label.hint,
#usuarios-panel-equipo .staff-detail-fields > label.hint {
  margin: 6px 0 0;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
#centro-panel-staff .staff-detail-gap,
#usuarios-panel-equipo .staff-detail-gap {
  margin: 4px 0 0;
  font-size: 0.72rem;
}
#centro-panel-staff .staff-autosave-hint,
#usuarios-panel-equipo .staff-autosave-hint {
  min-height: 1.1em;
  margin: 4px 0 0;
}
#centro-panel-staff .staff-detail-empty,
#usuarios-panel-equipo .staff-detail-empty {
  color: var(--muted);
  font-size: 0.84rem;
  padding: 18px 8px;
}
#centro-panel-staff .staff-detail-body h4,
#usuarios-panel-equipo .staff-detail-body h4 {
  margin: 0 0 4px;
  font-size: 1rem;
}
#centro-panel-staff .staff-tags-row,
#usuarios-panel-equipo .staff-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
}
#centro-panel-staff .staff-assign-summary,
#usuarios-panel-equipo .staff-assign-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 8px;
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface) 70%, transparent);
}
#centro-panel-staff .staff-assign-summary dt,
#usuarios-panel-equipo .staff-assign-summary dt {
  margin: 0;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
#centro-panel-staff .staff-assign-summary dd,
#usuarios-panel-equipo .staff-assign-summary dd {
  margin: 2px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#centro-panel-staff .staff-assign-summary dd.staff-roles-summary,
#usuarios-panel-equipo .staff-assign-summary dd.staff-roles-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  white-space: normal;
  overflow: visible;
  font-weight: 400;
}
#centro-panel-staff .staff-role-chips,
#usuarios-panel-equipo .staff-role-chips {
  margin: 0;
}
#centro-panel-staff .staff-role-chips .staff-role-chip:has(input:checked),
#usuarios-panel-equipo .staff-role-chips .staff-role-chip:has(input:checked) {
  border-color: color-mix(in srgb, var(--chip-accent, var(--primary)) 55%, var(--border));
  background: color-mix(in srgb, var(--chip-accent, var(--primary)) 14%, var(--surface));
  color: var(--text);
}
#centro-panel-staff .staff-detail-actions,
#usuarios-panel-equipo .staff-detail-actions {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}
#centro-panel-staff .staff-toggle-active-btn.is-danger,
#usuarios-panel-equipo .staff-toggle-active-btn.is-danger {
  color: var(--sys-err, #f87171);
  border-color: color-mix(in srgb, var(--sys-err, #f87171) 45%, transparent);
}

.location-service-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  background: transparent;
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
}

.location-service-chip svg { width: 11px; height: 11px; }
.location-service-chip.is-off {
  opacity: 1;
  text-decoration: none;
  color: var(--muted);
  border-color: color-mix(in srgb, var(--text) 12%, transparent);
}

/* ── Estado de carga en botones de submit (evita doble-click, comunica espera) ── */
.is-loading-btn {
  opacity: 0.72;
  cursor: wait !important;
  position: relative;
}

/* ── FitTip: popovers hover/focus (sistema portal) ── */
.fit-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.fit-tip-q {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-2));
  color: var(--primary);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  flex: 0 0 auto;
  transition:
    transform var(--dur-fast, 160ms) ease,
    background var(--dur-fast, 160ms) ease,
    border-color var(--dur-fast, 160ms) ease,
    box-shadow var(--dur-fast, 160ms) ease;
}

.fit-tip-q:hover,
.fit-tip-q:focus-visible {
  transform: scale(1.08);
  background: color-mix(in srgb, var(--primary) 28%, var(--surface));
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
  outline: none;
}

[data-fit-tip] {
  cursor: help;
}

.fit-tip-bubble {
  position: fixed;
  z-index: 2147483000;
  max-width: min(360px, calc(100vw - 28px));
  margin: 0;
  padding: 11px 13px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, #2a2118);
  background: linear-gradient(
    168deg,
    color-mix(in srgb, #241a14 88%, var(--primary)) 0%,
    #161310 100%
  );
  color: #f7f1ea;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-wrap: pretty;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 14px 32px rgba(0, 0, 0, 0.5),
    0 0 28px -6px color-mix(in srgb, var(--primary) 40%, transparent);
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px) scale(0.98);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.fit-tip-bubble::after {
  content: "";
  position: absolute;
  left: var(--fit-tip-caret-x, 50%);
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: inherit;
  border: inherit;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  box-shadow: none;
}

.fit-tip-bubble[data-placement="above"]::after {
  bottom: -5px;
  background: #161310;
  border-color: color-mix(in srgb, var(--primary) 42%, #2a2118);
}

.fit-tip-bubble[data-placement="below"]::after {
  top: -5px;
  background: color-mix(in srgb, #241a14 88%, var(--primary));
  border-bottom: none;
  border-right: none;
  border-top: 1px solid color-mix(in srgb, var(--primary) 42%, #2a2118);
  border-left: 1px solid color-mix(in srgb, var(--primary) 42%, #2a2118);
}

.fit-tip-bubble.is-visible,
.fit-tip-bubble:popover-open {
  opacity: 1;
  transform: none;
}

.fit-tip-bubble:popover-open {
  inset: unset;
}

.fit-tip-bubble .fit-tip-title {
  display: block;
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, #fff 92%, var(--primary));
}

.fit-tip-bubble .fit-tip-body {
  display: block;
  color: #ebe3d8;
  font-weight: 500;
}

.client-plan-icon[data-fit-tip],
.location-service-chip[data-fit-tip] {
  cursor: help;
}

/* Confirmación temática */
.modal-dialog.modal-sm {
  --modal-w: 420px;
}

.fit-confirm-message {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
}

.fit-confirm-dialog.fit-confirm-danger .modal-header h3 {
  color: color-mix(in srgb, var(--err) 75%, var(--text));
}

.fit-confirm-footer {
  flex-wrap: wrap;
  gap: 8px;
}

.fit-confirm-dialog.fit-confirm-hide-cancel #generic-confirm-cancel {
  display: none !important;
}

.fit-confirm-dialog.fit-confirm-icons .fit-confirm-footer {
  justify-content: flex-end;
  gap: 10px;
}

.fit-confirm-dialog .fit-confirm-icon-btn {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
}

.fit-confirm-dialog .fit-confirm-icon-btn .nav-ico {
  width: 20px;
  height: 20px;
}

.fit-confirm-ico {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.fit-confirm-ico-fwd {
  font-size: 1rem;
}

.fit-confirm-dialog.fit-confirm-has-alt .fit-confirm-footer {
  justify-content: flex-end;
}

#generic-confirm-alt:not(.hidden) {
  order: 1;
  margin-right: auto;
}

.modal-dialog .modal-footer .btn-danger,
#generic-confirm-ok.btn-danger {
  order: 2;
  padding: 8px 16px;
  border: 1px solid color-mix(in srgb, var(--err) 55%, transparent);
  border-radius: var(--radius-sm);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--err) 88%, #fff),
    var(--err)
  );
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

#generic-confirm-ok.btn-danger.fit-confirm-icon-btn {
  padding: 0;
}

.modal-dialog .modal-footer .btn-danger:hover,
#generic-confirm-ok.btn-danger:hover {
  filter: brightness(1.06);
}

/* ═══════════════════════════════════════════════════════════════════
   Planificador — copiloto, biblioteca, copia a clientes, secciones
   y rejilla de días con arrastre (PL-013 · PL-014 · PL-018…PL-022)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Secciones dentro de una sesión ─────────────────────────────────── */

.session-section-head {
  margin: 6px 0 0;
  font-family: "Syne", "Plus Jakarta Sans", var(--fitos-font, sans-serif);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}

.session-section-head.is-none {
  color: var(--muted);
}

.session-block-row .block-seccion {
  min-width: 106px;
  font-size: 0.76rem;
}

/* ── Rejilla de la semana: día libre = destino del arrastre ─────────── */

.planner-cal-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  border-radius: var(--radius-lg);
  transition: box-shadow 140ms ease, background 140ms ease;
}

.planner-cal-slot-day {
  margin: 0 0 0 2px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.planner-cal-slot.is-today .planner-cal-slot-day {
  color: var(--primary);
}

.planner-cal-free {
  margin: 0;
  padding: 22px 12px;
  border: 1px dashed var(--hairline, var(--border));
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: 0.76rem;
  color: var(--muted);
}

.planner-cal-slot.slot-over {
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 55%, transparent);
}

.planner-cal-slot.is-dragging {
  opacity: 0.55;
}

.planner-day-head[draggable="true"] {
  cursor: grab;
}

.planner-day-grip {
  display: inline-flex;
  color: var(--muted);
}

/* ── Copiloto ───────────────────────────────────────────────────────── */

.planner-copilot-dialog {
  width: min(680px, 94vw);
  animation: copilot-enter 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes copilot-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .planner-copilot-dialog { animation: none; }
}

.planner-copilot-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.copilot-engine {
  margin-left: auto;
  margin-right: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted);
}

.copilot-engine.is-on {
  background: var(--primary-soft);
  color: color-mix(in srgb, var(--primary) 80%, white);
}

.copilot-engine.is-off {
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  color: color-mix(in srgb, var(--warn) 85%, white);
}

.planner-copilot-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.copilot-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(46vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 4px;
}

.copilot-msg {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 0.86rem;
  line-height: 1.45;
}

.copilot-msg p {
  margin: 0;
  white-space: pre-wrap;
}

.copilot-msg.is-coach {
  align-self: flex-end;
  background: var(--primary-soft);
  color: var(--text);
  border-bottom-right-radius: 5px;
}

.copilot-msg.is-copilot {
  align-self: flex-start;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 84%, transparent);
  border-bottom-left-radius: 5px;
}

.copilot-msg.is-thinking {
  color: var(--muted);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

.copilot-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 2px 2px;
}

.copilot-dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--primary);
  opacity: 0.35;
  animation: copilot-dot 1s ease-in-out infinite;
}

.copilot-dots i:nth-child(2) { animation-delay: 0.15s; }
.copilot-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes copilot-dot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .copilot-dots i { animation: none; opacity: 0.7; }
}

.copilot-proposal {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.copilot-proposal-head {
  margin: 0 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--primary) 80%, white);
}

.copilot-action {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.84rem;
  line-height: 1.4;
  cursor: pointer;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 35%, transparent);
}

.copilot-action-kind {
  flex: 0 0 auto;
  margin-top: 1px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: color-mix(in srgb, var(--primary) 85%, white);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.copilot-action:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

/* `input { width: 100% }` es global en el portal: sin acotar la casilla, se comía
   toda la fila y el texto del cambio salía empujado fuera del panel. */
.copilot-action input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--tenant-primary);
}

.copilot-action-text {
  flex: 1 1 auto;
  min-width: 0;
}

.copilot-proposal-tools {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.copilot-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.copilot-chip {
  padding: 5px 10px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.74rem;
  cursor: pointer;
}

.copilot-chip:hover {
  border-color: color-mix(in srgb, var(--primary) 50%, transparent);
  color: var(--text);
}

.planner-copilot-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.copilot-form {
  display: flex;
  gap: 8px;
}

.copilot-form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: var(--radius-sm);
  background: var(--sys-surface, var(--surface));
  color: var(--text);
  font-size: 0.88rem;
}

.copilot-form .icon-btn {
  flex: 0 0 auto;
  align-self: stretch;
  width: 40px;
  height: auto;
  min-height: 40px;
  border-radius: var(--radius-sm);
}

.copilot-limits {
  margin: 0;
  font-size: 0.7rem;
}

.copilot-engine-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 28%, var(--hairline, var(--border)));
  border-radius: 12px;
  background: color-mix(in srgb, var(--warn) 8%, var(--sys-surface, var(--surface)));
  color: var(--text);
}

.copilot-engine-card strong {
  font-size: 0.78rem;
  font-weight: 700;
}

.copilot-engine-card span {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}

.copilot-engine-card code {
  font-size: 0.74rem;
  color: color-mix(in srgb, var(--primary) 75%, white);
}

.copilot-msg.is-thinking {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-style: normal;
}

.copilot-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.copilot-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.35;
  animation: copilot-dot 1s var(--ease-out) infinite;
}

.copilot-dots i:nth-child(2) { animation-delay: 140ms; }
.copilot-dots i:nth-child(3) { animation-delay: 280ms; }

@keyframes copilot-dot {
  0%, 80%, 100% { opacity: 0.28; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

.copilot-action {
  display: grid;
  grid-template-columns: 16px auto 1fr;
  align-items: start;
  gap: 8px 10px;
  padding: 8px 10px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface-2, var(--surface-2)) 70%, transparent);
}

.copilot-action-kind {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--primary) 82%, white);
  background: var(--primary-soft);
}

.copilot-knowledge {
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  padding: 6px 10px 8px;
  background: color-mix(in srgb, var(--sys-surface-2, var(--surface-2)) 55%, transparent);
}

.copilot-knowledge summary {
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 650;
  color: var(--text);
}

.copilot-knowledge[open] summary {
  color: var(--primary);
}

.copilot-knowledge textarea {
  width: 100%;
  margin-top: 6px;
  min-height: 64px;
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 8px;
  background: var(--sys-surface, var(--surface));
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
}

.copilot-knowledge-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--muted);
  cursor: pointer;
}

.copilot-knowledge-file input {
  width: auto;
  max-width: 16rem;
  font-size: 0.72rem;
}

.copilot-error.copilot-limit,
#copilot-error.copilot-limit {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  color: var(--text);
  font-size: 0.8rem;
}

@media (max-width: 640px) {
  dialog.planner-copilot-dialog.copilot-sheet {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    inset: 0;
    border-radius: 0;
    transform: translateY(12px);
  }

  dialog.planner-copilot-dialog.copilot-sheet[open] {
    transform: none;
  }

  .planner-copilot-dialog .copilot-thread {
    max-height: none;
    flex: 1 1 auto;
  }

  .planner-copilot-body {
    flex: 1 1 auto;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .copilot-dots i { animation: none; opacity: 0.7; }
  dialog.planner-copilot-dialog.copilot-sheet,
  dialog.planner-copilot-dialog.copilot-sheet[open] {
    transform: none;
  }
}

.copilot-engine-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.45;
}

.copilot-engine-card.hidden { display: none; }

.copilot-engine-card strong {
  font-size: 0.78rem;
  font-weight: 700;
}

.copilot-engine-card code {
  font-size: 0.74rem;
  color: color-mix(in srgb, var(--primary) 80%, white);
}

.copilot-limit {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--warn, #eab308) 35%, transparent);
  background: color-mix(in srgb, var(--warn, #eab308) 10%, transparent);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.4;
}

.copilot-limit.hidden { display: none; }

.copilot-knowledge {
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  padding: 6px 10px 8px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
}

.copilot-knowledge summary {
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 650;
  color: var(--muted);
}

.copilot-knowledge textarea {
  width: 100%;
  margin-top: 6px;
  min-height: 64px;
  resize: vertical;
  box-sizing: border-box;
}

.copilot-knowledge-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--muted);
  cursor: pointer;
}

.copilot-knowledge-file input {
  width: auto;
}

@media (max-width: 560px) {
  .planner-copilot-dialog[open] {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  .planner-copilot-dialog .planner-copilot-body {
    flex: 1 1 auto;
    min-height: 0;
  }
  .planner-copilot-dialog .copilot-thread {
    max-height: none;
    flex: 1 1 auto;
  }
}

/* Last word: closed planner dialogs never hit-test. Author `display:flex`
   on copilot/video sheets used to beat UA `dialog { display:none }` and eat
   every touch in Biblioteca below the navbar (Planes was fine). */
#tab-planificador dialog:not([open]),
#tab-planificador dialog.modal-dialog:not([open]),
#exercise-video-modal:not([open]),
#planner-copilot-dialog:not([open]) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ── Biblioteca de grupos reutilizables ─────────────────────────────── */

.planner-library-dialog {
  width: min(720px, 94vw);
}

.planner-library-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.planner-library-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

@media (max-width: 560px) {
  .planner-library-bar {
    grid-template-columns: 1fr;
  }
}

.planner-library-search-field,
.planner-library-target-field {
  min-width: 0;
  width: 100%;
  margin: 0;
}

.planner-library-target-field select {
  width: 100%;
  max-width: none;
}

.planner-library-bar .planner-modal-search {
  max-width: none;
  width: 100%;
  align-self: stretch;
}

.planner-library-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(52vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 4px;
}

.library-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 82%, transparent);
}

.library-card-main {
  flex: 1 1 auto;
  min-width: 0;
}

.library-card-main h4 {
  margin: 0 0 2px;
  font-size: 0.92rem;
  font-weight: 650;
}

.library-card-main p {
  margin: 0;
  font-size: 0.76rem;
}

.library-card-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.library-count {
  font-size: 0.68rem;
  font-weight: 650;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: color-mix(in srgb, var(--primary) 80%, white);
  white-space: nowrap;
}

.library-insert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-inline: 12px;
}

.library-insert .nav-ico {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.85;
}

.library-insert:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.library-delete.danger {
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 28%, transparent);
}

.library-delete.danger:hover:not(:disabled) {
  color: color-mix(in srgb, var(--err) 88%, white);
  border-color: color-mix(in srgb, var(--err) 50%, transparent);
  background: color-mix(in srgb, var(--err) 12%, transparent);
}

/* Sesiones guardadas: la barra suma «Nueva sesión» entre buscar e insertar
   (PL-UI-45). */
.planner-library-bar {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

@media (max-width: 720px) {
  .planner-library-bar {
    grid-template-columns: 1fr;
  }
}

.planner-library-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  align-self: end;
  height: 38px;
}

.planner-library-new .nav-ico {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* «Al calendario» es la acción principal de cada sesión guardada (PL-UI-47). */
.library-schedule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-inline: 12px;
  white-space: nowrap;
}

.library-schedule .nav-ico {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.85;
}

/* Editor de sesión guardada (PL-UI-46) */
.planner-saved-dialog {
  width: min(40rem, calc(100vw - 32px));
}

.planner-saved-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.planner-saved-items-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.planner-saved-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(46vh, 400px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 4px;
}

.lib-circuit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 10px 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 9%, var(--sys-surface, var(--surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 8%, transparent);
}

.lib-circuit-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 2px 2px;
  font-family: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 650;
  font-stretch: normal;
  letter-spacing: 0;
  cursor: grab;
}

.lib-circuit-head:active {
  cursor: grabbing;
}

.lib-circuit.is-dragging-unit {
  opacity: 0.55;
}

.lib-circuit-head .hint {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}

.lib-circuit .saved-item {
  margin: 0;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, var(--sys-bg, var(--bg)));
}

.lib-circuit .lib-rest-after {
  margin: 0 6px;
}

.lib-circuit + .lib-rest-after,
.circuit-group + .lib-rest-after {
  margin-top: 2px;
}

.planner-detail-body .lib-rest-after,
.session-blocks > .lib-rest-after {
  margin: 2px 4px 6px;
  min-height: 36px;
}

.lib-circuit--detail {
  margin: 0 0 8px;
  padding: 10px 10px 14px;
}

.lib-circuit--detail .lib-ex-detail-hero {
  border-radius: 10px;
  overflow: hidden;
}

.lib-circuit--detail .lib-ex-detail-name {
  margin-top: 10px;
}

.lib-circuit--detail .lib-rest-after {
  margin: 8px 4px 2px;
}

.libpane-items > .lib-circuit,
.planner-saved-items > .lib-circuit {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.saved-item-select-wrap {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.saved-item-select-wrap input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.saved-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 72%, transparent);
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  cursor: pointer;
}

.saved-item.is-expanded {
  grid-template-columns: minmax(128px, 28%) minmax(0, 1fr);
}

.saved-item-media {
  position: relative;
  grid-column: 1;
  grid-row: 1 / -1;
  width: auto;
  min-width: 0;
  min-height: 88px;
  align-self: stretch;
  background: color-mix(in srgb, var(--primary) 10%, var(--sys-surface-2, var(--surface-2)));
}

.saved-item.is-expanded .saved-item-media {
  min-height: 0;
}

.saved-item-media .block-thumb-wrap {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: color-mix(in srgb, var(--primary) 8%, var(--sys-surface-2, var(--surface-2)));
}

.saved-item.is-expanded .saved-item-media .block-thumb-wrap {
  min-height: 0;
}

.saved-item-media .block-thumb,
.saved-item-media .exercise-thumb-fallback {
  width: 100%;
  height: 100%;
  min-height: inherit;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
}

.saved-item-media .exercise-thumb-fallback {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 40% 20%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%),
    var(--sys-surface-2, var(--surface-2));
}

.saved-item-media .exercise-thumb-fallback svg {
  width: 36px;
  height: 36px;
}

.saved-item-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  grid-column: 2;
  flex: 1 1 auto;
  padding: 12px 14px 14px 16px;
}

.saved-item-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}

.saved-item-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr));
  align-items: stretch;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.saved-item.is-collapsed .saved-item-fields {
  display: none;
}

.saved-item.is-collapsed .saved-item-body {
  gap: 0;
}

.saved-item.is-expanded .saved-item-fields > :nth-child(n + 5) {
  display: flex;
}

.saved-item-fields > label,
.saved-item-num,
.saved-item-fields .planner-rx-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 8px 10px;
  font-size: 0.62rem;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 55%, var(--sys-surface, var(--surface)));
}

.saved-item-fields input,
.saved-item-fields select,
.saved-item-num input,
.saved-item-fields .rest-combo input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
}

.saved-item-fields input:focus,
.saved-item-fields select:focus,
.saved-item-num input:focus {
  outline: none;
}

.saved-item-fields > label:focus-within,
.saved-item-num:focus-within,
.saved-item-fields .planner-rx-field:focus-within {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
}

.saved-item-fields > label:has([data-saved-field="seccion"]) {
  grid-column: span 2;
}

.saved-item-fields select[data-saved-field="seccion"] {
  width: 100%;
  min-width: 0;
  text-align: left;
  font-weight: 650;
}

.saved-item-rx {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  position: static;
}

.saved-item-rx-line {
  font-size: 0.92rem;
  font-weight: 750;
  letter-spacing: 0;
  color: var(--muted);
}

.saved-item.is-expanded .saved-item-rx-line {
  font-size: 1.12rem;
  color: var(--primary);
}

.saved-item-rpe-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 82%, #c2410c);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
}

.saved-item.is-collapsed .saved-item-rpe-chip {
  background: transparent;
  color: var(--primary);
}

.rest-combo {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.rest-combo input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.rest-unit {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 650;
}

.planner-rest-field > span:first-child {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Descanso entre ejercicios: hueco ENTRE tarjetas, no dentro de la card. */
.lib-rest-after {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -4px 10px;
  min-height: 40px;
  flex: 0 0 auto;
}

.lib-rest-after-line {
  flex: 1 1 auto;
  height: 1px;
  min-width: 12px;
  background: color-mix(in srgb, var(--primary) 38%, var(--border));
}

.lib-rest-after-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
  padding: 6px 14px 7px;
  min-width: 12.4rem;
  border: 1px solid color-mix(in srgb, var(--primary) 48%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 78%, #0a0a0a);
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lib-rest-after-field:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

.lib-rest-after-field .rest-combo {
  width: 100%;
}

.lib-rest-after-field input {
  width: 4.4rem;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

.lib-rest-after-field input:focus {
  outline: none;
}

.lib-rest-after-hint {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--primary) 72%, var(--muted));
}

.lib-rest-after.is-circuit .lib-rest-after-field {
  border-style: dashed;
}

.lib-ex-detail-scroll > .lib-rest-after {
  margin: 10px 0 4px;
}

.saved-item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  position: static;
  cursor: grab;
}

.saved-item-main h4 {
  margin: 0;
  max-width: 100%;
  font-family: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0;
  font-stretch: normal;
  transform: none;
  line-height: 1.3;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  overflow-wrap: anywhere;
}

.saved-item.is-expanded .saved-item-main h4 {
  font-size: 1.12rem;
}

.saved-item-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}

.saved-item-toggle .nav-ico {
  width: 16px;
  height: 16px;
  transform: rotate(0deg);
  transition: transform var(--dur-fast, 160ms) var(--ease-out, ease);
}

.saved-item.is-expanded .saved-item-toggle .nav-ico {
  transform: rotate(180deg);
}

.saved-item-num {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.62rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.saved-item-num input {
  width: 100%;
  min-width: 0;
  padding: 0;
  font-size: 0.92rem;
  text-align: left;
}

@media (max-width: 560px) {
  .saved-item,
  .saved-item.is-expanded,
  .saved-item.is-collapsed {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
  .saved-item-media,
  .saved-item.is-expanded .saved-item-media,
  .saved-item.is-collapsed .saved-item-media {
    grid-column: auto;
    grid-row: auto;
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 16 / 9;
    max-height: 220px;
  }
  .saved-item-media .block-thumb-wrap,
  .saved-item.is-expanded .saved-item-media .block-thumb-wrap,
  .saved-item-media .block-thumb,
  .saved-item-media .exercise-thumb-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    max-height: none;
  }
  .saved-item-body {
    padding: 12px 12px 14px;
  }
  .saved-item-fields,
  .saved-item.is-expanded .saved-item-fields,
  .saved-item.is-collapsed .saved-item-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .saved-item.is-collapsed .saved-item-fields {
    display: none;
  }
  .saved-item.is-expanded .saved-item-fields > :nth-child(n + 5) {
    display: flex;
  }
  .saved-item-fields > label:has([data-saved-field="seccion"]) {
    grid-column: 1 / -1;
  }
  .saved-item-main h4 {
    white-space: normal;
  }
  .saved-item.is-expanded .saved-item-rx-line,
  .saved-item-rx-line {
    color: var(--primary);
    font-size: 1.05rem;
  }
}

.planner-saved-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Llevar al calendario (PL-UI-47) */
.planner-schedule-dialog {
  width: min(32rem, calc(100vw - 24px));
  max-height: min(88vh, 720px);
}

.assign-steps { display: none; }

.assign-progress {
  display: grid;
  gap: 8px;
  margin: 0 16px 2px;
}

.assign-progress-rail {
  height: 3px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--sys-text) 12%, transparent);
  overflow: hidden;
}

.assign-progress-fill {
  height: 100%;
  width: var(--assign-pct, 33%);
  border-radius: inherit;
  background: var(--primary);
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 55%, transparent);
  transition: width 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.assign-progress-dots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.assign-progress-step,
.assign-step {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 2px 0 0;
  font: inherit;
  cursor: pointer;
}

.assign-progress-step:active { transform: scale(0.97); }

.assign-progress-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sys-text) 22%, transparent);
  transition:
    background 160ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.assign-progress-label {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.assign-progress-step.is-done { color: var(--text); }
.assign-progress-step.is-done .assign-progress-pip {
  background: color-mix(in srgb, var(--primary) 70%, #fff);
}

.assign-progress-step.is-on {
  color: var(--text);
}

.assign-progress-step.is-on .assign-progress-pip {
  background: var(--primary);
  transform: scale(1.28);
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 70%, transparent);
}

.assign-context-line {
  margin: 2px 0 0;
  min-height: 0;
  font-size: 0.78rem;
}

.assign-context-line:empty { display: none; }

.assign-when-head-line {
  margin: 0;
}

.assign-when-help[hidden] { display: none !important; }

.assign-search-row {
  gap: 8px;
}

.assign-search-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.assign-search-toolbar .planner-modal-search,
.assign-search-toolbar .planner-pick-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.assign-icon-toggle {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
  transition:
    border-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
    background 160ms cubic-bezier(0.23, 1, 0.32, 1),
    color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.assign-icon-toggle .nav-ico {
  width: 16px;
  height: 16px;
}

.assign-icon-toggle:hover,
.assign-icon-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  outline: none;
}

.assign-icon-toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: var(--primary-soft);
  color: var(--primary);
}

.assign-footer .btn-primary:disabled {
  opacity: 0.42;
  cursor: help;
  transform: none;
  pointer-events: auto;
}

.assign-panel { display: grid; gap: 10px; min-height: 0; }
.assign-panel.hidden { display: none !important; }
#schedule-cal-wrap[hidden] { display: none !important; }
.assign-footer [hidden] { display: none !important; }

.assign-when-help { margin: 0; }

.assign-when-list,
#schedule-when-root,
#plan-assign-when-root {
  display: grid;
  gap: 10px;
}

.assign-when-block {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 55%, transparent);
}

.assign-when-block.is-single {
  border: 0;
  background: transparent;
  overflow: visible;
}

.assign-when-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.assign-when-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 650;
}

.assign-when-head strong {
  font-size: 0.88rem;
  font-weight: 650;
}

.assign-when-meta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.assign-when-chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  color: var(--muted);
  transform: rotate(0deg);
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.assign-when-block.is-open .assign-when-chevron {
  transform: rotate(180deg);
  color: var(--primary);
}

.assign-when-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 230ms cubic-bezier(0.23, 1, 0.32, 1);
}

.assign-when-block.is-open .assign-when-panel {
  grid-template-rows: 1fr;
}

.assign-when-panel-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.assign-when-block.is-open .assign-when-panel-inner {
  opacity: 1;
}

.assign-when-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.assign-when-block.is-collapsed .assign-when-body { display: none; }
.assign-when-block.is-single .assign-when-body { padding: 0; }

.assign-client-preview[hidden] { display: none !important; }

.assign-client-preview {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.assign-client-preview li {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.8rem;
  line-height: 1.35;
}

.assign-client-preview strong { font-weight: 650; }

.assign-footer { align-items: center; }

.planner-assign-body {
  display: grid;
  gap: 12px;
  min-height: 16rem;
}

.planner-assign-kicker {
  margin: 10px 0 6px;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.planner-assign-kicker.is-range {
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 650;
}

.planner-assign-list {
  display: grid;
  gap: 6px;
  max-height: min(42vh, 22rem);
  overflow: auto;
  padding-right: 2px;
}

.planner-assign-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 5px 8px;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.84rem;
  line-height: 1.25;
  cursor: pointer;
}

.planner-assign-row.is-on {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.planner-assign-row.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.planner-assign-row input[type="checkbox"],
.planner-assign-row input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  min-width: 14px;
  margin: 0;
  padding: 0;
  flex: 0 0 14px;
  align-self: center;
  border: 1.5px solid color-mix(in srgb, var(--muted) 55%, var(--border));
  border-radius: 3px;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.planner-assign-row input[type="radio"] {
  border-radius: 50%;
}

.planner-assign-row input[type="checkbox"]:checked,
.planner-assign-row input[type="radio"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.planner-assign-row input[type="checkbox"]:checked::after {
  content: "";
  width: 7px;
  height: 4px;
  margin-top: -1px;
  border: 1.5px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
}

.planner-assign-row input[type="radio"]:checked::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.assign-row-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.assign-row-text strong {
  font-weight: 650;
  color: var(--text);
}

.assign-row-status {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 650;
  font-style: normal;
}

.assign-row-meta {
  flex: 1 1 100%;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assign-row-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.planner-schedule-repeat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  cursor: pointer;
}

.planner-schedule-repeat input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

/* Guardar sesión → grupo (form acotado, no full-bleed) */
.planner-save-group-dialog {
  width: min(28rem, calc(100vw - 32px));
}

.save-group-preview {
  margin: 0;
  padding: 8px 12px;
  list-style: none;
  max-width: 22rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 40%, transparent);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
}

.save-group-preview li {
  margin: 0;
  padding: 2px 0;
}

.save-group-preview li::before {
  content: "· ";
  color: var(--primary);
}

#planner-save-group-dialog #save-group-name {
  width: 100%;
  max-width: 22rem;
}

/* ── Copiar plan a otros clientes ───────────────────────────────────── */

.planner-clone-dialog {
  width: min(520px, 94vw);
  /* Alto acotado: el form cabe; solo la lista de clientes scrollea. */
  height: min(640px, calc(100vh - 48px));
  max-height: min(640px, calc(100vh - 48px));
}

.planner-clone-dialog .planner-clone-body.planner-modal-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  overflow: hidden; /* sin scroll del modal entero */
  gap: 10px;
}

.planner-clone-dialog .planner-form-lead,
.planner-clone-dialog .planner-clone-fixed,
.planner-clone-dialog #clone-error {
  flex: 0 0 auto;
}

.planner-clone-dialog .planner-clone-clients {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.planner-clone-dialog .planner-clone-clients > .planner-field-head,
.planner-clone-dialog .planner-clone-clients > .planner-modal-search,
.planner-clone-dialog .planner-clone-clients > #clone-count {
  flex: 0 0 auto;
}

.planner-clone-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-height: 120px;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  margin-top: 0;
  padding: 6px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 40%, transparent);
}

.clone-client-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  margin: 0;
  transition:
    background var(--dur-fast, 160ms) ease,
    box-shadow var(--dur-fast, 160ms) ease;
}

.clone-client-row:nth-child(even):not(:hover):not(:has(input:checked)) {
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 55%, transparent);
}

.clone-client-row:hover {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.clone-client-row:has(input:checked),
.clone-client-row.is-selected {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--primary, #f97316);
}

.clone-client-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--tenant-primary, var(--primary));
  pointer-events: none;
}

.clone-client-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

.clone-client-avatar .nav-ico {
  width: 15px;
  height: 15px;
}

.clone-client-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.clone-client-name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
}

.clone-client-row .planner-pick-sub {
  font-size: 0.74rem;
  color: var(--muted);
}

/* ── Nutrición — canvas único (sin tabs) ─────────────────────────────── */
#tab-comidas .nutrition-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 10px;
}

#tab-comidas .nutrition-contextbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 0;
}

#tab-comidas .nutrition-contextbar .planner-picker {
  flex: 0 1 280px;
  max-width: 320px;
}

#tab-comidas .nutrition-client-label {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tab-comidas .planner-pick-option .nut-pick-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
}

#tab-comidas .planner-pick-option .nut-pick-avatar .nav-ico {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
}

#tab-comidas .nutrition-plan-canvas {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#tab-comidas .nutrition-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline, var(--border));
}

#tab-comidas .nutrition-plan-ident {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#tab-comidas .nutrition-plan-ident h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nut-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
}

.nut-badge.is-cerrado {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
}

.nut-badge.is-abierto {
  background: color-mix(in srgb, var(--ok, #22c55e) 16%, transparent);
  color: var(--ok, #22c55e);
}

.nut-badge.hidden { display: none; }

#tab-comidas .nutrition-plan-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

#tab-comidas .nut-ico-btn {
  position: relative;
}

#tab-comidas .nut-ico-btn:hover {
  transform: scale(1.06);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
}

.nut-ico-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--primary);
  color: #111;
  font-size: 0.62rem;
  font-weight: 750;
  line-height: 16px;
  text-align: center;
}

.nut-ico-badge.hidden { display: none; }

#tab-comidas .nut-ico-btn.has-alerts {
  animation: nut-bell-pulse 1.8s ease-in-out infinite;
}

@keyframes nut-bell-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 22%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  #tab-comidas .nut-ico-btn.has-alerts { animation: none; }
}

#tab-comidas .nutrition-plan-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 12px;
}

#tab-comidas #nutrition-fab-wrap {
  display: flex;
  z-index: 50;
}

.nutrition-empty {
  display: grid;
  place-items: center;
  min-height: 180px;
  text-align: center;
  color: var(--muted);
}

.nutrition-repeat-hint {
  margin: 0 0 14px;
  font-size: 0.78rem;
  color: var(--muted);
}

.nut-macro-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.nut-macro-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 10px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
  transition:
    transform var(--dur-fast, 160ms) var(--ease-out, ease),
    border-color var(--dur-fast, 160ms) ease,
    background var(--dur-fast, 160ms) ease;
}

.nut-macro-card:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: var(--primary-soft);
}

.nut-macro-card span {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.nut-macro-card strong {
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.nut-macro-card em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--muted);
}

.nutrition-adherence-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nutrition-adherence-block > h4 {
  margin: 0 0 2px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.adherence-row {
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background var(--dur-fast, 160ms) ease, transform var(--dur-fast, 160ms) ease;
}

.adherence-row:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  transform: translateX(2px);
}

.adherence-bar {
  height: 8px;
}

.adherence-fill {
  transition: width 0.45s var(--ease-out, ease);
}

.nutrition-tool-dialog { --modal-w: 720px; }
.nutrition-assistant-dialog { --modal-w: 640px; }

.nutrition-hist-sub {
  margin: 16px 0 8px;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.nutrition-shop-meal {
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 55%, transparent);
}

.nutrition-shop-meal + .nutrition-shop-meal { margin-top: 8px; }

.nutrition-shop-meal > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-weight: 600;
}
.nutrition-shop-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nutrition-shop-meal .nutrition-acc-chevron,
.nutrition-meal-acc .nutrition-acc-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  opacity: 0.7;
  transition: transform 160ms ease;
}
.nutrition-shop-meal.is-open .nutrition-acc-chevron,
.nutrition-meal-acc.is-open .nutrition-acc-chevron {
  transform: rotate(180deg);
}

.nutrition-shop-meal > button:hover {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.nutrition-shop-meal ul {
  margin: 0;
  padding: 0 14px 12px 32px;
  font-size: 0.85rem;
}

.nutrition-shop-meal[hidden] ul,
.nutrition-shop-meal:not(.is-open) ul { display: none; }

.nutrition-assist-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.nutrition-assist-log {
  min-height: 72px;
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 40%, transparent);
  font-size: 0.85rem;
}

.nutrition-assist-log p { margin: 0 0 8px; }
.nutrition-assist-log p:last-child { margin: 0; }
.nutrition-assist-log .assist-you { color: var(--muted); }
.nutrition-assist-log .assist-bot { color: var(--text); }

#tab-comidas .foods-catalog-item-actions .ex-tool-chip {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
}

@media (max-width: 900px) {
  .nut-macro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #tab-comidas .nutrition-plan-head { flex-wrap: wrap; }
}

.nutrition-day-assign {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}
.nutrition-day-assign-label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 650;
}
.nutrition-day-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nutrition-day-chip {
  margin: 0;
  min-width: 38px;
  padding: 7px 10px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 45%, transparent);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  transition:
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}
.nutrition-day-chip:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  color: var(--text);
}
.nutrition-day-chip.is-on {
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  color: color-mix(in srgb, var(--primary) 82%, white);
}
.nutrition-day-chip.has-menu:not(.is-on) {
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
  color: color-mix(in srgb, var(--primary) 70%, white);
}
.nutrition-menu-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.nutrition-copy-pop {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 40%, transparent);
}
.nutrition-copy-pop.hidden { display: none; }

#tab-comidas .nutrition-contextbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

#tab-comidas .nutrition-contextbar #nutrition-foods-open {
  margin-left: auto;
  flex: 0 0 auto;
}

#tab-comidas .nutrition-plan-ident .nut-ident-ico {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

.nutrition-tool-dialog { --modal-w: 540px; --modal-max-h: min(72svh, 640px); }
.nutrition-report-dialog { --modal-w: 640px; --modal-max-h: min(74svh, 680px); }
.nutrition-alerts-dialog { --modal-w: 560px; --modal-max-h: min(72svh, 620px); }
.nutrition-body-dialog { --modal-w: min(860px, 96vw); --modal-max-h: min(88svh, 820px); }
.nutrition-foods-dialog { --modal-w: min(640px, 96vw); --modal-max-h: min(78svh, 720px); }
.nutrition-history-dialog { --modal-w: min(520px, 96vw); --modal-max-h: min(78svh, 680px); }

.nutrition-history-dialog .nut-hist-tabs {
  display: flex;
  width: 100%;
  margin: 0 0 14px;
}

.nutrition-history-dialog .nut-hist-tabs .seg-tab {
  flex: 1 1 0;
  text-align: center;
  white-space: nowrap;
}

.nutrition-history-dialog .nut-hist-tabs .seg-tab.active {
  background: color-mix(in srgb, #f97316 22%, transparent);
  color: #fdba74;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f97316 35%, transparent);
}

.nut-hist-panel { min-height: 120px; }

.nutrition-hist-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 55%, transparent);
}
.nutrition-hist-card + .nutrition-hist-card { margin-top: 8px; }
.nutrition-hist-card.is-active {
  border-color: color-mix(in srgb, #f97316 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f97316 22%, transparent),
    0 0 0 1px color-mix(in srgb, #f97316 12%, transparent);
  background: color-mix(in srgb, #f97316 6%, var(--sys-surface, var(--surface)));
}
.nutrition-hist-main { flex: 1 1 auto; min-width: 0; }
.nutrition-hist-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nutrition-hist-main strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nutrition-hist-main .hint { margin: 4px 0 0; font-size: 0.72rem; }
.nutrition-hist-macros {
  margin: 6px 0 0;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
}
.nutrition-hist-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.nutrition-hist-view .nav-ico { width: 16px; height: 16px; }
.nut-badge.is-archivado {
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted);
  letter-spacing: 0.03em;
}
.meals-plan-history-item { padding: 0; border: 0; }

.nut-hist-photos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nut-hist-photo-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
}
.nut-hist-photo-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  background: #1c1917;
  cursor: pointer;
}
.nut-hist-photo-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nut-hist-photo-main strong {
  font-size: 0.86rem;
  font-weight: 700;
}
.nut-hist-photo-main .hint { margin: 4px 0 0; font-size: 0.72rem; }
.nut-hist-status {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.nut-hist-status.is-ok {
  background: color-mix(in srgb, #22c55e 16%, transparent);
  color: #4ade80;
}
.nut-hist-status.is-alerta {
  background: color-mix(in srgb, #f97316 18%, transparent);
  color: #fdba74;
}
.nut-hist-status.is-pending {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
}
.nut-hist-empty {
  text-align: center;
  padding: 28px 16px;
}
.nut-hist-empty p { margin: 0 0 8px; }
.nut-hist-empty .btn-primary { margin-top: 10px; }
.nutrition-menu-dialog { --modal-w: 460px; --modal-max-h: min(70svh, 580px); }
.nutrition-wizard-dialog { --modal-w: 560px; --modal-max-h: min(78svh, 680px); }
.nutrition-wizard-dialog.is-edit { --modal-w: 600px; }
.nutrition-wizard-dialog .modal-body { overflow-x: hidden; }
.nutrition-wizard-dialog .planner-catalog-head { flex: 1 1 auto; min-width: 0; }
.nutrition-wizard-dialog .wizard-step-label {
  margin: 0;
  padding: 8px 20px 0;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.nutrition-wizard-dialog .modal-header h3 { flex: 0 1 auto; }
.nutrition-tool-dialog .modal-header h3 { flex: 0 1 auto; }

.nut-modal-tip {
  width: 28px;
  height: 28px;
  margin-right: auto;
  opacity: 0.7;
}
.nut-modal-tip:hover { opacity: 1; }

.nut-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.nut-toggle input {
  width: 32px;
  height: 18px;
  margin: 0;
  appearance: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  border: 1px solid var(--hairline, var(--border));
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}
.nut-toggle input::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 160ms ease, background 160ms ease;
}
.nut-toggle input:checked {
  background: var(--primary);
  border-color: var(--primary);
}
.nut-toggle input:checked::after {
  transform: translateX(14px);
  background: #111;
}

.nutrition-wizard-meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 10px;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
}
.nutrition-wizard-panel .nutrition-name-field { margin-bottom: 0; }
.nutrition-name-field input { max-width: 100%; min-width: 0; }
.nutrition-vigencia {
  margin: 0;
  padding: 8px 10px 10px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  min-width: 0;
  min-inline-size: 0;
  max-width: 100%;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 40%, transparent);
}
.nutrition-vigencia legend {
  padding: 0 4px;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.nutrition-vigencia-dates {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}
.nutrition-wizard-panel .nutrition-vigencia label,
.nutrition-vigencia label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.nutrition-vigencia input[type="date"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 0.85rem;
}
.nutrition-locked-client {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 40%, transparent);
  opacity: 0.92;
  pointer-events: none;
}
.nutrition-locked-kicker {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.nutrition-locked-client strong { font-size: 0.9rem; }

.nutrition-cal {
  display: grid;
  gap: 0;
  min-width: 0;
  max-width: 100%;
}
.nutrition-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.nutrition-cal-head .icon-btn { width: 28px; height: 28px; }
.nutrition-cal.is-mini {
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  overflow: hidden;
  background: var(--sys-surface, var(--surface));
}
.nutrition-cal-weekdays,
.nutrition-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
}
.nutrition-cal-weekdays {
  border-bottom: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 55%, transparent);
}
.nutrition-cal-weekdays span {
  min-width: 0;
  padding: 6px 0;
  border-right: 1px solid var(--hairline, var(--border));
  text-align: center;
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--muted);
}
.nutrition-cal-weekdays span:last-child { border-right: 0; }
.nutrition-cal-day {
  box-sizing: border-box;
  margin: 0;
  width: auto;
  min-width: 0;
  height: 34px;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--hairline, var(--border));
  border-bottom: 1px solid var(--hairline, var(--border));
  border-radius: 0;
  background: var(--sys-surface, var(--surface));
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nutrition-cal-grid > :nth-child(7n) { border-right: 0; }
.nutrition-cal-grid > :nth-last-child(-n + 7) { border-bottom: 0; }
.nutrition-cal-day:hover { background: color-mix(in srgb, var(--primary) 14%, var(--sys-surface, var(--surface))); }
.nutrition-cal-day.is-on {
  background: var(--primary);
  color: var(--tenant-primary-contrast, #1a1208);
  font-weight: 750;
}
.nutrition-cal-day.is-on:hover { filter: brightness(1.05); }
.nutrition-cal-day.is-muted {
  color: var(--muted);
  opacity: 0.55;
  pointer-events: none;
}
.nutrition-cal-day.is-today:not(.is-on) {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 55%, transparent);
}
.nutrition-cal-day.is-out {
  visibility: visible;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 70%, transparent);
  pointer-events: none;
  cursor: default;
}
.nutrition-meal-days {
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary, #f97316) 28%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary, #f97316) 6%, var(--sys-surface, var(--surface)));
  min-width: 0;
}
.nutrition-meal-days.is-empty {
  border-color: color-mix(in srgb, #eab308 45%, var(--border));
  background: color-mix(in srgb, #eab308 8%, var(--sys-surface, var(--surface)));
}
.nutrition-meal-days-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.nutrition-meal-days-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.nutrition-meal-days-title > .nav-ico {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--primary, #f97316);
  flex: 0 0 auto;
}
.nutrition-meal-days-title strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}
.nutrition-meal-days-title .hint {
  margin: 2px 0 0;
  font-size: 0.68rem;
}
.nutrition-meal-days-empty {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, #eab308 50%, var(--border));
  background: color-mix(in srgb, #eab308 12%, transparent);
  color: color-mix(in srgb, #eab308 35%, var(--text));
  font-size: 0.78rem;
  font-weight: 650;
}
.nutrition-meal-days-toggle {
  display: inline-flex;
  width: auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
  flex: 0 0 auto;
}
.nutrition-meal-days-toggle:hover { color: var(--primary); }
.nutrition-meal-days .nutrition-acc-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  opacity: 0.7;
  transition: transform 160ms ease;
}
.nutrition-meal-days.is-open .nutrition-acc-chevron { transform: rotate(180deg); }
.nutrition-meal-days-panel {
  display: grid;
  gap: 10px;
  padding: 10px 0 2px;
  min-width: 0;
}
.nutrition-meal-days-panel.hidden { display: none; }
.nutrition-meal-day-filters {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.nutrition-filter-group { display: grid; gap: 6px; min-width: 0; }
.nutrition-filter-kicker {
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.nutrition-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.nutrition-filter-divider {
  height: 1px;
  background: var(--hairline, var(--border));
}
.nutrition-filter-row .nutrition-day-chip,
.nutrition-meal-day-filters .nutrition-day-chip {
  min-width: 34px;
  padding: 6px 10px;
  font-size: 0.72rem;
}
.nutrition-meal-day-filters .nutrition-day-chip.is-on {
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  color: color-mix(in srgb, var(--primary) 82%, white);
}
.nutrition-day-chip.is-clear {
  justify-self: start;
  min-width: 72px;
  color: color-mix(in srgb, #c45c4a 80%, var(--text));
  border-color: color-mix(in srgb, #c45c4a 35%, var(--hairline, var(--border)));
  background: color-mix(in srgb, #c45c4a 8%, transparent);
}
.nutrition-day-chip.is-clear:hover {
  border-color: color-mix(in srgb, #c45c4a 55%, transparent);
  color: #c45c4a;
}
.nutrition-meal-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
  align-items: end;
  gap: 8px;
  min-width: 0;
}
.nutrition-meal-range.hidden { display: none; }
.nutrition-wizard-panel .nutrition-meal-range label,
.nutrition-meal-range label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  min-width: 0;
  font-size: 0.68rem;
  color: var(--muted);
}
.nutrition-meal-range input[type="date"] {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 0.82rem;
}
.nutrition-cal.is-mini .nutrition-cal-day {
  height: 32px;
  font-size: 0.72rem;
}
.nutrition-meal-days-summary {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
}
.nutrition-meal-block,
.nutrition-comidas-builder {
  min-width: 0;
  max-width: 100%;
}
.nutrition-add-meal { margin-top: 4px; }

/* CTAs nutri legibles (btn-secondary no existía → blanco-sobre-blanco). */
.nutrition-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  width: auto;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease;
}
.nutrition-action-btn .nav-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
}
.nutrition-action-btn--primary {
  background: var(--primary, #f97316);
  border-color: var(--primary, #f97316);
  color: var(--tenant-primary-contrast, #fff);
}
.nutrition-action-btn--primary:hover {
  filter: brightness(1.06);
}
.nutrition-action-btn--primary:active {
  transform: scale(0.98);
}
.nutrition-action-btn--ghost {
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, transparent);
  border-color: var(--border);
  color: var(--text);
}
.nutrition-action-btn--ghost:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--sys-surface, var(--surface)));
}

.nutrition-wizard-comidas-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 10px 0 14px;
}
.nutrition-wizard-comidas-actions .nutrition-add-meal {
  margin-top: 0;
}
.nutrition-comidas-empty {
  padding: 18px 14px;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 70%, transparent);
}
.nutrition-comidas-empty .hint { margin: 0; }
.nutrition-meal-food-actions {
  display: flex;
  gap: 8px;
  margin: 8px 0 10px;
}
.nutrition-meal-food-actions .nutrition-action-btn {
  align-self: flex-start;
}
.nutrition-menu-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}
.nutrition-menu-form-meal-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.nutrition-menu-form-meal-row input {
  flex: 1 1 auto;
}
/* meal-block + foods list styles live under #nutrition-pane-biblioteca overrides */

/* Food picker modal: toolbar limpia + grid 2 cols, sin pelear con pager. */
.nutrition-food-catalog-dialog { --modal-w: min(920px, 96vw); }
.nutrition-food-catalog-dialog .planner-catalog-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden; /* pager fijo; sin scroll interior del body */
}
.nutrition-food-picker-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  flex: 0 0 auto;
}
.nutrition-food-picker-toolbar .nutrition-search-field--picker {
  flex: 1 1 200px;
  min-width: 160px;
  max-width: 320px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 40%, transparent);
  min-height: 36px;
}
.nutrition-food-picker-toolbar .nutrition-search-field--picker .nav-ico {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex: 0 0 auto;
}
.nutrition-food-picker-toolbar .nutrition-search-field--picker input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  border: 0;
  background: transparent;
  padding: 6px 0;
  box-shadow: none;
  font-size: 0.82rem;
}
.nutrition-food-picker-toolbar .nutrition-filter-field--picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 14rem;
  min-width: 10rem;
  max-width: 18rem;
  padding: 0 10px 0 12px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 40%, transparent);
  min-height: 36px;
  margin: 0;
}
.nutrition-food-picker-toolbar .nutrition-filter-field--picker .nav-ico {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex: 0 0 auto;
}
.nutrition-food-picker-toolbar .nutrition-filter-field--picker select {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  border: 0;
  background: transparent;
  padding: 6px 0;
  box-shadow: none;
  font-size: 0.82rem;
}
.nutrition-food-picker-total {
  margin-left: auto;
  font-size: 0.72rem;
  white-space: nowrap;
}
.nutrition-food-catalog-dialog .nutrition-food-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: hidden; /* NO scroll — pagination owns browsing */
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nutrition-food-catalog-dialog .nutrition-food-picker-grid > .hint {
  grid-column: 1 / -1;
}
.nutrition-food-catalog-dialog .nutrition-food-picker-grid .foods-catalog-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 82%, transparent);
  min-height: 0;
}
.nutrition-food-catalog-dialog .nutrition-food-picker-grid .foods-catalog-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
}
.nutrition-food-picker-grid .planner-pick-card {
  position: relative;
  list-style: none;
  cursor: pointer;
}
.nutrition-food-catalog-dialog #nfood-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 2px 2px;
  min-height: 36px;
  border-top: 1px solid var(--hairline, var(--border));
}
.nutrition-food-catalog-dialog #nfood-pager.hidden {
  display: none;
}
.nutrition-food-catalog-dialog #nfood-pager .nutrition-pager-btn {
  color: var(--text);
  opacity: 1;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  background: color-mix(in srgb, var(--sys-surface-2, var(--surface)) 70%, transparent);
}
.nutrition-food-catalog-dialog #nfood-pager .nutrition-pager-btn:hover:not(:disabled) {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}
.nutrition-food-catalog-dialog #nfood-pager .nutrition-pager-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.nutrition-food-catalog-dialog #nfood-pager-info {
  color: var(--text);
  opacity: 0.85;
  font-size: 0.76rem;
  text-align: center;
  flex: 1 1 auto;
}
@media (max-width: 720px) {
  .nutrition-food-catalog-dialog .nutrition-food-picker-grid {
    grid-template-columns: 1fr;
  }
}

.field-req {
  color: #ef4444;
  font-weight: 700;
  margin-left: 2px;
}
.field-opt {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.92em;
}

.nutrition-wizard-panel { min-width: 0; max-width: 100%; }
.nutrition-meal-block header input { max-width: 220px; }
.nutrition-meal-items .nutrition-porcion-unit {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
}
.nutrition-meal-items .porciones-input { width: 64px; }
.nutrition-remove-food.icon-btn,
.nutrition-remove-meal.icon-btn {
  width: 28px;
  height: 28px;
}

.nutrition-body-header {
  align-items: flex-start;
  gap: 8px;
}
.nutrition-body-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.nutrition-body-heading h3 { margin: 0; }
.nutrition-body-sub {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
  line-height: 1.35;
}
.nutrition-body-guide {
  position: relative;
  margin-right: 0;
  flex: 0 0 auto;
}
.nutrition-body-guide > summary {
  list-style: none;
  cursor: pointer;
}
.nutrition-body-guide > summary::-webkit-details-marker { display: none; }
.nutrition-body-guide-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  width: min(280px, 72vw);
  padding: 10px 12px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: var(--sys-surface, var(--surface));
  box-shadow: 0 12px 28px color-mix(in srgb, #000 45%, transparent);
}
.nutrition-body-guide-kicker {
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary, #F97316);
}
.nutrition-body-guide-panel ul {
  margin: 0;
  padding: 0 0 0 16px;
  display: grid;
  gap: 4px;
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.4;
}

.nutrition-body-modal-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nutrition-body-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0;
}
.nutrition-body-fields,
.nutrition-body-fields--primary {
  display: grid;
  grid-template-columns: minmax(128px, 1.15fr) repeat(4, minmax(0, 1fr)) minmax(72px, 0.75fr);
  gap: 8px;
  align-items: end;
}
.nutrition-body-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
}
.nutrition-body-field-label {
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.nutrition-body-field-label small {
  font-weight: 500;
  opacity: 0.75;
}
.nutrition-body-control {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 8px 0 10px;
  border-radius: 8px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 55%, transparent);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nutrition-body-control:focus-within {
  border-color: color-mix(in srgb, var(--primary, #F97316) 55%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #F97316) 22%, transparent);
}
.nutrition-body-control .nav-ico {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--primary, #F97316);
  opacity: 0.9;
}
.nutrition-body-control input,
.nutrition-body-control select {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}
.nutrition-body-control input:focus,
.nutrition-body-control select:focus {
  outline: none;
  box-shadow: none;
  border: 0;
}
.nutrition-body-unit {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.85;
}
.nutrition-body-form input[type="date"] {
  min-width: 0;
  color-scheme: dark;
}

.nutrition-body-section {
  margin: 0;
  padding: 8px 10px 10px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 22%, transparent);
}
.nutrition-body-section > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}
.nutrition-body-section > summary::-webkit-details-marker { display: none; }
.nutrition-body-section > summary::before {
  content: "▸";
  display: inline-block;
  color: var(--primary, #F97316);
  transition: transform 0.15s ease;
}
.nutrition-body-section[open] > summary::before { transform: rotate(90deg); }
.nutrition-body-section > summary .nav-ico {
  width: 15px;
  height: 15px;
  color: var(--primary, #F97316);
}
.nutrition-body-section > summary em {
  font-style: normal;
  font-weight: 600;
  color: var(--muted);
  margin-left: 2px;
}
.nutrition-body-advanced > summary em {
  font-size: 0.72rem;
  font-weight: 500;
}
.nutrition-body-adv-inner {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.nutrition-body-cat {
  margin: 2px 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.nutrition-body-cat em {
  font-style: normal;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--muted) 80%, var(--text));
}
.nutrition-body-adv-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.nutrition-body-adv-grid--peri {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.nutrition-body-adv-grid--bia {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nutrition-body-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 2px 0 0;
}
.nutrition-body-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: 0.72rem;
  background: var(--primary, #F97316);
  border-color: var(--primary, #F97316);
}
.nutrition-body-submit .nav-ico {
  width: 15px;
  height: 15px;
}
.nutrition-body-dialog {
  position: relative;
}
.nutrition-body-detail-pop {
  position: absolute;
  z-index: 12;
  right: 18px;
  bottom: 18px;
  left: auto;
  width: min(360px, calc(100% - 36px));
  max-height: min(52svh, 420px);
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  background: var(--sys-surface, var(--surface));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.nutrition-body-detail-pop > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.nutrition-body-detail-pop > header strong {
  font-size: 0.84rem;
}
.nutrition-body-detail-body {
  display: grid;
  gap: 10px;
  font-size: 0.78rem;
}
.nutrition-body-detail-body h5 {
  margin: 0 0 4px;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.nutrition-body-detail-body dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  margin: 0;
}
.nutrition-body-detail-body dt { color: var(--muted); }
.nutrition-body-detail-body dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.nutrition-body-detail-empty { margin: 0; color: var(--muted); }
.nutrition-body-list .nutrition-body-detail-btn {
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--primary, #F97316);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nutrition-body-list .nutrition-body-detail-btn:hover { color: color-mix(in srgb, var(--primary, #F97316) 80%, white); }
.nutrition-body-hist-title {
  margin: 4px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}
.nutrition-body-list {
  max-height: min(280px, 36svh);
  overflow-y: auto;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 28%, transparent);
}
.nutrition-body-list table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.nutrition-body-list th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--sys-surface, var(--surface));
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.nutrition-body-list th, .nutrition-body-list td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--hairline, var(--border));
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nutrition-body-list td.nutrition-body-lectura {
  white-space: normal;
  max-width: 200px;
  font-size: 0.74rem;
  color: var(--muted);
}
.nutrition-body-list tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 35%, transparent);
}
.nutrition-body-ref-assets {
  display: grid;
  gap: 10px;
  margin: 8px 0 12px;
}
.nutrition-body-ref-assets img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--hairline, var(--border));
  background: #fff;
}
.nutrition-pp-upload,
.nutrition-pp-compare {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  margin: 8px 0;
}
.nutrition-pp-upload label,
.nutrition-pp-compare label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--muted);
}
.nutrition-pp-file-label input[type="file"] {
  max-width: 220px;
  font-size: 0.72rem;
}
.nutrition-pp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0 6px;
}
.nutrition-pp-sub {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text, #e8eaed);
}
.nutrition-pp-sessions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nutrition-pp-session-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  background: var(--sys-elevated, rgba(255, 255, 255, 0.03));
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.nutrition-pp-session-card:hover {
  border-color: var(--accent, #7dd3a0);
  background: rgba(125, 211, 160, 0.06);
}
.nutrition-pp-session-thumbs {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.nutrition-pp-session-thumb {
  width: 40px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--sys-bg, var(--bg));
}
.nutrition-pp-session-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 52px;
  border-radius: 6px;
  border: 1px dashed var(--border, rgba(255, 255, 255, 0.15));
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
}
.nutrition-pp-session-thumb--lg {
  width: 100%;
  min-height: 140px;
  height: auto;
  aspect-ratio: 3/4;
}
.nutrition-pp-session-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.78rem;
}
.nutrition-pp-session-meta span {
  color: var(--muted);
  font-size: 0.72rem;
}
.nutrition-pp-session {
  margin: 10px 0 14px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  background: var(--sys-elevated, rgba(0, 0, 0, 0.2));
}
.nutrition-pp-session-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.nutrition-pp-session-head h5 {
  margin: 0;
  font-size: 0.9rem;
}
.nutrition-pp-session-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.nutrition-pp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.nutrition-pp-card img,
.nutrition-pp-compare-grid img,
.nutrition-pp-compare-cell img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 8px;
  background: var(--sys-bg, var(--bg));
}
.nutrition-pp-card figcaption,
.nutrition-pp-compare-grid figcaption,
.nutrition-pp-compare-cell figcaption {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 4px;
}
.nutrition-pp-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.nutrition-pp-compare-angles {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}
.nutrition-pp-compare-row h5 {
  margin: 0 0 6px;
  font-size: 0.8rem;
}
.nutrition-pp-compare-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 720px) {
  .nutrition-pp-session-trio {
    grid-template-columns: 1fr;
  }
}
.nutrition-menu-food-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.nutrition-subs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.nutrition-subs-list li {
  padding: 8px 10px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 8px;
}
.nut-pdf-ref-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.nut-pdf-ref-imgs img {
  width: 100%;
  max-height: 160px;
  object-fit: contain;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.nutrition-body-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nutrition-body-trend-up { color: #22c55e; }
.nutrition-body-trend-down { color: var(--primary, #F97316); }
.nutrition-body-trend-flat { color: var(--muted); }

.nutrition-search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 40%, transparent);
}
.nutrition-search-field .nav-ico { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }
.nutrition-search-field input {
  flex: 1;
  border: 0;
  background: transparent;
  min-width: 0;
}
.nutrition-foods-toolbar select {
  max-width: 200px;
  border-radius: 10px;
}
.nutrition-foods-dialog,
#nutrition-pane-biblioteca .nutrition-foods-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.nutrition-foods-dialog .nutrition-search-field,
#nutrition-pane-biblioteca .nutrition-search-field {
  flex: 1 1 140px;
  min-width: 110px;
  max-width: 46%;
}
.nutrition-foods-dialog .nutrition-foods-toolbar select,
.nutrition-foods-dialog #foods-catalog-categoria-filter,
#nutrition-pane-biblioteca .nutrition-foods-toolbar select,
#nutrition-pane-biblioteca #foods-catalog-categoria-filter {
  flex: 1 1 14rem;
  min-width: 13.5rem;
  max-width: none;
  width: auto;
  text-overflow: clip;
  overflow: visible;
}
.nutrition-foods-dialog .foods-catalog-add,
#nutrition-pane-biblioteca .foods-catalog-add {
  color: #fff;
  background: #f97316;
  border-color: #f97316;
}
.nutrition-foods-dialog .foods-catalog-add:hover:not(:disabled),
#nutrition-pane-biblioteca .foods-catalog-add:hover:not(:disabled) {
  background: #ea580c;
  border-color: #ea580c;
  color: #fff;
}
.nutrition-foods-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
#nutrition-lib-foods .nutrition-foods-list.nutrition-foods-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: auto;
  gap: 10px;
  flex: 0 0 auto;
  min-height: auto;
  height: auto;
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
  overscroll-behavior: auto;
  align-content: start;
  align-items: stretch;
}
#nutrition-lib-foods .nutrition-foods-empty {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px 16px;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 55%, transparent);
}
.foods-catalog-item {
  padding: 10px 4px;
  border-radius: 0;
}
#nutrition-lib-foods .foods-catalog-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px 8px;
  padding: 10px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  border-bottom: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 78%, transparent);
  min-height: 0;
  height: auto;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#nutrition-lib-foods .foods-catalog-tags {
  max-width: 100%;
  margin-top: 6px;
}
#nutrition-lib-foods .foods-catalog-tag {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nutrition-lib-foods .foods-catalog-card:hover {
  border-color: color-mix(in srgb, #f97316 42%, var(--border));
  background: color-mix(in srgb, #f97316 6%, var(--sys-surface, var(--surface)));
}
#nutrition-lib-foods .foods-catalog-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
}
#nutrition-lib-foods .foods-catalog-item-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#nutrition-lib-foods .foods-catalog-macros {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0;
}
#nutrition-lib-foods .foods-catalog-macros span {
  font-variant-numeric: tabular-nums;
}
#nutrition-lib-foods .foods-catalog-item-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  align-self: center;
}
.foods-catalog-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  background: color-mix(in srgb, #f97316 14%, #1c1917);
  flex: 0 0 auto;
  display: block;
}
.foods-catalog-thumb--plato {
  display: grid;
  place-items: center;
  color: color-mix(in srgb, #fdba74 80%, var(--muted));
  border: 1px solid color-mix(in srgb, #f97316 28%, var(--border));
}
.foods-catalog-thumb--plato .nav-ico {
  width: 22px;
  height: 22px;
  opacity: 0.85;
}
.foods-catalog-item-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.foods-catalog-item-title strong {
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.foods-catalog-cat {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 550;
}
.foods-catalog-macros {
  margin: 3px 0 0;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
}
.foods-catalog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.foods-catalog-tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, #f97316 14%, transparent);
  color: #fdba74;
  border: 1px solid color-mix(in srgb, #f97316 28%, transparent);
}
.foods-catalog-item-actions .icon-btn { width: 30px; height: 30px; }
.foods-catalog-item-actions [data-food-edit]:hover:not(:disabled) { color: var(--primary); }
.foods-catalog-item-actions [data-food-delete]:hover:not(:disabled) {
  color: #f87171;
  border-color: color-mix(in srgb, #ef4444 50%, var(--border));
  background: color-mix(in srgb, #ef4444 12%, transparent);
}

/* historial cards: estilos canónicos en .nutrition-hist-card (bloque nutrition-history-dialog) */

.meal-review-card {
  gap: 8px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: start;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.meal-review-card.is-resolved {
  border-color: color-mix(in srgb, #22c55e 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #22c55e 25%, transparent);
}
.meal-review-card h4 {
  font-size: 0.84rem;
  margin: 0;
  font-weight: 700;
  min-width: 0;
}
.nutrition-alerts-dialog { position: relative; }
.nutrition-alerts-body { position: relative; min-height: 0; }
.nutrition-alerts-dialog .meals-review-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  min-height: 0;
}
.nutrition-alerts-dialog .meal-review-card .meal-photo-thumb {
  width: 56px;
  height: 56px;
  max-height: 56px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  cursor: zoom-in;
}
.nutrition-alerts-dialog .meal-photo-placeholder { display: none; }
.meal-review-main { min-width: 0; display: grid; gap: 6px; }
.meal-review-tools {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.meal-review-tools .icon-btn {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: var(--muted);
}
.meal-review-tools .icon-btn.is-active,
.meal-review-tools .icon-btn.has-data {
  color: var(--primary, #F97316);
}
.meal-review-tools .icon-btn.is-alert {
  color: #ef4444;
}
.meal-review-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.meal-review-side .icon-btn {
  width: 30px;
  height: 30px;
}
.meal-review-side .meal-approve {
  color: #22c55e;
}
.meal-review-side .meal-reject {
  color: #ef4444;
}
.meal-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--muted);
}
.meal-client-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary, #F97316) 70%, transparent);
  color: var(--primary, #F97316);
  font-weight: 650;
  font-size: 0.7rem;
  line-height: 1.4;
}
.meal-ia-tag {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 55%, transparent);
  font-weight: 650;
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.meal-alert-reason {
  margin: 0;
  color: #ef4444;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.35;
}
.meal-note-saved {
  margin: 0;
  font-size: 0.7rem;
  color: var(--primary, #F97316);
  font-weight: 650;
}
.meal-alert-pop {
  position: absolute;
  z-index: 14;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, calc(100% - 28px));
  max-height: min(60svh, 380px);
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  background: var(--sys-surface, var(--surface));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}
.meal-alert-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.meal-alert-pop-head strong { font-size: 0.86rem; }
.meal-alert-pop-x {
  color: #ef4444;
  font-weight: 700;
  line-height: 1;
  min-width: 28px;
  padding: 2px 6px;
}
.meal-alert-pop-x:hover,
.meal-alert-pop-x:focus-visible {
  color: #f87171;
}
.meal-alert-pop-body {
  font-size: 0.8rem;
  color: var(--text);
  display: grid;
  gap: 8px;
}
.meal-alert-pop-body .hint { margin: 0; }
.meal-alert-pop-body textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 40%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
}
.meal-alert-pop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.meal-alert-pop-actions .meal-note-save {
  min-height: 34px;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: var(--primary, #F97316);
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  cursor: pointer;
}
.meal-alert-pop-actions .meal-note-save:hover,
.meal-alert-pop-actions .meal-note-save:focus-visible {
  filter: brightness(1.06);
}
.nutrition-menu-dialog { position: relative; }
.nutrition-pop {
  position: absolute;
  top: 56px;
  left: 18px;
  z-index: 8;
  max-width: min(320px, calc(100% - 36px));
  padding: 10px 12px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  background: var(--sys-surface, var(--surface));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.nutrition-pop-kicker {
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.nutrition-pop ul { margin: 0; padding-left: 18px; font-size: 0.82rem; }
.nutrition-acc-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.nutrition-menu-datebar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.nutrition-menu-datebar input[type="date"] { flex: 1; }
.nutrition-meal-acc {
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  overflow: hidden;
}
.nutrition-meal-acc + .nutrition-meal-acc { margin-top: 6px; }
.nutrition-meal-acc > button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.nutrition-meal-acc > button:hover { color: var(--primary); }
.nutrition-meal-acc ul { margin: 0; padding: 0 12px 10px 28px; font-size: 0.82rem; }
.nutrition-meal-acc:not(.is-open) ul,
.nutrition-meal-acc:not(.is-open) .hint { display: none; }
.nutrition-meal-acc .hint { margin: 0 12px 10px; }

@media (max-width: 720px) {
  .nutrition-body-fields,
  .nutrition-body-fields--primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nutrition-body-adv-grid,
  .nutrition-body-adv-grid--peri,
  .nutrition-body-adv-grid--bia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nutrition-body-submit { width: auto; min-width: 0; }
  .nutrition-body-cta { justify-content: flex-end; }
  .meal-review-card { grid-template-columns: 48px minmax(0, 1fr) auto; }
}

/* ── Reportes compactos Nutrición / Fisio (18 ago) ── */
.nut-report-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  overflow: hidden;
}

.nut-report-card {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 8px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 72%, transparent);
}

.nut-report-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
}

.nut-report-card header h4 {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.nut-report-card header span {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
}

.nut-report-card > .hint {
  margin: 0;
  font-size: 0.72rem;
}

.nut-report-kpis {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 0 0 auto;
}

.nut-report-kpis strong {
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.nut-report-kpis em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--muted);
}

.nut-spark-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 0;
  flex: 1 1 auto;
}

.nut-spark-row span {
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nut-spark {
  width: 100%;
  height: 28px;
  display: block;
}

.nut-spark-line {
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.nut-spark-fill {
  fill: color-mix(in srgb, var(--primary) 22%, transparent);
}

.nut-spark-empty { font-size: 0.7rem; color: var(--muted); }
.nut-spark-delta { font-size: 0.7rem; font-weight: 650; color: var(--muted); }
.nut-spark-delta.is-down { color: var(--ok, #22c55e); }
.nut-spark-delta.is-up { color: var(--err, #ef4444); }

.nut-week-dots {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  flex: 1 1 auto;
  align-content: center;
}

.nut-week-dot {
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-bg) 55%, transparent);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  cursor: default;
}

.nut-week-dot.is-on {
  background: color-mix(in srgb, var(--primary) 28%, transparent);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  color: var(--text);
}

.nut-week-dot.is-alert {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--err, #ef4444) 70%, transparent);
}

.nut-week-dot.is-today { outline: 1px dashed color-mix(in srgb, var(--primary) 50%, transparent); }

.nut-report-card .adherence-row { padding: 3px 0; }
.nut-report-card .adherence-bar { height: 6px; background: color-mix(in srgb, var(--muted) 22%, transparent); border-radius: 99px; overflow: hidden; }
.nut-report-card .adherence-label { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--muted); margin-bottom: 2px; }

.nut-stat-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  flex: 1 1 auto;
}

.nut-stat-pills li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.nut-stat-pills strong { font-size: 1.05rem; font-weight: 750; }
.nut-stat-pills span { font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

.nut-report-pre,
.physio-report-pre {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-bg) 70%, transparent);
  border: 1px solid var(--hairline, var(--border));
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.nut-report-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.nut-report-table th, .nut-report-table td { padding: 6px 8px; border-bottom: 1px solid var(--hairline); text-align: left; }

#tab-recuperacion .physio-eva-trend { margin: 0; font-size: 0.72rem; flex: 0 0 auto; display: none; }

.physio-eva-svg {
  width: 100%;
  flex: 1 1 auto;
  min-height: 140px;
  height: 100%;
  display: block;
  overflow: visible;
}
.physio-eva-area { fill: color-mix(in srgb, var(--primary) 18%, transparent); }
.physio-eva-line { stroke: var(--primary); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.physio-eva-thresh { stroke: color-mix(in srgb, var(--err, #ef4444) 55%, transparent); stroke-dasharray: 4 3; stroke-width: 1; }
.physio-eva-dot { fill: var(--primary); }
.physio-eva-dot.is-alert { fill: var(--err, #ef4444); }
.physio-eva-axis {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.62rem;
  color: var(--muted);
  flex: 0 0 auto;
  line-height: 1.25;
  padding-bottom: 2px;
}
.physio-eva-axis span {
  min-width: 0;
  flex: 1 1 0;
  overflow: visible;
  white-space: nowrap;
  text-align: center;
}
.physio-eva-axis span:first-child { text-align: left; }
.physio-eva-axis span:last-child { text-align: right; }

.physio-progress-meta {
  display: grid;
  grid-template-columns: minmax(110px, 132px) minmax(0, 1fr);
  gap: 10px;
  flex: 0 0 auto;
  min-height: 0;
  align-items: stretch;
}

.physio-hep-ring-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface) 55%, transparent);
}

.physio-hep-ring { width: 40px; height: 40px; flex: 0 0 auto; }
.physio-hep-ring-bg { fill: none; stroke: color-mix(in srgb, var(--muted) 28%, transparent); stroke-width: 6; }
.physio-hep-ring-fg { fill: none; stroke: var(--primary); stroke-width: 6; stroke-linecap: round; }
.physio-hep-ring-wrap strong { display: block; font-size: 0.82rem; line-height: 1.15; }
.physio-hep-ring-wrap span { font-size: 0.68rem; color: var(--text); }
.physio-hep-ring-wrap em { display: block; font-style: normal; font-size: 0.58rem; color: var(--muted); }

.physio-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 4px 4px 4px 14px;
  font-size: 0.74rem;
  line-height: 1.4;
  height: calc(4 * 1.4em + 3 * 6px + 8px);
  max-height: calc(4 * 1.4em + 3 * 6px + 8px);
  min-height: calc(3 * 1.4em + 2 * 6px + 8px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  list-style-position: inside;
}
.physio-timeline li { margin: 0; color: var(--text); }
.physio-timeline time { color: var(--muted); font-variant-numeric: tabular-nums; }
.physio-timeline .physio-tl-alert { color: var(--err, #ef4444); }

.physio-hep-dialog { --modal-w: 640px; --modal-max-h: min(78svh, 680px); }
.physio-hep-dialog .modal-body { padding-top: 10px; padding-bottom: 8px; }
.physio-hep-dialog .hep-plan-root {
  min-height: 0;
  max-height: min(52vh, 420px);
  overflow-y: auto;
}

.physio-intensity-dialog {
  --modal-w: 400px;
  --modal-max-h: min(70svh, 360px);
  --modal-radius: 16px;
}
.physio-intensity-dialog .modal-header {
  padding: 14px 16px 12px;
}
.physio-intensity-dialog .modal-header h3 {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.physio-intensity-dialog .modal-body {
  padding: 12px 16px 6px;
  overflow: visible;
}
.physio-intensity-dialog .modal-footer {
  padding: 10px 16px 14px;
  flex-wrap: wrap;
}
.physio-intensity-dialog #recovery-pain-intensity-skip {
  margin-right: auto;
  order: 0;
}
.physio-intensity-scale-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.physio-intensity-scale-row .physio-eva-scale {
  flex: 1 1 auto;
  min-width: 0;
}
.physio-intensity-scale-row output {
  flex: 0 0 auto;
  min-width: 1.4em;
  padding-top: 1px;
  text-align: right;
  font-size: 1.35rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--primary);
}


/* Planner calendar day/week/month — fills the module viewport, no page scroll */
.planner-view--calendar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.planner-calendar-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  margin-bottom: 0.35rem;
  flex: 0 0 auto;
  min-width: 0;
}
.planner-cal-filters { position: relative; flex: 0 0 auto; }
.planner-cal-filters-pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 13.5rem;
  padding: 0.7rem;
  border-radius: 12px;
  background: var(--sys-surface-2, var(--surface));
  color: var(--text);
  border: 1px solid var(--hairline, var(--border));
  box-shadow: var(--elev-2, 0 10px 28px rgba(0, 0, 0, 0.28));
  display: none;
  gap: 0.65rem;
}
.planner-cal-filters-pop:not([hidden]) { display: grid; }
.planner-cal-filters-kicker {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.planner-cal-mode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.planner-cal-mode .planner-viewswitch-btn {
  width: 100%;
  margin: 0;
  padding: 7px 6px;
  font-size: 0.76rem;
  justify-content: center;
}
.planner-cal-mode .planner-viewswitch-btn.is-active {
  background: var(--primary);
  color: var(--tenant-primary-contrast, #fff);
}
.planner-cal-filters-pop #plan-duplicate-week {
  width: 100%;
  justify-content: center;
}
.planner-month-nav { display: inline-flex; align-items: center; gap: 0.45rem; }
.planner-month-nav .icon-mini {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
}
.planner-month-nav.hidden,
#planner-day-nav.hidden,
#planner-week-tabs.hidden { display: none !important; }
.planner-month-label {
  min-width: 8.5rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: capitalize;
}
.planner-week-board { flex: 1; min-height: 0; overflow: auto; }
.planner-agenda--dense {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.planner-agenda--dense .planner-agenda-col { min-height: 0; padding: 0.35rem; }
.planner-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 22px repeat(6, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
  background: color-mix(in srgb, var(--sys-text) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--sys-text) 10%, transparent);
  border-radius: 12px;
  overflow: hidden;
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: none;
}
.planner-month > * {
  min-width: 0;
  max-width: 100%;
}
.planner-month-dow {
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 70%, var(--sys-surface, var(--surface)));
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
  overflow: hidden;
}
.planner-month-cell {
  background: var(--sys-surface, var(--surface));
  min-width: 0;
  min-height: 0;
  max-height: none;
  grid-row: auto;
  grid-column: auto;
  padding: 2px 3px 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  overflow: hidden;
}
.planner-month .planner-agenda-col {
  grid-row: auto;
  max-height: none;
  min-height: 0;
  overflow: hidden;
}
.planner-month-cell.is-out,
.planner-month-cell.is-disabled {
  opacity: 0.38;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 55%, var(--sys-surface, var(--surface)));
}
.planner-month-cell.is-in-plan {
  cursor: pointer;
}
.planner-month-cell.is-in-plan:hover {
  background: color-mix(in srgb, var(--primary) 7%, var(--sys-surface, var(--surface)));
}
.planner-month-cell.is-today {
  background: color-mix(in srgb, var(--primary) 10%, var(--sys-surface, var(--surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 42%, transparent);
}
.planner-month-cell.is-today .planner-month-num {
  background: var(--primary);
  color: var(--tenant-primary-contrast, #fff);
  border-radius: 999px;
  width: 1.45rem;
  height: 1.45rem;
  display: inline-grid;
  place-items: center;
}
.planner-month-cell-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  min-height: 1.45rem;
}
.planner-month-num {
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1;
}
.planner-month-cell-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.planner-cal-pill.is-overflow,
.planner-agenda-card.is-overflow {
  display: none;
}
.planner-month-more {
  flex: 0 0 auto;
  padding: 0 4px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--muted);
}
.planner-cal-pill {
  display: flex;
  align-items: center;
  height: 18px;
  min-height: 18px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--primary) 78%, #141414);
  color: var(--tenant-primary-contrast, #fff);
  font-size: 0.65rem;
  font-weight: 650;
  cursor: pointer;
  overflow: hidden;
  flex: 0 0 auto;
}
.planner-cal-pill:hover {
  filter: brightness(1.08);
}
.planner-cal-pill.is-dragging { opacity: 0.45; }
.planner-cal-pill-name {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planner-month-cell.slot-over,
.planner-month-cell.slot-copy {
  outline: 2px dashed color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: -3px;
  background-color: var(--primary-soft);
}
.planner-month-cell.slot-copy {
  outline-style: solid;
  outline-color: color-mix(in srgb, var(--success, #34d399) 65%, transparent);
}
.planner-cal-popover {
  position: fixed;
  z-index: 8;
  min-width: 168px;
  max-width: min(260px, calc(100vw - 24px));
  padding: 14px 14px 12px;
  border-radius: 22px;
  background: var(--sys-surface-2, var(--surface));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--hairline, var(--border)) 80%, transparent);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.5),
    0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent);
}
.planner-cal-popover::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 22px;
  width: 14px;
  height: 14px;
  background: inherit;
  border-left: 1px solid color-mix(in srgb, var(--hairline, var(--border)) 80%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--hairline, var(--border)) 80%, transparent);
  transform: rotate(45deg);
  border-radius: 3px 0 0 0;
}
.planner-cal-popover.is-above::before {
  top: auto;
  bottom: -7px;
  border-left: none;
  border-top: none;
  border-right: 1px solid color-mix(in srgb, var(--hairline, var(--border)) 80%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--hairline, var(--border)) 80%, transparent);
  border-radius: 0 0 3px 0;
}
.planner-cal-popover[hidden] { display: none !important; }
.planner-cal-popover-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}
.planner-cal-popover-x:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.planner-cal-popover-name {
  margin: 0 28px 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.planner-cal-popover-meta {
  margin: 4px 0 12px;
  font-size: 0.72rem;
}
.planner-cal-popover-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 10px;
}
.planner-cal-popover-actions .icon-mini {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface-1, var(--surface)) 88%, transparent);
}
.planner-cal-popover-actions .icon-mini:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.planner-cal-popover-actions .icon-mini.danger:hover {
  border-color: var(--danger, #f87171);
  color: var(--danger, #f87171);
}

.planner-schedule-dialog {
  --modal-w: min(400px, calc(100vw - 24px));
  --modal-max-h: min(86svh, 640px);
}
.planner-schedule-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.planner-schedule-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.planner-schedule-shortcuts .ex-tool-chip {
  font-size: 0.72rem;
  padding: 5px 9px;
  min-height: 32px;
}
.planner-schedule-shortcuts .ex-tool-chip.is-icon {
  width: 32px;
  min-width: 32px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}
.planner-schedule-shortcuts .ex-tool-chip.is-icon .nav-ico {
  width: 15px;
  height: 15px;
}
.planner-schedule-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.planner-schedule-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.planner-schedule-dow {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--muted);
  padding: 0 0 2px;
}
.planner-schedule-day {
  position: relative;
  aspect-ratio: 1;
  min-height: 28px;
  max-height: 40px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--sys-surface-1, var(--surface)) 70%, transparent);
  color: var(--text);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}
.planner-schedule-day.is-selectable {
  border-color: color-mix(in srgb, var(--sys-text) 16%, transparent);
  background: color-mix(in srgb, var(--sys-surface-2, var(--surface)) 88%, transparent);
  cursor: pointer;
}
.planner-schedule-day.is-selectable:hover:not(:disabled) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, var(--sys-surface, var(--surface)));
  color: var(--primary);
}
.planner-schedule-day:hover:not(:disabled) {
  border-color: var(--primary);
}
.planner-schedule-day.is-on {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--tenant-primary-contrast, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent);
  opacity: 1;
}
.planner-schedule-day.is-on:hover:not(:disabled) {
  filter: brightness(1.06);
  color: var(--tenant-primary-contrast, #fff);
}
.planner-schedule-day.is-source {
  box-shadow: inset 0 0 0 2px var(--primary);
  opacity: 1;
  font-weight: 800;
}
.planner-schedule-day.is-source.is-on {
  background: color-mix(in srgb, var(--primary) 82%, #111);
}
.planner-schedule-origen {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--primary);
  line-height: 1;
}
.planner-schedule-day.is-on .planner-schedule-origen {
  color: var(--tenant-primary-contrast, #fff);
}
.planner-schedule-day.is-past,
.planner-schedule-day.is-out,
.planner-schedule-day.is-locked:not(.is-source):not(.is-on),
.planner-schedule-day:disabled:not(.is-source):not(.is-on) {
  opacity: 0.34;
  cursor: not-allowed;
  border-color: transparent;
  filter: grayscale(0.25);
}
/* Idénticas ocupadas (place/manage): naranja visible aunque locked */
.planner-schedule-day.is-on.is-locked,
.planner-schedule-day.is-on:disabled,
.planner-schedule-day.has-identical.is-on {
  opacity: 1;
  filter: none;
  border-color: var(--primary);
  background: var(--primary);
  color: var(--tenant-primary-contrast, #fff);
}
.planner-schedule-day.is-past.is-on,
.planner-schedule-day.is-past.has-identical {
  opacity: 0.72;
  filter: none;
}
.planner-schedule-day.is-source:disabled {
  opacity: 1;
  cursor: default;
  filter: none;
}
.planner-schedule-day.is-other-month:not(.is-selectable) {
  opacity: 0.28;
}
.planner-schedule-day.is-other-month.is-selectable {
  opacity: 0.85;
}
.planner-schedule-day.has-identical::after {
  content: "";
  position: absolute;
  bottom: 3px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sys-surface, #000) 40%, transparent);
}
.planner-schedule-day.is-on.has-identical::after {
  background: var(--tenant-primary-contrast, #fff);
}
.planner-agenda-col:not(.is-out-plan) { cursor: pointer; }
.planner-day-board {
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.planner-day-board-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--hairline, var(--border));
}
.planner-day-board-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.planner-agenda-col.is-out-plan { opacity: 0.45; pointer-events: none; }
.planner-schedule-days { display: grid; gap: 0.65rem; }

dialog.planner-calendar-dialog {
  --modal-w: min(1480px, calc(100vw - 16px));
  --modal-max-h: 96svh;
  width: min(1480px, calc(100vw - 16px));
  height: 96svh;
  max-height: 96svh;
}

.planner-calendar-header {
  position: relative;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 48px 10px 16px;
}

.planner-calendar-header h3 {
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.95rem;
}

.planner-calendar-header .planner-calendar-bar {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  flex-wrap: wrap;
}

.planner-calendar-header > [data-fit-modal-close],
.planner-calendar-header > button[aria-label="Cerrar"] {
  position: absolute;
  top: 8px;
  right: 10px;
}

.planner-calendar-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden !important;
  padding: 0 12px 12px;
  min-height: 0;
}

.planner-calendar-dialog .planner-week-board {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: hidden;
  padding: 0;
}

.planner-calendar-dialog .planner-week-board:has(.planner-day-board) {
  overflow-y: auto;
}

.planner-calendar-dialog .planner-week-board:has(.planner-month) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.planner-calendar-dialog .planner-month {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
}

dialog.planner-day-add-dialog {
  --modal-w: min(440px, calc(100vw - 24px));
  --modal-max-h: min(70svh, 480px);
}
.planner-day-add-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}
.planner-day-add-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  /* ~4–5 filas visibles; el resto scrollea dentro de la lista */
  max-height: min(272px, 38svh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 2px;
}
.planner-day-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  flex: 0 0 auto;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--sys-text) 8%, transparent);
  background: color-mix(in srgb, var(--sys-surface-2, var(--surface)) 80%, transparent);
}
.planner-day-add-row:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}
.planner-day-add-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.planner-day-add-copy strong {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planner-day-add-meta {
  font-size: 0.74rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planner-day-add-go.icon-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}
.planner-day-add-go.icon-btn .nav-ico {
  width: 16px;
  height: 16px;
  stroke-width: 2.25;
}
.planner-day-add-go.icon-btn:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

@media (max-width: 430px) {
  .planner-day-add-list {
    max-height: min(240px, 42svh);
  }
  .planner-day-add-copy strong,
  .planner-day-add-meta {
    white-space: normal;
  }
}

.planner-calendar-dialog .planner-agenda--dense {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Portal-wide phone shell (~390px) — 2026-08-21
   Goal: usable on a phone without horizontal page scroll. Module polish
   later; this layer keeps login, drawer, topbar, tables, dialogs, planner,
   nutrition, physio and centro from exploding. Tenant primary unchanged.
   ═══════════════════════════════════════════════════════════════════════ */

html, body, #app {
  max-width: 100%;
  overflow-x: hidden;
}

.table-wrap,
.nutrition-body-list,
.modal-body :has(> table) {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  /* Rail / hidden modes are desktop chrome. On phone the hamburger owns nav. */
  html[data-sidebar-mode="hidden"] .sidebar,
  html[data-sidebar-mode="icons"] .sidebar,
  html[data-sidebar-mode="rail"] .sidebar,
  .sidebar {
    transform: translateX(-100%);
    pointer-events: auto;
    width: min(280px, 86vw);
  }
  html[data-sidebar-mode="hidden"] .sidebar.open,
  html[data-sidebar-mode="icons"] .sidebar.open,
  html[data-sidebar-mode="rail"] .sidebar.open,
  .sidebar.open {
    transform: translateX(0);
    pointer-events: auto;
  }
  .sidebar-brand-actions,
  .sidebar-expand-foot { display: none; }
  html[data-sidebar-mode="hidden"] .page-header { padding-left: 16px; }
  html[data-sidebar-mode="hidden"] .sidebar-reopen,
  html[data-sidebar-mode="hidden"] .sidebar-reopen[hidden] {
    display: none !important;
  }

  .page-header {
    min-width: 0;
    gap: 10px;
  }
  .page-header-titles { min-width: 0; }
  .topbar-actions {
    min-width: 0;
    flex-shrink: 1;
  }
  .topbar-search {
    min-width: 0;
    width: 40px;
    padding: 0;
    justify-content: center;
  }
  .topbar-search-text,
  .topbar-kbd { display: none; }

  .planner-libpane { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  #view-login {
    align-items: flex-start;
    padding: 16px 12px max(16px, env(safe-area-inset-bottom));
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .login-stack { max-width: 100%; width: 100%; }
  .login-card {
    width: 100%;
    padding: 16px 14px 14px;
  }
  .login-demo-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .page-header {
    padding: 10px 12px;
    gap: 8px;
  }
  .page-title { font-size: 1rem; }
  .page-breadcrumb { font-size: 0.65rem; }
  .sidebar-toggle,
  .topbar-btn.icon-only,
  .topbar-search {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .status-pill #topbar-status-text { display: none; }
  .status-pill {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    justify-content: center;
  }

  .content {
    padding: 12px 16px 16px;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  .meals-review-grid,
  .wellness-catalog-grid,
  .mobility-video-grid,
  .exercise-card-grid,
  .exercise-card-grid-flat,
  .cmd-modules,
  .quick-grid,
  .streak-dashboard,
  .plan-macros-grid,
  .nutrition-totals-grid,
  .nutrition-macros-grid,
  .food-form-grid,
  .food-form-row--2,
  .food-form-row--3,
  .food-form-row--4,
  .food-form-row--flags,
  .nut-macro-grid,
  .nut-report-grid,
  .nutrition-body-fields,
  .planner-form-grid,
  .planner-sets-row,
  .session-block-row,
  .planner-library-bar,
  .planner-day-grid,
  .pagos-kpi-row,
  #tab-metricas .metrics-kpis,
  #tab-marca .palette-grid,
  .cmd-hero-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmd-hero-stats { display: grid; gap: 12px; }
  .cmd-hero { flex-direction: column; align-items: stretch; }

  .cal-days,
  .cal-weekdays {
    gap: 2px;
    min-width: 0;
  }
  .cal-day-cell {
    min-width: 0;
    min-height: 0;
    padding: 3px 2px;
  }
  #centro-panel-calendario .cal-day-cell {
    min-height: 84px;
  }
  #centro-panel-calendario .cal-days {
    grid-auto-rows: minmax(84px, 1fr);
  }
  .cal-chip { font-size: 0.55rem; padding: 0 2px; }

  .planner-month {
    min-width: 0;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: 22px repeat(6, minmax(0, 1fr));
  }
  .planner-month-cell { padding: 3px 2px 4px; gap: 2px; }
  .planner-month-dow { font-size: 0.62rem; letter-spacing: 0; }
  .planner-month-nav .icon-mini {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
  .planner-month-label { min-width: 6.5rem; font-size: 0.88rem; }
  .planner-cal-pill {
    height: 18px;
    min-height: 18px;
    padding: 0 4px;
    font-size: 0.6rem;
    border-radius: 4px;
  }
  .planner-schedule-dialog {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    max-height: min(92svh, 760px);
  }
  .planner-assign-body {
    min-height: 0;
    overflow-y: auto;
  }
  .assign-footer {
    position: sticky;
    bottom: 0;
    background: var(--sys-surface, var(--surface));
  }
  .assign-progress { margin: 0 12px 2px; }
  .libpane-plan-session { min-height: 48px; }
  .planner-fab-wrap {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .planner-progress-week {
    padding-right: 64px;
    gap: 2px;
  }
  .planner-progress-week-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
  .planner-progress-dow { width: 28px; }

  dialog.planner-calendar-dialog,
  dialog.planner-sessions-dialog {
    width: min(100vw - 0.5rem, 100%);
    max-width: calc(100vw - 0.5rem);
    height: 100svh;
    max-height: 100svh;
    --modal-max-h: 100svh;
    --modal-w: calc(100vw - 0.5rem);
    border-radius: 12px;
  }
  .planner-calendar-header { padding: 10px 48px 10px 12px; }
  .planner-calendar-body { padding: 0 8px 10px; }
  .planner-sessions-header { padding: 10px 48px 10px 12px; }
  .planner-sessions-body { padding: 0 8px 10px; }
  .planner-plan-actions {
    width: 100%;
  }
  #tab-planificador .planner-view--metrics {
    overflow-x: hidden;
    overflow-y: visible;
    padding-bottom: 72px;
  }

  .centro-subnav {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .centro-subnav::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .centro-subnav-btn {
    flex: 0 0 auto;
    min-height: 40px;
  }
}

@media (pointer: coarse) {
  .sidebar-toggle,
  .topbar-btn,
  .icon-btn,
  .nav-item,
  .planner-weekday-btn,
  .nutrition-day-chip,
  .planner-viewswitch-btn {
    min-height: 44px;
  }
}

/* Cómo va esta nutrición — tablero progreso */
.nut-report-grid--cvn {
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: auto auto auto;
}
.nut-report-hero { grid-column: 1 / -1; }
.nut-semaforo {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.nut-semaforo.is-green { background: color-mix(in srgb, #22c55e 22%, transparent); color: #15803d; }
.nut-semaforo.is-amber { background: color-mix(in srgb, #f59e0b 22%, transparent); color: #b45309; }
.nut-semaforo.is-red { background: color-mix(in srgb, #ef4444 22%, transparent); color: #b91c1c; }
.nut-hero-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.nut-hero-kpis strong { display: block; font-size: 1.25rem; font-weight: 750; letter-spacing: -0.02em; }
.nut-hero-kpis span { font-size: 0.68rem; color: var(--muted); }
.nut-progress-days { display: flex; gap: 3px; margin-top: 8px; flex-wrap: wrap; }
.nut-prog-day {
  width: 10px; height: 10px; border-radius: 3px;
  background: color-mix(in srgb, var(--muted) 28%, transparent);
}
.nut-prog-day.is-ok { background: #22c55e; }
.nut-prog-day.is-parcial { background: #f59e0b; }
.nut-prog-day.is-alerta { background: #ef4444; }
.nut-prog-day.is-vacio { background: color-mix(in srgb, var(--muted) 22%, transparent); }
.nut-tip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nut-tip-list li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px; border-radius: 10px;
  border: 1px solid var(--hairline, var(--border));
  font-size: 0.72rem;
}
.nut-tip-list li.is-ok { border-color: color-mix(in srgb, #22c55e 40%, var(--border)); }
.nut-tip-list li.is-warn { border-color: color-mix(in srgb, #f59e0b 40%, var(--border)); }
.nut-tip-list li.is-risk { border-color: color-mix(in srgb, #ef4444 40%, var(--border)); }
.nut-tip-list strong { font-size: 0.75rem; }
.nut-tip-list span { color: var(--muted); }
.nut-recipe-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nut-recipe-chip {
  font-size: 0.68rem; padding: 4px 8px; border-radius: 999px;
  border: 1px dashed var(--hairline, var(--border)); color: var(--muted);
}
.nut-proj-pills { display: flex; gap: 8px; list-style: none; margin: 6px 0 0; padding: 0; flex-wrap: wrap; }
.nut-proj-pills li { display: flex; flex-direction: column; min-width: 56px; }
.nut-proj-pills strong { font-size: 0.68rem; color: var(--muted); font-weight: 650; }
.nut-print-row { margin-top: 6px; }
@media (max-width: 960px) {
  .nut-report-grid--cvn { grid-template-columns: 1fr 1fr; }
  .nut-hero-kpis { grid-template-columns: 1fr 1fr; }
}
@media print {
  .nut-print-row, .fab, .bottom-nav, header, aside { display: none !important; }
  .nut-report-grid--cvn { grid-template-columns: 1fr 1fr; }
}


/* Nutrición P1 */
.nutrition-assessment { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.nutrition-assessment summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
/* legacy .nutrition-body-advanced removed — sections live under .nutrition-body-section */
.nutrition-recipes-list { display: grid; gap: 10px; }
.nutrition-recipe-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.nutrition-recipe-card header { display: flex; justify-content: space-between; gap: 8px; }
.nutrition-cal-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.nutrition-cal-actions { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.nut-silueta { display:flex; gap:12px; align-items:center; margin:10px 0; }
.nut-silueta strong { display:block; }
.nut-cadencia ul { list-style:none; padding:0; margin:8px 0 0; display:grid; gap:6px; }
.nut-cadencia li.is-vencido { color:#b42318; }
.nutrition-recipe-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.nutrition-pdf-actions { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.nutrition-hist-day-chips { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0; }
.nutrition-hist-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.nutrition-cal-day.has-menu { box-shadow: inset 0 -3px 0 var(--primary); }
.nutrition-cal-day.is-empty {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

/* Detalle «Ver plan» — historial (lectura) */
.nutrition-hist-detail-dialog {
  --modal-w: min(440px, 96vw);
  --modal-max-h: min(82svh, 720px);
}
.nutrition-hist-day-dialog {
  --modal-w: min(400px, 94vw);
  --modal-max-h: min(72svh, 560px);
}
.nutrition-hist-detail-head {
  margin: 0 0 10px;
}
.nutrition-hist-detail-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.nutrition-hist-detail-title-row strong {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.nutrition-hist-detail-head .hint { margin: 6px 0 0; }
.nutrition-hist-macros-grid {
  gap: 10px;
  margin: 12px 0 14px;
}
.nutrition-hist-macros-grid .plan-macro-stat {
  padding: 12px 12px 10px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, #F97316 4%);
}
.nutrition-hist-cal-block {
  margin: 4px 0 8px;
}
.nutrition-hist-cal-lab {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.nutrition-hist-notes {
  margin: 12px 0 0;
  padding: 8px 10px;
  border-left: 3px solid color-mix(in srgb, #F97316 55%, transparent);
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 70%, transparent);
  border-radius: 0 8px 8px 0;
  font-size: 0.78rem;
  line-height: 1.35;
}
.nutrition-hist-open-tip {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed var(--hairline, var(--border));
}
.nutrition-hist-day-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 2px 0 4px;
}
.nutrition-hist-meal-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 12px 11px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 92%, #F97316 3%);
}
.nutrition-hist-meal-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, #F97316 18%, transparent);
  color: #fdba74;
}
.nutrition-hist-meal-ico .nav-ico {
  width: 18px;
  height: 18px;
}
.nutrition-hist-meal-body { flex: 1 1 auto; min-width: 0; }
.nutrition-hist-meal-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.nutrition-hist-meal-title strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}
.nutrition-hist-meal-kcal {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 650;
  color: #fdba74;
  font-variant-numeric: tabular-nums;
}
.nutrition-hist-meal-items {
  margin: 4px 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}
.nutrition-hist-meal-count {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.68rem;
}
.nutrition-hist-day-empty { margin: 8px 0; }
@media print {
  @page {
    size: A4 portrait;
    margin: 10mm 12mm;
  }
  body.is-nut-pdf-print {
    background: #fff !important;
  }
  body.is-nut-pdf-print > *:not(#nut-pdf-print-root) {
    display: none !important;
  }
  #nut-pdf-print-root {
    display: block !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #1a1a1a !important;
  }
  #nut-pdf-print-root .nut-pdf-doc {
    display: block !important;
    background: #fff !important;
    color: #1a1a1a !important;
    gap: 0;
    justify-items: stretch;
  }
  #nut-pdf-print-root .nut-pdf-page {
    break-after: page;
    page-break-after: always;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 2mm 0 6mm !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  #nut-pdf-print-root .nut-pdf-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }
  #nut-pdf-print-root .nut-chart-svg,
  #nut-pdf-print-root .nut-pdf-chart-box svg {
    max-width: 100%;
    height: auto;
  }
  #nut-pdf-print-root .nut-pdf-two-col,
  #nut-pdf-print-root .nut-pdf-strategy,
  #nut-pdf-print-root .nut-pdf-dual-donuts,
  #nut-pdf-print-root .nut-pdf-tips-grid,
  #nut-pdf-print-root .nut-pdf-market {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Plan imprimible — preview (fondo claro dentro de portal dark) */
.nutrition-pdf-dialog {
  --modal-w: min(920px, 96vw);
  --modal-max-h: min(90svh, 960px);
}
.nutrition-pdf-preview-host {
  background: #e8e4df;
  border-radius: 12px;
  padding: 14px 12px;
  max-height: min(78svh, 900px);
  overflow: auto;
}
.nut-pdf-doc {
  --nut-pdf-accent: #e65100;
  --nut-pdf-line: #e8e2da;
  --nut-pdf-head: #faf8f5;
  --nut-pdf-muted: #78716c;
  color: #1c1917;
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  display: grid;
  gap: 16px;
  justify-items: center;
}
.nut-pdf-page {
  width: min(100%, 210mm);
  background: #fff;
  border: 1px solid var(--nut-pdf-line);
  border-radius: 4px;
  padding: 14mm 14mm 10mm;
  min-height: 260mm;
  position: relative;
  box-shadow: 0 2px 12px rgba(28, 25, 23, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.nut-pdf-cover {
  border-top: 6px solid var(--nut-pdf-accent);
}
.nut-pdf-cover-brand,
.nut-pdf-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.nut-pdf-brand strong,
.nut-pdf-cover-brand strong {
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  display: block;
}
.nut-pdf-brand-sub {
  display: block;
  font-size: 0.64rem;
  color: var(--nut-pdf-muted);
  font-weight: 500;
}
.nut-pdf-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 9px;
}
.nut-pdf-logo-fallback {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(145deg, #ff7a1a, var(--nut-pdf-accent));
  box-shadow: 0 2px 8px rgba(230, 81, 0, 0.28);
}
.nut-pdf-kicker {
  margin: 18px 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nut-pdf-muted);
  font-weight: 650;
}
.nut-pdf-doc h1 {
  margin: 6px 0 16px;
  font-size: 1.55rem;
  letter-spacing: -0.035em;
  line-height: 1.12;
  font-weight: 800;
  color: #0c0a09;
}
.nut-pdf-doc h2 {
  margin: 0 0 6px;
  font-size: 1.02rem;
  color: var(--nut-pdf-accent);
  letter-spacing: -0.02em;
  font-weight: 700;
}
.nut-pdf-doc h3 {
  margin: 10px 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #292524;
}
.nut-pdf-meal-title {
  margin: 10px 0 4px;
  font-size: 0.78rem;
  color: #44403c;
}
.nut-pdf-meta {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  max-width: 440px;
}
.nut-pdf-meta div {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 10px;
  font-size: 0.84rem;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--nut-pdf-line);
}
.nut-pdf-meta dt {
  color: var(--nut-pdf-muted);
  font-weight: 600;
}
.nut-pdf-meta dd {
  margin: 0;
  font-weight: 600;
  color: #1c1917;
}
.nut-pdf-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--nut-pdf-accent);
  background: #fff3e8;
  padding: 2px 7px;
  border-radius: 5px;
  margin-left: 4px;
}
.nut-pdf-anthro {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--nut-pdf-accent);
  background: var(--nut-pdf-head);
  font-size: 0.78rem;
  color: #44403c;
  line-height: 1.4;
}
.nut-pdf-cover-hero {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff3e8, #fff);
  border: 1px solid #f3d9c4;
}
.nut-pdf-cover-hero p {
  margin: 0;
  font-size: 0.8rem;
  color: #57534e;
  line-height: 1.45;
}
.nut-pdf-confidencial {
  margin: 20px 0 0;
  margin-top: auto;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a8a29e;
}
.nut-pdf-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--nut-pdf-line);
  font-size: 0.62rem;
  color: #a8a29e;
}
.nut-pdf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  margin: 0 0 10px;
}
.nut-pdf-table th,
.nut-pdf-table td {
  border-bottom: 1px solid var(--nut-pdf-line);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
.nut-pdf-table thead th {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--nut-pdf-muted);
  background: var(--nut-pdf-head);
  font-weight: 650;
}
.nut-pdf-table .num,
.nut-pdf-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.nut-pdf-table .lectura,
.nut-pdf-table td.lectura {
  color: #57534e;
  font-size: 0.68rem;
}
.nut-pdf-table--compact td,
.nut-pdf-table--compact th {
  padding: 5px 6px;
}
.nut-pdf-row,
.nut-pdf-body-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.nut-pdf-two-col {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 12px;
  align-items: start;
}
.nut-pdf-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.64rem;
  color: var(--nut-pdf-muted);
  text-align: center;
}
.nut-pdf-donut-big {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 6px;
}
.nut-pdf-donut-big.nut-pdf-donut-sm {
  width: 118px;
  height: 118px;
}
.nut-pdf-donut-big i {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.88rem;
  font-style: normal;
  color: #1c1917;
  line-height: 1.15;
  text-align: center;
}
.nut-pdf-donut-sm i {
  width: 68px;
  height: 68px;
  font-size: 0.82rem;
}
.nut-pdf-donut-big i small {
  display: block;
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--nut-pdf-muted);
}
.nut-pdf-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.7rem;
  margin-top: 6px;
  text-align: left;
}
.nut-pdf-legend--center {
  align-items: center;
  text-align: center;
}
.nut-pdf-legend span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: -1px;
}
.nut-pdf-legend .l-magra::before { background: #0f766e; }
.nut-pdf-legend .l-grasa::before { background: var(--nut-pdf-accent); }
.nut-pdf-legend .l-prot::before { background: #e65100; }
.nut-pdf-legend .l-carb::before { background: #64748b; }
.nut-pdf-legend .l-fat::before { background: #a8a29e; }
.nut-pdf-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(100px, 1fr));
  gap: 7px;
  flex: 1;
  min-width: 220px;
}
.nut-pdf-metric {
  border: 1px solid var(--nut-pdf-line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--nut-pdf-head);
}
.nut-pdf-metric span {
  display: block;
  font-size: 0.6rem;
  color: var(--nut-pdf-muted);
  margin-bottom: 1px;
}
.nut-pdf-metric strong {
  font-size: 0.92rem;
  letter-spacing: -0.02em;
  color: #0c0a09;
}
.nut-pdf-hint,
.nut-pdf-caption {
  margin: 0 0 8px;
  font-size: 0.72rem;
  color: #57534e;
  line-height: 1.4;
}
.nut-pdf-caption {
  font-size: 0.62rem;
  color: #a8a29e;
  font-style: italic;
}
.nut-pdf-pendiente {
  margin: 6px 0 10px;
  padding: 8px 10px;
  border: 1px dashed var(--nut-pdf-line);
  border-radius: 8px;
  font-size: 0.72rem;
  color: #78716c;
  background: var(--nut-pdf-head);
}
.nut-pdf-muted,
.nut-pdf-note,
.nut-pdf-notes-p,
.nut-pdf-muted-cell {
  font-size: 0.78rem;
  color: #57534e;
  line-height: 1.4;
}
.nut-pdf-notes {
  margin: 0 0 10px;
  padding-left: 1.15em;
  font-size: 0.74rem;
  color: #44403c;
  line-height: 1.45;
}
.nut-pdf-shop {
  margin: 0;
  padding-left: 1.1em;
  font-size: 0.78rem;
  color: #44403c;
  display: grid;
  gap: 4px;
}
.nut-pdf-chart-box,
.nut-pdf-doc .nut-chart-wrap {
  background: var(--nut-pdf-head);
  border-radius: 10px;
  padding: 8px 10px 6px;
  margin-bottom: 8px;
  border: 1px solid var(--nut-pdf-line);
}
.nut-pdf-chart-box svg,
.nut-pdf-doc .nut-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}
.nut-pdf-chart-title {
  margin: 0 0 4px;
  font-size: 0.7rem;
  font-weight: 650;
  color: #44403c;
}
.nut-pdf-svg-axis,
.nut-pdf-svg-lab {
  fill: var(--nut-pdf-muted);
  font-size: 9px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.nut-pdf-svg-lab {
  fill: #1c1917;
  font-weight: 650;
}
.nut-pdf-doc .nut-chart-axis,
.nut-pdf-doc .nut-chart-grid {
  stroke: #e0dbd4;
}
.nut-pdf-doc .nut-chart-axis {
  fill: #78716c;
  stroke: none;
  font-size: 10px;
}
.nut-pdf-doc .nut-chart-unit {
  font-size: 11px;
  font-weight: 650;
}


.nut-pdf-page--fridge .nut-pdf-fridge-macros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0 12px;
}
.nut-pdf-page--fridge .nut-pdf-fridge-macros > div {
  border: 1px solid var(--nut-pdf-line, #e8e2da);
  border-radius: 8px;
  padding: 8px 10px;
  background: #faf8f5;
}
.nut-pdf-page--fridge .nut-pdf-fridge-macros h3 {
  margin: 0 0 4px;
  font-size: 0.85rem;
}
.nut-pdf-page--fridge .nut-pdf-fridge-macros p {
  margin: 0;
  font-size: 0.9rem;
}
.nut-pdf-page--fridge .nut-pdf-fridge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.nut-pdf-page--fridge .nut-pdf-fridge-grid h3 {
  margin: 0 0 6px;
  font-size: 0.88rem;
}
.nut-pdf-page--fridge .nut-pdf-table--compact td,
.nut-pdf-page--fridge .nut-pdf-table--compact th {
  font-size: 0.72rem;
  padding: 3px 5px;
}
@media print {
  .nut-pdf-page--fridge {
    break-before: page;
  }
}
.nut-pdf-callouts {
  display: grid;
  gap: 10px;
  margin: 8px 0 12px;
}
.nut-pdf-callout {
  border: 1px solid var(--nut-pdf-line);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
  border-left: 4px solid var(--nut-pdf-accent);
}
.nut-pdf-callout.sleep { border-left-color: #0f766e; }
.nut-pdf-callout.appetite { border-left-color: #b45309; }
.nut-pdf-callout.commit { border-left-color: #e65100; }
.nut-pdf-callout .tag {
  display: inline-block;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nut-pdf-muted);
  margin-bottom: 4px;
  font-weight: 650;
}
.nut-pdf-callout h3 {
  margin: 0 0 4px;
  font-size: 0.8rem;
  color: #1c1917;
}
.nut-pdf-callout p {
  margin: 0;
  font-size: 0.74rem;
  color: #44403c;
  line-height: 1.45;
}
.nut-pdf-strategy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0;
}
.nut-pdf-strategy-card {
  border: 1px solid var(--nut-pdf-line);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--nut-pdf-head);
}
.nut-pdf-strategy-card h3 {
  margin: 0 0 6px;
  color: var(--nut-pdf-accent);
  font-size: 0.78rem;
}
.nut-pdf-strategy-card ul {
  margin: 0;
  padding-left: 1.1em;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #44403c;
}
.nut-pdf-dual-donuts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 8px 0 10px;
}
.nut-pdf-panel {
  border: 1px solid var(--nut-pdf-line);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  background: var(--nut-pdf-head);
}
.nut-pdf-panel h3 {
  margin: 0 0 8px;
  font-size: 0.74rem;
}
.nut-pdf-meal-block {
  margin-bottom: 8px;
}
.nut-pdf-meal-block h3 {
  margin: 0 0 4px;
  padding: 4px 8px;
  background: #fff3e8;
  color: var(--nut-pdf-accent);
  border-radius: 6px;
  font-size: 0.72rem;
}
.nut-pdf-totals {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--nut-pdf-head);
  border-radius: 8px;
  border: 1px solid var(--nut-pdf-line);
  font-size: 0.72rem;
  margin: 6px 0 8px;
}
.nut-pdf-totals strong {
  color: var(--nut-pdf-accent);
}
.nut-pdf-tips-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.nut-pdf-tip-box {
  border: 1px solid var(--nut-pdf-line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--nut-pdf-head);
}
.nut-pdf-tip-box h3 {
  margin: 0 0 6px;
  font-size: 0.74rem;
  color: var(--nut-pdf-accent);
}
.nut-pdf-tip-box ul {
  margin: 0;
  padding-left: 1.1em;
  font-size: 0.7rem;
  line-height: 1.4;
  color: #44403c;
}
.nut-pdf-market {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.nut-pdf-market h3 {
  margin: 0 0 4px;
  font-size: 0.7rem;
  color: var(--nut-pdf-accent);
  background: #fff3e8;
  padding: 4px 8px;
  border-radius: 5px;
}
.nut-pdf-signoff {
  margin-top: 12px;
  padding: 14px;
  border: 1px dashed var(--nut-pdf-line);
  border-radius: 10px;
  font-size: 0.72rem;
  color: #57534e;
  line-height: 1.45;
}
.nut-pdf-sig {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.nut-pdf-sig .line {
  border-top: 1px solid #cfc8c0;
  padding-top: 6px;
  font-size: 0.66rem;
  color: var(--nut-pdf-muted);
}
.nut-pdf-chip {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 650;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #15803d;
}
.nut-pdf-chip.warn {
  background: #fff7ed;
  color: #b45309;
}
#nut-pdf-print-root {
  display: none;
}
@media (max-width: 720px) {
  .nut-pdf-two-col,
  .nut-pdf-strategy,
  .nut-pdf-dual-donuts,
  .nut-pdf-tips-grid,
  .nut-pdf-market {
    grid-template-columns: 1fr;
  }
  .nut-pdf-page {
    min-height: 0;
    padding: 16px 14px 12px;
  }
}
.nut-menu-summary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.nut-menu-summary li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
  padding: 6px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, var(--primary) 6%);
  border: 1px solid var(--hairline, var(--border));
}
.nut-menu-summary span { color: var(--muted); }
.nut-chart-sub { margin: 8px 0 4px; }
.nut-report-grid--dash #nut-report-menu { grid-column: 1 / -1; }

/* ── Nutrición redesign RD 2026-08-24 + tabs FitOS 2026-09-04 ─────────── */
#nutrition-pane-biblioteca { display: none !important; }

#tab-comidas.nut-shell.tab-panel.active {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#tab-comidas.nut-shell:not(.active) {
  display: none !important;
}
#tab-comidas .nutrition-panel-head.nut-top-head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  position: relative;
  z-index: 6;
  padding: 0 4px 8px 0;
}
#tab-comidas .nut-top-tabs.af-top-tabs {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0 2px;
}
#tab-comidas .nut-top-tabs .af-top-tab.mc-lifecycle-tab {
  flex: 1 1 0;
  text-align: center;
  font-size: 0.95rem;
}
#tab-comidas .nut-tab-lede {
  margin: 0;
  padding: 8px 12px;
  border-left: 3px solid color-mix(in srgb, var(--fit-primary, #f97316) 70%, transparent);
  background: color-mix(in srgb, var(--fit-primary, #f97316) 8%, transparent);
  border-radius: 0 8px 8px 0;
  color: var(--fit-muted, #9aa3ad);
  font-size: 0.9rem;
  line-height: 1.35;
}
#tab-comidas .nut-pane {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}
#tab-comidas .nut-pane.is-active {
  display: flex;
}
#tab-comidas .nut-kind-tabs.libpane-kind-tabs {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  grid-template-columns: none;
  flex: 0 0 auto;
  align-self: flex-start;
  margin: 4px 4px 10px;
  gap: 0;
}
#tab-comidas .nut-planes-libpane > .libpane-side > .libpane-side-head .nut-kind-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin: 0;
}
#tab-comidas .nut-kind-tabs .libpane-kind {
  flex: 0 0 auto;
  min-width: 7.5rem;
  padding: 8px 14px;
}
#tab-comidas .nut-planes-libpane .nut-kind-tabs .libpane-kind {
  min-width: 0;
}
#tab-comidas .nut-kind-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
#tab-comidas .nut-kind-panel.hidden,
#tab-comidas .nut-kind-panel[hidden] {
  display: none !important;
}

/* Nutrición Planes — master-detail (mirror AF plantillas).
   display:grid MUST be scoped to .is-active — otherwise it beats
   `.nut-pane { display:none }` + [hidden] and leaks Planes chrome into Cocina. */
#tab-comidas .nut-pane.is-active.nut-planes-libpane.planner-libpane {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 4px 4px 12px;
}
#tab-comidas .nut-planes-libpane.planner-libpane[hidden],
#tab-comidas .nut-planes-libpane.planner-libpane:not(.is-active) {
  display: none !important;
}
#tab-comidas .nut-planes-libpane > .libpane-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding-right: 14px;
  border-right: 1px solid var(--hairline, var(--border));
}
#tab-comidas .nut-planes-libpane .nut-planes-list {
  flex: 1 1 auto;
  min-height: 0;
}
#tab-comidas .nut-planes-libpane .nut-planes-add-wrap {
  flex: 0 0 auto;
  position: relative;
}
#tab-comidas .nut-planes-libpane .nut-planes-add-btn {
  width: 100%;
  justify-content: center;
}
#tab-comidas .nut-planes-libpane .af-plantillas-add-wrap .nut-add-plan-menu {
  top: auto;
  bottom: calc(100% + 6px);
  right: 0;
  left: 0;
}
#tab-comidas .nut-planes-libpane .nut-plan-lib-card.is-active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--sys-surface, var(--surface)));
  box-shadow: inset -3px 0 0 var(--primary);
}
#tab-comidas .nut-planes-main {
  min-height: 0;
  overflow: hidden;
}
#tab-comidas .nut-plan-detail {
  min-height: 0;
  overflow: hidden;
}
#tab-comidas .nut-plan-detail-head {
  flex-wrap: wrap;
}
#tab-comidas .nut-plan-detail-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#tab-comidas .nut-plan-detail-section h4 {
  margin: 0 0 8px;
  font-size: 0.92rem;
  font-weight: 700;
}
#tab-comidas .nut-plan-detail-desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}
#tab-comidas .nut-plan-detail-macros {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
#tab-comidas .nut-plan-detail-macro {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 80%, transparent);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#tab-comidas .nut-plan-detail-macro strong {
  font-size: 0.92rem;
}
#tab-comidas .nut-plan-detail-meal {
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#tab-comidas .nut-plan-detail-meal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
#tab-comidas .nut-plan-detail-meal-head h4 {
  margin: 0;
}
#tab-comidas .nut-plan-detail-note {
  margin: 0;
}
#tab-comidas .nut-plan-detail-table-wrap {
  overflow-x: auto;
}
#tab-comidas .nut-plan-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
#tab-comidas .nut-plan-detail-table th,
#tab-comidas .nut-plan-detail-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
#tab-comidas .nut-plan-detail-table th.num,
#tab-comidas .nut-plan-detail-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#tab-comidas .nut-plan-detail-table tfoot td {
  font-weight: 650;
  border-bottom: none;
  padding-top: 8px;
}
#tab-comidas .nut-plan-detail-receta {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.68rem;
  color: var(--primary);
  font-weight: 650;
}
#tab-comidas .nut-plan-week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
#tab-comidas .nut-plan-week-day {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 85%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#tab-comidas .nut-plan-week-day.is-free {
  opacity: 0.72;
  border-style: dashed;
}
#tab-comidas .nut-plan-week-day header {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: baseline;
}
#tab-comidas .nut-plan-week-day-name {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 650;
}
@media (max-width: 900px) {
  #tab-comidas .nut-pane.is-active.nut-planes-libpane.planner-libpane {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  #tab-comidas .nut-planes-libpane > .libpane-side {
    border-right: none;
    border-bottom: 1px solid var(--hairline, var(--border));
    padding-right: 0;
    padding-bottom: 12px;
    max-height: 42vh;
  }
}

#tab-comidas .nut-pautas-library {
  flex: 0 0 auto;
  padding: 4px 4px 12px;
}
#tab-comidas .nut-pautas-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
#tab-comidas .nut-pautas-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#tab-comidas .nut-add-plan-wrap {
  position: relative;
}
#tab-comidas .nut-add-plan-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 220px;
  padding: 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fit-surface-2, #1c2228) 96%, #000);
  border: 1px solid color-mix(in srgb, var(--fit-border, #3a434c) 80%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
#tab-comidas .nut-add-plan-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fit-text, #f3f5f7);
  font: inherit;
  font-size: 0.92rem;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
#tab-comidas .nut-add-plan-item:hover {
  background: color-mix(in srgb, var(--fit-primary, #f97316) 14%, transparent);
}
#tab-comidas .nut-pauta-tipo {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--fit-primary, #f97316) 18%, #2a3138);
  color: var(--fit-text, #f3f5f7);
}
#tab-comidas .nut-pautas-client-kicker {
  padding: 8px 4px 4px;
}
#tab-comidas .nut-pautas-client-kicker h4 {
  margin: 0 0 2px;
  font-size: 0.95rem;
}
#tab-comidas .nut-colecciones-empty {
  padding: 28px 16px;
  text-align: center;
}
#tab-comidas.is-library .nutrition-shell--rd {
  display: none !important;
}
#tab-comidas[data-nut-mode="clientes"] .nutrition-shell--rd,
#tab-comidas[data-nut-tab="clientes"] .nutrition-shell--rd {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Biblioteca (recetas/alimentos): FAB abre menú (crear según kind + Asistente IA). */
#tab-comidas.is-library #nutrition-fab-wrap {
  display: flex !important;
}
#tab-comidas.is-library #nutrition-fab-wrap.is-lib-create #nutrition-fab-actions:not([hidden]) {
  display: flex !important;
}

/* Opcional: sin «Buscar cliente…» global en biblioteca nutri (hay search propio). */
body.nutrition-lib-active #topbar-search {
  display: none;
}

.nutrition-libpane {
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  padding: 0 2px 4px;
}

.nutrition-libpane-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 6px;
  overflow: hidden;
}

.nutrition-lib-head { flex: 0 0 auto; }

/* Alimentos | Recetas | Menús — segmented control limpio (3 columnas) */
#nutrition-pane-biblioteca .libpane-kind-tabs {
  display: inline-grid;
  width: auto;
  max-width: 100%;
  grid-template-columns: repeat(3, minmax(5.5rem, auto));
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 82%, transparent);
  box-shadow: none;
}
#nutrition-pane-biblioteca .libpane-kind {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  min-height: 34px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  border-radius: 8px;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease;
}
#nutrition-pane-biblioteca .libpane-kind:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
#nutrition-pane-biblioteca .libpane-kind.is-on {
  background: color-mix(in srgb, var(--primary, #F97316) 16%, var(--sys-surface, var(--surface)));
  border-color: color-mix(in srgb, var(--primary, #F97316) 40%, var(--border));
  color: var(--primary, #F97316);
  box-shadow: none;
}
#nutrition-pane-biblioteca .libpane-kind:active {
  transform: scale(0.98);
}

.nutrition-menu-form-meal-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, transparent);
}
.nutrition-menu-form-meal-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 0;
}
.nutrition-menu-form-meal-row input {
  flex: 1 1 auto;
}
.nutrition-menu-form-foods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nutrition-menu-form-food {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
  font-size: 0.82rem;
}
.nutrition-menu-form-foods-empty {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  font-size: 0.78rem;
}
.nutrition-menu-form-add-foods {
  align-self: flex-start;
}
.nutrition-menu-pick-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}
.nutrition-menu-pick-actions .nutrition-action-btn {
  padding: 7px 11px;
  font-size: 0.78rem;
}
.nutrition-menu-pick-actions .nutrition-action-btn .nav-ico {
  width: 15px;
  height: 15px;
}
.nutrition-menu-form-dialog .nutrition-action-btn.span-2 {
  justify-self: start;
  width: auto;
}

/* Plan nutricional editor */
.nutrition-plan-form-dialog {
  width: min(1120px, 96vw);
  max-width: 1120px;
}
.nutrition-plan-form-dialog .nut-plan-form-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 18px;
  align-items: start;
}
.nutrition-plan-form-dialog .nut-plan-form-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.nutrition-plan-form-dialog .nut-plan-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--muted, #9aa3b2);
}
.nutrition-plan-form-dialog .nut-plan-field input,
.nutrition-plan-form-dialog .nut-plan-field textarea,
.nutrition-plan-form-dialog .nut-plan-meal-desc textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 92%, transparent);
  color: inherit;
  padding: 10px 12px;
  font: inherit;
}
.nutrition-plan-form-dialog .nut-plan-section-title {
  margin: 4px 0 0;
  font-size: 0.95rem;
}
.nutrition-plan-form-dialog .nut-plan-form-aside {
  position: sticky;
  top: 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, transparent);
}
.nutrition-plan-form-dialog .nut-plan-obj-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.nutrition-plan-form-dialog .nut-plan-obj-head h4 {
  margin: 0;
  font-size: 0.92rem;
}
.nutrition-plan-form-dialog .nut-plan-obj-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  font-size: 0.8rem;
}
.nutrition-plan-form-dialog .nut-plan-obj-edit:focus-visible,
.nutrition-plan-form-dialog .nut-plan-ghost-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary, #e65100) 70%, transparent);
  outline-offset: 2px;
}
.nutrition-plan-form-dialog .nut-plan-ghost-btn {
  font-size: 0.78rem;
  padding: 6px 12px;
}
.nutrition-plan-form-dialog .nut-plan-obj-kcal {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}
.nutrition-plan-form-dialog .nut-plan-obj-bar {
  height: 4px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
  overflow: hidden;
}
.nutrition-plan-form-dialog .nut-plan-obj-bar > i {
  display: block;
  height: 100%;
  background: var(--primary, #e65100);
}
.nutrition-plan-form-dialog .nut-plan-rings {
  display: grid;
  gap: 10px;
}
.nutrition-plan-form-dialog .nut-plan-ring {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 8px;
  align-items: center;
}
.nutrition-plan-form-dialog .nut-plan-ring svg {
  width: 48px;
  height: 48px;
  display: block;
  max-width: 48px;
}
.nutrition-plan-form-dialog .nut-plan-ring-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.78rem;
}
.nutrition-plan-form-dialog .nut-plan-obj-formula {
  margin-top: 12px;
  font-size: 0.72rem;
}
.nutrition-plan-form-dialog .nut-plan-meal-desc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted, #9aa3b2);
}
.nutrition-plan-form-dialog .nut-meal-opts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.nutrition-plan-form-dialog .nut-meal-opts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nutrition-plan-form-dialog .nut-meal-opt {
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--border) 55%, transparent);
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
}
.nutrition-plan-form-dialog .nut-meal-opt.is-on {
  background: color-mix(in srgb, var(--primary, #e65100) 85%, #000);
  color: #fff;
}
.nutrition-plan-form-dialog .nut-meal-opt-note {
  margin: 0;
  font-size: 0.72rem;
}
.nutrition-plan-form-dialog .nut-meal-table-wrap {
  overflow-x: auto;
}
.nutrition-plan-form-dialog .nut-meal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.nutrition-plan-form-dialog .nut-meal-table th,
.nutrition-plan-form-dialog .nut-meal-table td {
  padding: 6px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  text-align: left;
  vertical-align: middle;
}
.nutrition-plan-form-dialog .nut-meal-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.nutrition-plan-form-dialog .nut-meal-qty {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.nutrition-plan-form-dialog .nut-meal-qty input {
  width: 64px;
  border-radius: 8px;
  border: 1px solid var(--hairline, var(--border));
  background: transparent;
  color: inherit;
  padding: 4px 6px;
}
.nutrition-plan-form-dialog .nut-meal-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.nut-plan-row-actions {
  position: relative;
}
.nut-plan-kebab-wrap {
  position: relative;
}
.nut-plan-row-menu {
  min-width: 200px;
  z-index: 30;
}
.nut-obj-scope {
  border: 0;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.nut-obj-scope > legend {
  padding: 0;
  margin: 0 0 2px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text, #f3f5f7);
}
.nut-obj-scope-toggle {
  display: flex;
  width: 100%;
  max-width: 100%;
}
.nut-obj-scope-toggle .nut-obj-unit {
  flex: 1 1 0;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
  padding: 8px 10px;
  font-size: 0.76rem;
  min-width: 0;
}
.nut-obj-scope-toggle .nut-obj-unit:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary, #e65100) 70%, transparent);
  outline-offset: 2px;
  z-index: 1;
}
.nut-obj-unit-toggle {
  display: inline-flex;
  gap: 0;
  margin-bottom: 12px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--hairline, var(--border));
}
.nut-obj-unit {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.nut-obj-unit.is-on {
  background: color-mix(in srgb, var(--primary, #e65100) 85%, #000);
  color: #fff;
}
.nut-obj-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nut-obj-row {
  display: grid;
  grid-template-columns: 20px minmax(70px, 1fr) auto minmax(72px, 90px) 36px;
  gap: 8px;
  align-items: center;
  font-size: 0.85rem;
}
.nut-obj-row input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--hairline, var(--border));
  background: transparent;
  color: inherit;
  padding: 8px;
}
.nut-obj-row .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.nut-obj-row .dot.prot { background: #22c55e; }
.nut-obj-row .dot.carb { background: #38bdf8; }
.nut-obj-row .dot.fat { background: #f97316; }
.nut-obj-row .dot.kcal { background: var(--primary, #e65100); }
.nut-obj-meal {
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.nut-obj-meal summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 8px;
}
.nut-obj-meals-summary {
  margin-bottom: 12px;
}
/* Per-meal objectives preview: keep rings tiny so meal accordions stay visible */
.nut-plan-rings--compact,
.nut-obj-meals-summary .nut-plan-rings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  max-width: 100%;
}
.nut-plan-ring--compact,
.nut-obj-meals-summary .nut-plan-ring {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  flex: 1 1 140px;
  min-width: 0;
  max-width: 100%;
}
.nut-plan-ring--compact svg,
.nut-obj-meals-summary .nut-plan-ring svg {
  width: 44px;
  height: 44px;
  max-width: 44px;
  display: block;
  flex: 0 0 auto;
}
.nut-plan-ring--compact .nut-plan-ring-meta,
.nut-obj-meals-summary .nut-plan-ring-meta {
  font-size: 0.72rem;
  line-height: 1.25;
  min-width: 0;
}
.nutrition-plan-objectives-dialog .nut-plan-rings:not(.nut-plan-rings--compact) .nut-plan-ring svg {
  width: 48px;
  height: 48px;
  max-width: 48px;
}
@media (max-width: 900px) {
  .nutrition-plan-form-dialog .nut-plan-form-body {
    grid-template-columns: 1fr;
  }
  .nutrition-plan-form-dialog .nut-plan-form-aside {
    position: static;
  }
}

/* Kill floating FABs — create lives in toolbar/header buttons only. */
#ex-fab-wrap,
#af-sesiones-fab-wrap,
#vod-fab-wrap,
#nutrition-fab-wrap,
#planner-fab-wrap,
#centro-fab-wrap {
  display: none !important;
}

#tab-comidas.is-library .nutrition-libpane-main {
  padding-bottom: 12px;
}

.af-plantillas-add-wrap {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 8px;
  position: relative;
}
.af-plantillas-add-wrap .nut-planes-add-btn {
  width: 100%;
  min-height: 44px;
  margin-top: 0;
  justify-content: center;
  border-radius: 999px;
  font-weight: 650;
  padding: 10px 16px;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 32%, transparent);
}

.nutrition-lib-kind-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 6px;
  overflow: hidden;
}

.nutrition-lib-toolbar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
}

.nutrition-lib-title h3 {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.25;
}

.nutrition-lib-title .hint {
  margin: 2px 0 0;
  font-size: 0.72rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#nutrition-lib-foods .nutrition-foods-list {
  flex: 0 0 auto;
  min-height: auto;
  height: auto;
  overflow: visible;
  overflow-y: visible;
  overscroll-behavior: auto;
}

/* Recetas + Alimentos: grid crece; scroll en .nut-pane (no clip del panel). */
#nutrition-kind-recetas.nut-kind-panel,
#nutrition-kind-recetas .nutrition-libpane-main,
#nutrition-lib-recipes.nutrition-lib-kind-panel,
#nutrition-kind-alimentos.nut-kind-panel,
#nutrition-kind-alimentos .nutrition-libpane-main,
#nutrition-lib-foods.nutrition-lib-kind-panel {
  flex: 0 0 auto;
  min-height: auto;
  height: auto;
  overflow: visible;
}
#nutrition-lib-recipes .nutrition-recipes-list {
  flex: 0 0 auto;
  min-height: auto;
  height: auto;
  overflow: visible;
  overflow-y: visible;
  overscroll-behavior: auto;
}

#nutrition-pane-biblioteca .nutrition-foods-toolbar,
#nutrition-pane-biblioteca .nutrition-lib-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  margin: 0;
}

#nutrition-pane-biblioteca .nutrition-search-field,
#nutrition-pane-biblioteca .nutrition-search-field--lib {
  flex: 1 1 180px;
  min-width: 140px;
  max-width: none;
}

#nutrition-pane-biblioteca .nutrition-filter-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 16rem;
  min-width: 12rem;
  max-width: 20rem;
  padding: 0 10px 0 12px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 40%, transparent);
}
#nutrition-pane-biblioteca .nutrition-filter-field .nav-ico {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex: 0 0 auto;
}
#nutrition-pane-biblioteca .nutrition-filter-field select,
#nutrition-pane-biblioteca .nutrition-foods-toolbar select,
#nutrition-pane-biblioteca #foods-catalog-categoria-filter {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  width: auto;
  border: 0;
  background: transparent;
  padding-left: 0;
}

#nutrition-pane-biblioteca .foods-catalog-add {
  color: #fff;
  background: #f97316;
  border-color: #f97316;
}

#nutrition-pane-biblioteca .foods-catalog-add:hover:not(:disabled) {
  background: #ea580c;
  border-color: #ea580c;
  color: #fff;
}

#nutrition-pane-biblioteca .nutrition-lib-pager {
  flex: 0 0 auto;
  margin-top: 0;
  padding-top: 2px;
  padding-bottom: 0;
}
#nutrition-pane-biblioteca .nutrition-pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#nutrition-pane-biblioteca .nutrition-pager-btn .nav-ico {
  width: 14px;
  height: 14px;
  transform: rotate(90deg);
}
#nutrition-pane-biblioteca .nutrition-pager-btn--next .nav-ico {
  transform: rotate(-90deg);
}

.libpane-card-thumbs {
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
  align-items: center;
}

.libpane-card-thumb,
.libpane-card-thumb.exercise-thumb-fallback {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.libpane-card-thumb.exercise-thumb-fallback svg {
  width: 16px;
  height: 16px;
}

#tab-comidas .nutrition-shell--rd {
  gap: 12px;
}

#tab-comidas .nutrition-chrome {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
}

#tab-comidas .nutrition-clientbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0;
  justify-content: flex-start;
}

#tab-comidas .nutrition-client-compact {
  flex: 0 0 auto;
  max-width: 280px;
}

#tab-comidas .nut-client-trigger {
  min-height: 36px;
  padding: 4px 10px 4px 4px;
  gap: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, transparent);
  border: 1px solid var(--hairline, var(--border));
}

#tab-comidas .nut-client-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}

/* Plan meta fuera del clientbar — IDs vivos p/ sync */
#tab-comidas .nutrition-plan-meta--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

#tab-comidas .nutrition-plan-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

#tab-comidas .nutrition-plan-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

#tab-comidas .nutrition-vigencia-chip {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}

#tab-comidas .nutrition-vigencia-chip.hidden { display: none; }

/* Badges: cerrado = frío; abierto = naranja */
#tab-comidas .nut-badge.is-cerrado {
  background: color-mix(in srgb, #64748b 28%, transparent);
  color: #94a3b8;
  border: 1px solid color-mix(in srgb, #64748b 40%, transparent);
}
#tab-comidas .nut-badge.is-abierto {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
}

/* Toolbar: captions + grupos a todo el ancho */
#tab-comidas .nutrition-toolbar-rd {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  flex-wrap: nowrap;
  width: 100%;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 78%, transparent);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

#tab-comidas .nut-tb-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 8px;
  border-right: 1px solid var(--hairline, var(--border));
  flex: 1 1 0;
  min-width: 0;
  align-items: stretch;
}
#tab-comidas .nut-tb-group:last-child { border-right: 0; }
#tab-comidas .nut-tb-group:first-child { padding-left: 2px; }

#tab-comidas .nut-tb-label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
  text-align: center;
}

#tab-comidas .nut-tb-actions {
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  gap: 2px;
  flex-wrap: nowrap;
  width: 100%;
}

#tab-comidas .nut-tb-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  flex: 1 1 0;
  width: auto;
  height: auto;
  min-height: 44px;
  padding: 4px 2px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 140ms ease;
}
#tab-comidas .nut-tb-btn .nav-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}
#tab-comidas .nut-tb-caption {
  display: block;
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--muted);
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tab-comidas .nut-tb-btn:hover {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  color: var(--primary);
  transform: translateY(-1px);
}
#tab-comidas .nut-tb-btn:hover .nut-tb-caption { color: var(--primary); }
#tab-comidas .nut-tb-btn:active { transform: translateY(0) scale(0.98); }

#tab-comidas .nut-tb-btn.is-on {
  background: color-mix(in srgb, var(--primary, #F97316) 18%, transparent);
  border-color: color-mix(in srgb, var(--primary, #F97316) 55%, var(--border));
  color: var(--primary, #F97316);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary, #F97316) 28%, transparent);
}
#tab-comidas .nut-tb-btn.is-on .nut-tb-caption { color: var(--primary, #F97316); }

#tab-comidas .nutrition-shell.is-abierto .nut-tb-btn--cerrado-only { display: none; }

#tab-comidas .nutrition-plan-canvas {
  border: 1px solid var(--hairline, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
}

#tab-comidas .nutrition-shell--rd .nutrition-plan-content {
  overflow: auto;
  overflow-x: hidden;
  padding: 12px 14px 16px;
  display: block;
  flex: 1 1 auto;
  min-height: 0;
}

.nutrition-overview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: auto;
}

/* CTAs nutri: no heredar width:100% del login .btn-primary */
#tab-comidas .btn-primary,
#tab-comidas .ghost.sm,
#tab-comidas .btn-primary.sm,
.nutrition-overview .btn-primary,
.nut-risk-banner .btn-primary,
.nut-mode-hero-actions .btn-primary,
.nut-mode-hero-actions .ghost,
.nut-empty-cta .btn-primary,
.nut-tip-list .btn-primary {
  width: auto;
  max-width: none;
  margin-top: 0;
  flex: 0 0 auto;
  align-self: flex-start;
}
.nutrition-overview .nut-eat-ask-send.btn-primary {
  width: 100%;
  align-self: stretch;
}

.nut-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  flex: 0 0 auto;
}
.nut-kpi-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  min-height: 72px;
  border-radius: 12px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, transparent);
}
.nut-kpi-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.nut-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.nut-kpi-visual {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--primary, #F97316);
  opacity: 0.95;
}
.nut-kpi-ico {
  width: 40px;
  height: 40px;
  color: var(--primary, #F97316);
  display: block;
}
.nut-kpi-ico--spark {
  width: 48px;
  height: 28px;
}
.nut-kpi-ico--flame,
.nut-kpi-ico--warn,
.nut-kpi-ico--cal {
  width: 36px;
  height: 36px;
}
.nut-kpi-ico--cal {
  stroke: currentColor;
  fill: none;
}
.nut-kpi-card span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.nut-kpi-card strong {
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--primary, #F97316);
}
.nut-kpi-card em {
  font-style: normal;
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.25;
}
.nut-kpi-card.is-warn strong { color: #f59e0b; }

.nut-risk-banner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--primary, #F97316) 50%, var(--border));
  background: color-mix(in srgb, var(--primary, #F97316) 12%, transparent);
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary, #F97316) 18%, transparent);
}
.nut-risk-banner--rail {
  width: 100%;
}
.nut-risk-banner.is-warn {
  border-color: color-mix(in srgb, #f59e0b 55%, var(--border));
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #f59e0b 16%, transparent);
}
.nut-risk-banner.is-warn .nut-attn-title {
  color: #fbbf24;
}
.nut-risk-banner.is-risk {
  border-color: color-mix(in srgb, #ef4444 50%, var(--border));
  background: color-mix(in srgb, #ef4444 12%, transparent);
  box-shadow: none;
}
.nut-risk-banner.is-ok {
  border-color: color-mix(in srgb, #22c55e 40%, var(--border));
  background: color-mix(in srgb, #22c55e 10%, transparent);
  box-shadow: none;
}
.nut-risk-banner > div {
  min-width: 0;
  flex: 1 1 auto;
}
.nut-risk-banner strong {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 4px;
}
.nut-attn-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fbbf24;
}
.nut-attn-ico {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.nut-risk-banner span { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
.nut-risk-banner .btn-primary,
.nut-risk-banner .ghost,
.nut-rail-cta {
  width: auto;
  min-width: 148px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nut-risk-banner[hidden] { display: none !important; }

.nut-mode-hero {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 82%, transparent);
  min-height: 0;
}
.nut-mode-hero-head,
.nut-mode-hero > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.nut-mode-hero h4 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 650;
}
.nut-mode-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.nut-mode-hero-actions .btn-primary,
.nut-mode-hero-actions .ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin-top: 0;
}
.nut-prescrito {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #94a3b8;
}
.nut-prescrito .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #64748b;
}

.nut-day-strip {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.nut-day-chip {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--hairline, var(--border));
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
}
.nut-day-chip.has-menu { box-shadow: inset 0 -2px 0 var(--primary); }
.nut-day-chip.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: #111;
}

.nut-menu-slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nut-menu-slot {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--bg, #0d1117) 35%, transparent);
}
.nut-menu-slot-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}
.nut-menu-slot-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nut-menu-slot-body strong { font-size: 0.88rem; }
.nut-menu-slot-body em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nut-open-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}
.nut-mode-hero--abierto,
.nut-mode-hero--eat {
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.nut-open-hero-head {
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px;
}
.nut-open-hero-head h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}
.nut-open-edit {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
  color: var(--muted);
}
.nut-open-edit:hover {
  color: var(--primary, #F97316);
  border-color: color-mix(in srgb, var(--primary, #F97316) 45%, var(--border));
}
.nut-open-edit .nav-ico {
  width: 16px;
  height: 16px;
}
.nut-open-title-ico {
  width: 18px;
  height: 18px;
  color: var(--primary, #F97316);
  flex-shrink: 0;
}
.nut-open-kcal-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}
.nut-open-kcal-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.nut-kcal-hero {
  font-size: 1.6rem;
  font-weight: 750;
  color: var(--primary, #F97316);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.nut-open-kcal-block .nut-kcal-hero {
  font-size: 2rem;
  letter-spacing: -0.03em;
}
.nut-kcal-hero span {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
}
.nut-open-macros {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 4px;
}
.nut-open-macro {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 5px;
  align-items: center;
}
.nut-open-macro-top {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.nut-open-macro-name {
  font-size: 0.86rem;
  font-weight: 550;
  color: var(--text);
}
.nut-open-macro-name em {
  font-style: normal;
  font-weight: 750;
  color: var(--primary, #F97316);
  margin-right: 4px;
}
.nut-open-macro-vals {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}
.nut-open-macro-vals strong {
  color: var(--text);
  font-weight: 650;
}
.nut-open-macro-track {
  grid-column: 1;
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  overflow: hidden;
}
.nut-open-macro-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--primary, #F97316);
  transition: width 0.35s ease;
}
.nut-open-macro-pct {
  grid-column: 2;
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.nut-macro-track { margin-bottom: 8px; }
.nut-notes-box {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg, #0d1117) 40%, transparent);
  border: 1px dashed var(--hairline, var(--border));
}
.nut-notes-box span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.nut-notes-box span .nav-ico {
  width: 14px;
  height: 14px;
  color: var(--primary, #F97316);
}
.nut-notes-box p { margin: 0; font-size: 0.82rem; line-height: 1.4; }
.nut-notes-box--open {
  margin-top: auto;
  border-style: solid;
  background: color-mix(in srgb, var(--bg, #0b0f14) 55%, transparent);
}
.nut-mode-hero--abierto .nut-mode-hero-actions {
  margin-top: 4px;
}
.nut-btn-adjust {
  border: 1px solid var(--hairline, var(--border)) !important;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 60%, transparent) !important;
}

/* Qué come hoy */
.nut-mode-hero--eat {
  position: relative;
  max-height: min(480px, calc(100vh - 260px));
  min-height: 0;
}
.nut-eat-head {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  margin-bottom: 10px !important;
  padding-top: 4px;
  flex-shrink: 0;
}
.nut-eat-head-top {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.nut-eat-head-top h4 {
  margin: 0;
  flex: 1;
}
.nut-eat-head::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: var(--primary, #F97316);
  margin-bottom: 2px;
}
.nut-eat-head h4 {
  font-size: 1rem;
  font-weight: 650;
}
.nut-eat-head span {
  font-size: 0.76rem;
  color: var(--muted);
}
.nut-eat-ask {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.nut-eat-today {
  list-style: none;
  margin: 0;
  padding: 0 2px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.nut-eat-row {
  display: grid;
  grid-template-columns: 22px 36px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--bg, #0b0f14) 45%, transparent);
  min-height: 48px;
  max-height: 52px;
  flex: 0 0 auto;
}
.nut-eat-row.is-asked {
  border-color: color-mix(in srgb, var(--primary, #F97316) 35%, var(--border));
}
.nut-eat-pick {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  cursor: pointer;
  margin: 0;
}
.nut-eat-pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.nut-eat-pick-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid color-mix(in srgb, var(--muted) 50%, transparent);
  background: transparent;
  position: relative;
}
.nut-eat-pick input:checked + .nut-eat-pick-box {
  border-color: var(--primary, #F97316);
  background: var(--primary, #F97316);
}
.nut-eat-pick input:checked + .nut-eat-pick-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #111;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.nut-eat-pick--done {
  color: color-mix(in srgb, var(--ok, #22c55e) 80%, var(--muted));
  opacity: 0.7;
}
.nut-eat-pick--done .nav-ico {
  width: 16px;
  height: 16px;
}
.nut-eat-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  background: #1c1917;
  display: block;
}
.nut-eat-thumb--ph {
  display: grid;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--muted) 40%, transparent);
  color: var(--muted);
}
.nut-eat-thumb--ph .nav-ico {
  width: 18px;
  height: 18px;
  opacity: 0.65;
}
.nut-eat-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}
.nut-eat-main strong {
  font-size: 0.84rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nut-eat-main em {
  font-style: normal;
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nut-eat-status {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 6px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.nut-eat-status.is-empty {
  color: transparent;
  background: transparent;
  padding: 0;
  min-width: 0;
}
.nut-eat-status.is-ok {
  color: #4ade80;
  background: color-mix(in srgb, #22c55e 16%, transparent);
}
.nut-eat-status.is-pending {
  color: #fdba74;
  background: color-mix(in srgb, #f97316 16%, transparent);
}
.nut-eat-status.is-alerta {
  color: #fca5a5;
  background: color-mix(in srgb, #ef4444 16%, transparent);
}
.nut-eat-ask-send {
  flex-shrink: 0;
  margin-top: 0;
  align-self: stretch;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-weight: 650;
}

.nut-empty-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
}
.nut-empty-cta .hint { margin: 0; }
.nut-mode-hero--eat .nut-empty-cta {
  align-items: flex-start;
  text-align: left;
  padding: 8px 0;
  width: auto;
}

/* Dashboard cards: alto real para charts */
.nutrition-overview .nut-report-grid,
.nut-report-grid--dash {
  flex: 0 0 auto;
  min-height: 0;
  height: auto;
  align-content: start;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  overflow: visible;
  gap: 10px;
}
.nut-report-grid--prog-main {
  grid-template-rows: auto;
}
.nut-progress-side .nut-report-card {
  flex: 1 1 auto;
  min-height: 220px;
}
.nutrition-overview .nut-report-card,
.nut-report-grid--dash .nut-report-card {
  min-height: 0;
  height: auto;
  overflow: hidden;
  gap: 8px;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  max-height: 360px;
}
.nut-report-grid--dash .nut-report-card--tips { grid-column: auto; }
.nut-report-grid--dash #nut-report-summary { grid-column: auto; }

.btn-primary.sm,
.ghost.sm {
  width: auto;
  margin-top: 0;
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 999px;
}

.nutrition-wizard-dialog--rd { --modal-w: min(720px, 94vw); }
#nutrition-plan-wizard-form > #nutrition-wizard-error {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 18px 12px;
  font-size: 0.78rem;
}
#nutrition-plan-wizard-form > #nutrition-wizard-error.hidden {
  display: none;
}
.nutrition-wizard-steps {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 10px 18px 4px;
}
.nutrition-wizard-steps.hidden { display: none; }
.nutrition-wizard-steps li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  font-size: 0.68rem;
  color: var(--muted);
  position: relative;
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.nutrition-wizard-steps li.is-active {
  color: var(--text);
  opacity: 1;
  pointer-events: none;
  font-weight: 650;
}
.nutrition-wizard-steps li.is-done,
.nutrition-wizard-steps li.is-nav {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}
.nutrition-wizard-steps li.is-nav:hover { color: var(--primary); }
.nutrition-wizard-steps li.is-active.is-nav {
  pointer-events: none;
  cursor: default;
}
.nutrition-wizard-steps li span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.72rem;
  flex-shrink: 0;
}
.nutrition-wizard-steps li.is-active { color: var(--text); }
.nutrition-wizard-steps li.is-active span {
  background: var(--primary);
  border-color: var(--primary);
  color: #111;
}
.nutrition-wizard-steps li.is-done span {
  background: color-mix(in srgb, var(--primary) 30%, transparent);
  border-color: var(--primary);
  color: var(--primary);
}
#nutrition-plan-wizard-dialog .modal-footer .btn-primary:disabled,
#nutrition-plan-wizard-dialog .modal-footer .btn-primary.is-disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.25);
  pointer-events: none;
}
.nutrition-food-search-wrap.is-primary {
  margin: 8px 0 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--hairline));
  background: color-mix(in srgb, var(--primary) 8%, var(--sys-surface));
}
.nutrition-search-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.nutrition-meal-notes { margin: 8px 0 10px; }
.nutrition-meal-notes summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
}
.nutrition-recipe-picked { margin: 6px 0 0; }
.nutrition-recipe-picked button {
  color: var(--primary);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  text-decoration: underline;
}

.nutrition-tipo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0 12px;
}
.nutrition-tipo-card { display: block; cursor: pointer; }
.nutrition-tipo-card input { position: absolute; opacity: 0; pointer-events: none; }
.nutrition-tipo-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
  transition: border-color 160ms ease, background 160ms ease;
}
.nutrition-tipo-card-body .nav-ico { color: var(--primary); width: 22px; height: 22px; }
.nutrition-tipo-card-body strong { font-size: 0.92rem; }
.nutrition-tipo-card-body em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--muted);
}
.nutrition-tipo-card input:checked + .nutrition-tipo-card-body {
  border-color: #64748b;
  box-shadow: inset 0 0 0 1px #64748b;
  background: color-mix(in srgb, #64748b 12%, transparent);
}
.nutrition-tipo-card:has(input[value="abierto"]:checked) .nutrition-tipo-card-body {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.nutrition-tipo-preview {
  margin-top: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed var(--hairline, var(--border));
}
.nutrition-tipo-preview-title {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nutrition-tipo-preview-card strong { display: block; margin-bottom: 6px; }
.nutrition-tipo-preview-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nutrition-tipo-preview-card li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
}
.nutrition-tipo-preview-card em { font-style: normal; color: var(--muted); }

.nutrition-wizard-client-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline, var(--border));
  font-size: 0.78rem;
}
.nutrition-wizard-client-chip[hidden] { display: none; }

@media (max-width: 1100px) {
  .nut-kpi-strip { grid-template-columns: 1fr 1fr; }
  .nut-open-grid { grid-template-columns: 1fr; }
  .nut-report-grid--dash { grid-template-columns: 1fr 1fr; }
  .nut-report-grid--dash #nut-report-summary { grid-column: auto; }
}
@media (max-width: 720px) {
  .nutrition-tipo-grid { grid-template-columns: 1fr; }
  .nutrition-overview .nut-report-card,
  .nut-report-grid--dash .nut-report-card {
    min-height: 0;
    aspect-ratio: auto;
    max-height: none;
  }
  .nut-day-layout { grid-template-columns: 1fr; }
  .nut-report-grid--dash { grid-template-columns: 1fr; }
}

/* —— RD parity: tabs Menú | Progreso —— */
.nut-view-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
  margin-bottom: 4px;
  width: fit-content;
}
.nut-view-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.nut-view-tab.is-on {
  background: color-mix(in srgb, var(--primary, #F97316) 18%, transparent);
  color: var(--primary, #F97316);
}
.nut-view-panel.hidden { display: none !important; }

.nut-progress-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 12px;
  align-items: start;
  min-width: 0;
}
.nut-progress-dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 14px;
  align-items: start;
  min-width: 0;
  width: 100%;
}
.nut-progress-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.nut-progress-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  position: sticky;
  top: 8px;
}
.nut-progress-side .nut-report-card { min-height: 0; aspect-ratio: auto; max-height: none; }
.nut-progress-foot {
  margin: 4px 0 0;
  font-size: 0.68rem;
  line-height: 1.35;
  opacity: 0.85;
}
.nut-coach-card {
  text-align: center;
  align-items: center;
  gap: 10px !important;
  padding: 16px 14px 14px !important;
}
.nut-coach-card header {
  width: 100%;
  justify-content: center;
}
.nut-coach-card header h4 { margin: 0; font-size: 0.82rem; }
.nut-coach-visual {
  display: grid;
  place-items: center;
  margin: 4px 0;
}
.nut-coach-ring {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--primary, #F97316) 70%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary, #F97316) 14%, transparent);
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
  color: var(--primary, #F97316);
}
.nut-coach-ring .nav-ico { width: 28px; height: 28px; }
.nut-coach-copy {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}
.nut-coach-copy strong {
  display: block;
  color: var(--text);
  font-size: 0.84rem;
  margin-bottom: 4px;
}
.nut-coach-card > .btn-primary,
.nut-coach-card .nut-rail-cta {
  width: auto;
  min-width: 148px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  margin-top: 2px;
  display: inline-flex;
}
.nut-coach-card .nut-print-row {
  display: none;
}
.nut-adh-hits {
  color: #22c55e !important;
  font-weight: 650;
}
.nut-adh-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.nut-adh-head h4 { margin: 0; }
.nut-week-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nut-week-label {
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--text);
  min-width: 7.5rem;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}
.nut-week-switch .icon-btn {
  width: 28px;
  height: 28px;
  font-size: 1rem;
  line-height: 1;
}
.nut-week-switch .icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
@keyframes nut-prog-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.nut-prog-enter {
  animation: nut-prog-enter 380ms ease both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.nut-prog-dot { cursor: pointer; transition: r 120ms ease; }
.nut-prog-dot:hover { r: 5; }
.nut-prog-bar { cursor: pointer; transition: opacity 120ms ease; }
.nut-prog-bar:hover { opacity: 1; filter: brightness(1.12); }
.nut-prog-line {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Timeline menú del día */
.nut-menu-timeline {
  position: relative;
  --nut-tl-progress: 0%;
}
.nut-menu-slots--timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.nut-menu-slots--timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  border-radius: 2px;
}
.nut-menu-slots--timeline::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  width: 2px;
  height: var(--nut-tl-progress);
  max-height: calc(100% - 20px);
  background: var(--primary, #F97316);
  border-radius: 2px;
  transition: height 220ms ease;
}
.nut-menu-slots--timeline .nut-menu-slot {
  display: grid;
  grid-template-columns: 18px 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 10px 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--hairline, var(--border));
  background: transparent;
  box-shadow: none;
  position: relative;
}
.nut-menu-slots--timeline .nut-menu-slot:last-child { border-bottom: 0; }
.nut-menu-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--muted) 55%, transparent);
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 90%, #000);
  justify-self: start;
  margin-left: -18px;
  z-index: 1;
  box-sizing: border-box;
}
.nut-menu-slot.is-logged .nut-menu-dot,
.nut-meal-card.is-logged > .nut-menu-dot,
.nut-menu-dot.is-filled {
  border-color: var(--primary, #F97316);
  background: var(--primary, #F97316);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #F97316) 25%, transparent);
}
.nut-menu-dot.is-filled.is-alert,
.nut-meal-card.is-alert > .nut-menu-dot.is-filled {
  border-color: var(--err, #ef4444);
  background: var(--err, #ef4444);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--err, #ef4444) 28%, transparent);
}
.nut-day-client-reg {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text, #1a1a1a);
  background: color-mix(in srgb, var(--primary, #F97316) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary, #F97316) 28%, transparent);
  border-radius: 8px;
}
.nut-day-client-reg .nav-ico { width: 1rem; height: 1rem; flex-shrink: 0; }
.nut-day-client-reg.is-empty {
  background: color-mix(in srgb, var(--muted, #888) 12%, transparent);
  border-color: color-mix(in srgb, var(--muted, #888) 28%, transparent);
  color: var(--muted, #666);
}
.nut-day-client-reg .is-warn { color: #b45309; font-style: normal; font-weight: 650; }
.nut-menu-kcal {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--primary, #F97316);
  white-space: nowrap;
}
.nut-menu-kcal--meal {
  font-size: 0.85rem;
  font-weight: 700;
}

/* Menú del día — mockup 06 */
.nut-mode-hero--day {
  padding: 10px 12px 14px;
  border: 0;
  background: transparent;
}
.nut-day-head {
  align-items: center;
  margin-bottom: 10px;
}
.nut-day-head-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
  width: 100%;
}
.nut-day-head-title h4 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.nut-day-edit-ico {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, transparent);
  color: var(--muted);
}
.nut-day-edit-ico:hover {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
.nut-day-edit-ico .nav-ico {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
}
.nut-day-delete-ico {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 8px;
}
.nut-day-delete-ico .nav-ico {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
}
.nut-open-hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.nut-day-head-title .nut-day-cal-wrap {
  margin-left: 0;
}
.nut-badge--lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: color-mix(in srgb, #64748b 32%, transparent);
  color: #cbd5e1;
  border: 1px solid color-mix(in srgb, #64748b 45%, transparent);
}
.nut-badge--lock .nav-ico {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
}

.nut-day-cal-wrap {
  position: relative;
}
.nut-day-cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, transparent);
  color: var(--text);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 650;
}
.nut-day-cal-btn .nav-ico {
  width: 16px;
  height: 16px;
  stroke: var(--primary);
  fill: none;
}
.nut-day-cal-btn:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  color: var(--primary);
}
.nut-day-cal-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  width: min(280px, 86vw);
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--hairline, var(--border));
  background: var(--sys-surface, var(--surface, #12161c));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.nut-day-cal-pop.hidden,
.nut-day-cal-pop[hidden] { display: none !important; }
.nut-day-cal-pop .nutrition-cal-toolbar strong {
  font-size: 0.82rem;
  text-transform: capitalize;
}
.nut-day-cal-pop .ghost.sm[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

.nut-day-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
  gap: 14px;
  align-items: start;
}
.nut-day-main { min-width: 0; }
.nut-menu-day-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  padding-left: 14px;
}
.nut-menu-day-list.nut-menu-timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 18px;
  bottom: 48px;
  width: 2px;
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  border-radius: 2px;
}
.nut-menu-day-list.nut-menu-timeline::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 18px;
  width: 2px;
  height: var(--nut-tl-progress, 0%);
  max-height: calc(100% - 66px);
  background: var(--primary, #F97316);
  border-radius: 2px;
}
.nut-meal-card {
  position: relative;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, transparent);
  /* visible: dots timeline viven fuera del card (left negativo) */
  overflow: visible;
}
.nut-meal-card > .nut-menu-dot {
  position: absolute;
  left: -14px;
  top: 18px;
  margin: 0;
  z-index: 2;
}
.nut-meal-acc-toggle {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.nut-meal-acc-toggle:hover {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.nut-meal-acc-toggle .nutrition-acc-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-left: auto;
  opacity: 0.7;
  transition: transform 200ms ease;
  stroke: currentColor;
  fill: none;
}
.nut-meal-acc.is-open .nutrition-acc-chevron {
  transform: rotate(180deg);
}
.nut-meal-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms ease;
}
.nut-meal-acc.is-open .nut-meal-acc-panel {
  grid-template-rows: 1fr;
}
.nut-meal-acc-panel-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 12px;
}
.nut-meal-acc.is-open .nut-meal-acc-panel-inner {
  padding-bottom: 10px;
}
.nut-meal-card-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.nut-meal-card-title strong {
  font-size: 0.95rem;
  font-weight: 700;
}
.nut-meal-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 6px;
}
.nut-meal-card-actions .ghost.sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  padding: 4px 8px;
}
.nut-meal-card-actions .nav-ico {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
}
.nut-meal-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nut-meal-item {
  display: grid;
  grid-template-columns: 14px 32px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 8px;
}
.nut-meal-item:hover {
  background: color-mix(in srgb, var(--bg, #0d1117) 40%, transparent);
}
.nut-meal-grip {
  display: grid;
  place-items: center;
  color: var(--muted);
  opacity: 0.55;
}
.nut-meal-grip .nav-ico { width: 12px; height: 12px; }
.nut-food-thumb {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.nut-food-thumb--emoji {
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  line-height: 1;
}
.nut-meal-item-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.nut-meal-item-body strong {
  font-size: 0.84rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nut-meal-item-body em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--muted);
}
.nut-meal-del {
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--muted);
}
.nut-meal-del:hover { color: #f87171; }
.nut-meal-ejemplo { margin: 4px 0 0; }
.nut-menu-day-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 4px 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.nut-menu-day-foot em {
  font-style: normal;
  color: var(--primary, #F97316);
  font-weight: 750;
  font-size: 1rem;
}

.nut-day-totals {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 90%, transparent);
  position: sticky;
  top: 8px;
}
.nut-day-totals h5 {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.nut-day-kcal-block {
  text-align: center;
  margin-bottom: 2px;
}
.nut-day-totals .nut-kcal-hero {
  display: block;
  font-size: 1.95rem;
  line-height: 1.1;
  font-weight: 750;
  color: var(--primary, #F97316);
  letter-spacing: -0.02em;
}
.nut-day-totals .nut-kcal-hero span {
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--primary, #F97316);
  opacity: 0.9;
}
.nut-day-obj {
  margin: 4px 0 0;
  font-size: 0.74rem;
  color: var(--muted);
  text-align: center;
}
.nut-day-obj--sec {
  margin-top: 2px;
  font-size: 0.7rem;
  opacity: 0.85;
}
.nut-day-macro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  margin-bottom: 2px;
}
.nut-day-macro-lab {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.74rem;
}
.nut-day-macro-lab span:last-child {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.nut-day-macro-bar {
  grid-column: 1;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  overflow: hidden;
}
.nut-day-macro-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary, #F97316);
}
.nut-day-macro-pct {
  grid-column: 2;
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 2.4em;
  text-align: right;
}
.nut-day-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 2px;
  font-size: 0.68rem;
  color: var(--muted);
}
.nut-day-legend i {
  display: inline-block;
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--muted) 45%, transparent);
  margin-right: 5px;
  vertical-align: middle;
}
.nut-day-legend i.is-on { background: var(--primary, #F97316); }
.nut-day-totals .btn-primary,
.nut-day-totals .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 0;
}
#tab-comidas .nut-day-totals .btn-primary,
#tab-comidas .nut-day-totals .ghost {
  width: 100%;
  max-width: none;
  align-self: stretch;
}
.nut-day-totals .btn-primary .nav-ico,
.nut-day-totals .ghost .nav-ico {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
}
.nut-day-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
}
.nut-day-note .nav-ico {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 1px;
  stroke: currentColor;
  fill: none;
}

@media (max-width: 1100px) {
  .nut-day-layout { grid-template-columns: 1fr; }
  .nut-day-totals { position: static; }
}

/* Charts profesionales — Progress tab */
.nut-chart-wrap,
.nut-prog-chart {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 280px;
  position: relative;
}
.nut-chart-svg {
  width: 100%;
  height: auto;
  max-height: 220px;
  min-height: 0;
  flex: 1 1 auto;
  display: block;
}
.nut-chart-grid {
  stroke: color-mix(in srgb, var(--muted) 22%, transparent);
  stroke-width: 1;
}
.nut-chart-axis {
  fill: var(--muted);
  font-size: 10px;
}
.nut-chart-unit {
  font-size: 9px;
  letter-spacing: 0.02em;
}
.nut-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--muted);
}
.nut-chart-legend--in {
  position: static;
  flex: 0 0 auto;
  align-self: stretch;
  justify-content: center;
  margin-top: 2px;
  padding: 5px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, #0f1419 72%, var(--sys-surface, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--muted) 16%, transparent);
  pointer-events: none;
  white-space: nowrap;
}
.nut-chart-leg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nut-chart-leg i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
.nut-chart-leg.is-dashed i {
  background: transparent !important;
  border: 1.5px dashed currentColor;
  box-sizing: border-box;
  opacity: 0.9;
}
.nut-macro-bars,
.nut-prog-macros {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  justify-content: center;
  max-width: 100%;
  width: 100%;
  padding: 4px 4px 0;
  box-sizing: border-box;
}
.nut-macro-sep {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--muted) 28%, transparent);
  margin: 2px 0 2px;
  width: 100%;
}
.nut-macro-bar-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
  font-size: 0.78rem;
}
.nut-macro-bar-meta span { color: var(--muted); flex: 1; }
.nut-macro-bar-meta strong { font-weight: 650; }
.nut-macro-bar-meta em { font-style: normal; color: var(--muted); font-size: 0.72rem; }
.nut-macro-bar-track {
  height: 10px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  overflow: hidden;
}
.nut-macro-bar-row.is-thick .nut-macro-bar-track { height: 16px; }
.nut-macro-bar-row.is-thick .nut-macro-bar-meta strong { font-size: 0.86rem; }
.nut-macro-bar-fill {
  height: 100%;
  width: var(--nut-bar-pct, 0%);
  border-radius: 99px;
  min-width: 2px;
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nut-adh-legend {
  display: flex;
  gap: 12px;
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 4px;
  flex-wrap: wrap;
}
.nut-adh-legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}
.nut-adh-legend .is-ok::before { background: #22c55e; }
.nut-adh-legend .is-partial::before { background: #F97316; }
.nut-adh-legend .is-empty::before { background: #3f4654; }
.nut-report-kpis--compact {
  margin-top: 4px;
  font-size: 0.85rem;
}

/* Recetas — biblioteca de plantillas */
.nutrition-recipes-dialog { --modal-w: min(920px, 96vw); --modal-max-h: min(84svh, 820px); }
.nutrition-recipes-plan-hint {
  margin: 0;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, transparent);
  font-size: 0.74rem;
  line-height: 1.25;
  flex: 0 0 auto;
}
#nutrition-lib-recipes .nutrition-recipes-plan-hint,
#nutrition-lib-recipes .nutrition-recipes-plan-hint:empty {
  display: none !important;
}
.nutrition-recipes-plan-hint.is-warn {
  border-color: color-mix(in srgb, var(--primary, #F97316) 55%, var(--border));
  color: color-mix(in srgb, var(--primary, #F97316) 70%, var(--text, #e8eaed));
}
.nutrition-recipes-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 0;
}
.nutrition-recipes-toolbar .foods-catalog-search-wrap {
  flex: 0 0 auto;
}
.nutrition-recipes-filters {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}
#nutrition-lib-recipes .nutrition-recipes-filters-toggle,
#nutrition-lib-recipes #nutrition-recipes-filters-toggle {
  position: relative;
}
#nutrition-lib-recipes .nutrition-recipes-filters-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  display: inline-grid;
  place-items: center;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 3px;
  border-radius: 999px;
  background: #F97316;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.nutrition-recipes-filters-badge[hidden] {
  display: none !important;
}
#nutrition-lib-recipes .nutrition-recipes-filters-pop.foods-catalog-filters-pop {
  min-width: min(18rem, 92vw);
  max-width: min(22rem, 96vw);
  gap: 0.55rem;
}
.nutrition-recipes-filters-kicker {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.nutrition-recipes-diet-radios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0;
  padding: 0;
}
.nutrition-recipes-diet-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
  cursor: pointer;
  line-height: 1.2;
  user-select: none;
}
.nutrition-recipes-diet-opt input {
  margin: 0;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  accent-color: #f97316;
}
.nutrition-recipes-diet-opt span {
  line-height: 1.2;
}
.nutrition-recipes-filters-clear {
  margin: 0.15rem 0 0;
  padding: 5px 8px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.nutrition-recipes-filters-clear:hover {
  color: #ea580c;
}
.nutrition-recipes-filters-pop .nut-allergen-chips {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nutrition-recipes-dialog .foods-catalog-add,
#nutrition-lib-recipes .foods-catalog-add {
  color: #fff;
  background: #F97316;
  border-color: #F97316;
}
.nutrition-recipes-dialog .foods-catalog-add:hover:not(:disabled),
#nutrition-lib-recipes .foods-catalog-add:hover:not(:disabled) {
  background: #ea580c;
  border-color: #ea580c;
  color: #fff;
}
.nutrition-recipes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
}
#nutrition-lib-recipes .nutrition-recipes-list.nutrition-recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  grid-auto-rows: auto;
  gap: 14px 14px;
  row-gap: 14px;
  column-gap: 14px;
  align-content: start;
  align-items: stretch;
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
  overscroll-behavior: auto;
  flex: 0 0 auto;
  min-height: auto;
  height: auto;
}
#nutrition-lib-recipes .nutrition-recipes-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px 16px;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 14px;
}
/* Compact teaser cards: smaller footprint, clear gap, name below media. */
#nutrition-lib-recipes .nutrition-recipe-card--teaser,
.nutrition-recipe-card--teaser {
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: none;
  min-height: 0;
  margin: 0;
  align-self: stretch;
  overflow: hidden; /* radius clip only — height = media + body */
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.nutrition-recipe-card--teaser:hover,
.nutrition-recipe-card--teaser:focus-visible {
  border-color: color-mix(in srgb, #f97316 55%, var(--border));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}
#nutrition-lib-recipes .nutrition-recipe-card--teaser .nutrition-recipe-media,
.nutrition-recipe-card--teaser .nutrition-recipe-media {
  position: relative;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 0;
  height: auto;
  max-height: 132px;
  overflow: hidden;
}
#nutrition-lib-recipes .nutrition-recipe-card--teaser .nutrition-recipe-thumb,
#nutrition-lib-recipes .nutrition-recipe-card--teaser .nutrition-recipe-thumb-wrap,
#nutrition-lib-recipes .nutrition-recipe-card--teaser .nutrition-recipe-ph,
.nutrition-recipe-card--teaser .nutrition-recipe-thumb,
.nutrition-recipe-card--teaser .nutrition-recipe-thumb-wrap,
.nutrition-recipe-card--teaser .nutrition-recipe-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}
.nutrition-recipe-card--teaser .nutrition-recipe-thumb {
  display: block;
}
.nutrition-recipe-card--teaser .nutrition-recipe-ph {
  display: grid;
  place-items: center;
}
#nutrition-lib-recipes .nutrition-recipe-card--teaser .nutrition-recipe-body,
.nutrition-recipe-card--teaser .nutrition-recipe-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  flex-shrink: 0;
  padding: 8px 10px 10px;
  min-height: 0;
  background: color-mix(in srgb, var(--sys-surface, var(--surface, #1a1d24)) 94%, #000);
}
#nutrition-lib-recipes .nutrition-recipe-card--teaser .nutrition-recipe-title,
.nutrition-recipe-card--teaser .nutrition-recipe-title,
.nutrition-recipe-card--teaser .nutrition-recipe-body header strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  /* Reserve 2 lines so 1-line titles don't shrink the card */
  min-height: calc(1.3em * 2);
  height: calc(1.3em * 2);
  color: var(--text, #e8eaed);
  opacity: 1;
  visibility: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.nutrition-recipe-card--teaser .nutrition-recipe-meta {
  margin: 3px 0 0;
  font-size: 0.68rem;
  line-height: 1.25;
  min-height: 1.25em;
  height: 1.25em;
  color: var(--muted, #9ca3af);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 auto;
}
.nutrition-recipe-detail-dialog {
  --modal-w: min(540px, 94vw);
  --modal-max-h: min(88svh, 760px);
}
.nutrition-recipe-detail-media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  background: linear-gradient(145deg, #2a2118 0%, #15181e 55%, #0f1216 100%);
}
.nutrition-recipe-detail-media .nutrition-recipe-thumb,
.nutrition-recipe-detail-media .nutrition-recipe-ph {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 220px;
  object-fit: cover;
}
.nutrition-recipe-detail-media .nutrition-recipe-mins {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(4px);
}
.nutrition-recipe-detail-media .nutrition-recipe-mins .nav-ico {
  width: 13px;
  height: 13px;
}
.nutrition-recipe-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.nutrition-recipe-detail-macros {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 !important;
  font-size: 0.82rem !important;
  color: color-mix(in srgb, var(--text) 88%, var(--muted)) !important;
}
.nutrition-recipe-macros-hint {
  margin: 6px 0 0;
  font-size: 0.72rem;
}
.nutrition-recipe-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 70%, transparent);
  font-weight: 600;
  line-height: 1.2;
}
.nutrition-recipe-stat .nav-ico {
  width: 14px;
  height: 14px;
  color: #f97316;
  flex: 0 0 auto;
}
.nutrition-recipe-stat-label {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.nutrition-recipe-detail-tags-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nutrition-recipe-detail-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.nutrition-recipe-detail-kicker .nav-ico {
  width: 14px;
  height: 14px;
  color: #f97316;
}
.nutrition-recipe-detail-tip {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #f97316 28%, var(--border));
  background: color-mix(in srgb, #f97316 10%, transparent);
  font-size: 0.86rem;
  line-height: 1.45;
}
.nutrition-recipe-detail-ings {
  margin: 0;
}
.nutrition-recipe-detail-ings h4 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.nutrition-recipe-detail-ings h4 .nav-ico {
  width: 14px;
  height: 14px;
  color: #f97316;
}
.nutrition-recipe-detail-ings ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
}
.nutrition-recipe-detail-ings li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 35%, transparent);
}
.nutrition-recipe-detail-ings li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.45em;
  border-radius: 50%;
  background: #f97316;
  flex: 0 0 auto;
}
.nutrition-recipe-detail-pasos {
  margin-top: 14px;
}
.nutrition-recipe-detail-pasos h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 0.92rem;
}
.nutrition-recipe-detail-pasos h4 .nav-ico {
  width: 16px;
  height: 16px;
}
.nutrition-recipe-pasos-list {
  margin: 0;
  padding: 0 0 0 1.25rem;
  display: grid;
  gap: 8px;
}
.nutrition-recipe-pasos-list li {
  line-height: 1.45;
  font-size: 0.92rem;
}
.nutrition-recipe-detail-video {
  margin: 10px 0 0;
}
.nutrition-recipe-thumb-wrap.is-video {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.nutrition-recipe-thumb-wrap.is-video .nutrition-recipe-play {
  position: absolute;
  inset: auto 8px 8px auto;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border-radius: 999px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 11px;
}
.nutrition-recipe-detail-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.nutrition-recipe-detail-footer .danger {
  margin-right: auto;
}
.nutrition-recipe-attach-dialog { --modal-w: min(460px, 94vw); }
.nutrition-recipe-attach-client {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 4px;
}
.nutrition-recipe-attach-client > .field-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.nutrition-recipe-attach-client-search {
  position: relative;
}
.nutrition-recipe-attach-client-search input[type="search"] {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px 8px 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 55%, transparent);
  color: var(--text);
}
.nutrition-recipe-attach-client-search .attach-client-search-ico {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}
.nutrition-recipe-attach-client-opts {
  margin-top: 6px;
  /* ~4 filas visibles; el resto con scroll */
  max-height: calc(4 * 3.05rem + 0.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 92%, #000);
}
.nutrition-recipe-attach-client-opts.hidden { display: none; }
.nutrition-recipe-attach-client-opts .planner-pick-option {
  width: 100%;
  text-align: left;
  min-height: 3rem;
}
.nutrition-recipe-attach-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #f97316 35%, var(--border));
  background: color-mix(in srgb, #f97316 8%, transparent);
  font-size: 0.86rem;
}
.nutrition-recipe-attach-selected .nav-ico {
  width: 16px;
  height: 16px;
  color: #f97316;
  flex: 0 0 auto;
}
.nutrition-recipe-attach-plan-status {
  margin: 0;
  font-size: 0.8rem;
}
.nutrition-recipe-attach-plan-status.is-warn {
  color: #fbbf24;
}
.nutrition-recipe-attach-meal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.85rem;
}
.nutrition-recipe-attach-meal select {
  width: 100%;
  min-height: 38px;
}
@media (max-width: 1100px) {
  #nutrition-lib-foods .nutrition-foods-list.nutrition-foods-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #nutrition-lib-recipes .nutrition-recipes-list.nutrition-recipes-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .food-form-row--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  #nutrition-lib-foods .nutrition-foods-list.nutrition-foods-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    overflow: visible;
    overflow-y: visible;
  }
  #nutrition-lib-recipes .nutrition-recipes-list.nutrition-recipes-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-auto-rows: auto;
    overflow: visible;
    overflow-y: visible;
    align-content: start;
    align-items: stretch;
  }
  #nutrition-lib-recipes .nutrition-recipe-card--teaser {
    height: 100%;
    max-height: none;
    align-self: stretch;
  }
  #nutrition-lib-recipes .nutrition-recipe-card--teaser .nutrition-recipe-media {
    flex: 0 0 auto;
    aspect-ratio: 4 / 3;
    min-height: 0;
    max-height: 120px;
  }
  #nutrition-lib-recipes .nutrition-recipe-card--teaser .nutrition-recipe-thumb,
  #nutrition-lib-recipes .nutrition-recipe-card--teaser .nutrition-recipe-thumb-wrap,
  #nutrition-lib-recipes .nutrition-recipe-card--teaser .nutrition-recipe-ph {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    max-height: none;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

/* Lista de compra — categorías + thumbs */
.nutrition-shopping-hint {
  margin: 0 0 10px;
  font-size: 0.8rem;
}
.nutrition-shopping-list.shopping-list-root {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nutrition-shop-cat {
  position: relative;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 55%, transparent);
}
.nutrition-shop-cat > button {
  position: relative;
  z-index: 1;
}
.nutrition-shop-cat > button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--shop-cat-color, #F97316);
  opacity: 0.9;
}
.nutrition-shop-cat > button::after {
  content: attr(data-shop-toggle);
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.4rem;
  line-height: 1;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  filter: grayscale(0.2);
}
.nutrition-shop-cat-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.nutrition-shop-cat-ico {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--shop-cat-color, #F97316) 18%, transparent);
  font-size: 0.95rem;
  flex: 0 0 auto;
}
.nutrition-shop-cat-title {
  font-weight: 700;
  font-size: 0.92rem;
}
.nutrition-shop-cat-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--shop-cat-color, #F97316) 85%, #fff);
  background: color-mix(in srgb, var(--shop-cat-color, #F97316) 16%, transparent);
}
.nutrition-shop-items {
  list-style: none;
  margin: 0;
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nutrition-shop-meal:not(.is-open) .nutrition-shop-items { display: none; }
.nutrition-shop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 35%, transparent);
}
.nutrition-shop-thumb {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  background: #1a1d24;
}
.nutrition-shop-thumb--ph {
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  border: 1px solid color-mix(in srgb, #F97316 25%, var(--border));
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, #F97316 22%, transparent), transparent 60%),
    #1a1d24;
}
.nutrition-shop-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.nutrition-shop-item-name {
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.25;
}
.nutrition-shop-item-qty {
  font-size: 0.78rem;
  color: var(--muted);
}
@media print {
  .nutrition-shopping-dialog .modal-header .icon-btn,
  .nutrition-shopping-dialog .modal-header .ghost { display: none !important; }
  .nutrition-shop-meal { break-inside: avoid; }
  .nutrition-shop-meal .nutrition-shop-items { display: flex !important; }
}
.nutrition-recipe-card--rd {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 80%, transparent);
}
.nutrition-recipe-media {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, #2a2118 0%, #15181e 55%, #0f1216 100%);
}
.nutrition-recipe-ph {
  width: 100%;
  height: 100%;
  min-height: 72px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 30% 20%, color-mix(in srgb, #F97316 28%, transparent), transparent 55%),
    linear-gradient(160deg, #2c241c, #12151a 70%);
}
.nutrition-recipe-ph span {
  font-size: 2.2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
.nutrition-recipe-emoji { font-size: 2.2rem; line-height: 1; }
.nutrition-recipe-thumb {
  width: 100%;
  height: 100%;
  min-height: 72px;
  object-fit: cover;
  display: block;
}
.nutrition-recipe-mins {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}
.nutrition-recipe-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.nutrition-recipe-body header strong,
.nutrition-recipe-title {
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--text);
}
.nutrition-recipe-ings {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nutrition-recipe-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.nutrition-recipe-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--primary, #F97316) 45%, var(--border));
  color: var(--primary, #F97316);
}
.nutrition-recipe-macros { margin: 0; font-size: 0.72rem; color: var(--muted); }
.nutrition-recipe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}
.nutrition-recipe-card--rd .nutrition-recipe-actions .btn-primary,
.nutrition-recipe-card--rd .nutrition-recipe-actions .ghost {
  width: auto;
  margin: 0;
}
.nutrition-recipe-form-dialog {
  --modal-w: min(720px, 96vw);
  --modal-max-h: min(92svh, 860px);
}
.nutrition-recipe-form-dialog.af-wizard-dialog .af-wizard-body {
  gap: 12px;
}
.recipe-wizard-section-kicker {
  margin: 0 0 8px;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted, #9ca3af);
}
.recipe-visual-seg {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}
.recipe-visual-seg-btn {
  flex: 1 1 0;
  min-width: 88px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text, #e5e7eb);
  font-weight: 600;
  cursor: pointer;
}
.recipe-visual-seg-btn.is-on {
  border-color: #f97316;
  color: #f97316;
  background: rgba(249, 115, 22, 0.12);
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.35);
}
.recipe-stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.recipe-stepper input {
  width: 64px;
  text-align: center;
}
.recipe-stepper-btn {
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
}
.recipe-macros-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 10px;
}
.recipe-macro-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted, #9ca3af);
}
.recipe-macro-pill strong {
  color: var(--text, #f3f4f6);
  font-weight: 700;
}
.recipe-foods-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.recipe-food-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}
.recipe-food-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.recipe-food-row-main strong {
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recipe-food-grams {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--muted, #9ca3af);
  margin: 0;
}
.recipe-food-grams input {
  width: 72px;
  min-height: 32px;
}
.recipe-add-foods-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: #f97316;
  color: #f97316;
  width: 100%;
  justify-content: center;
  min-height: 42px;
}
.recipe-add-foods-btn:hover {
  background: rgba(249, 115, 22, 0.12);
}
.recipe-allergens-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.recipe-detect-allergens {
  font-size: 0.8rem;
}
.recipe-diet-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.recipe-diet-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  cursor: pointer;
}
.recipe-diet-opt input[type="radio"] {
  accent-color: #f97316;
}
#nutrition-lib-recipes .nutrition-lib-toolbar-head {
  overflow: visible;
}
#nutrition-lib-recipes .nutrition-lib-toolbar {
  flex-wrap: wrap;
  min-width: 0;
}
#nutrition-lib-recipes .nutrition-search-field--lib {
  flex: 1 1 180px;
  min-width: 0;
}
@media (max-width: 560px) {
  .recipe-food-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .recipe-food-row .icon-btn {
    grid-column: 2;
    grid-row: 1;
  }
  .recipe-food-grams {
    grid-column: 1 / -1;
  }
}
.nutrition-recipe-attach-dialog { --modal-w: min(460px, 94vw); }
.nutrition-recipe-attach-meal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.85rem;
}
.nutrition-recipe-attach-meal select {
  width: 100%;
  min-height: 38px;
}

/* ── Nutrición Progreso mobile HARD FIX (cascade AFTER base) ─────────────
   Root cause: prior @media lived ABOVE .nut-progress-dash → 2-col always.
   ≤900px: document flow KPI → Atención → Coach → charts; opaque cards. */
@media (max-width: 1100px) {
  .nut-progress-layout,
  .nut-progress-dash {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0;
  }
  .nut-progress-side {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }
}

@media (max-width: 900px) {
  .nut-progress-dash {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
    z-index: 0 !important;
  }
  .nut-progress-main,
  .nut-progress-side {
    display: contents !important;
  }
  .nut-kpi-strip {
    order: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-width: 0;
    width: 100%;
    position: relative;
    z-index: 1;
  }
  .nut-report-grid--prog-main {
    order: 2;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    min-width: 0;
    width: 100%;
    position: relative;
    z-index: 1;
  }
  #nut-report-proj {
    order: 3;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-width: 0;
  }
  #nut-report-week {
    order: 4;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-width: 0;
  }
  .nut-progress-foot {
    order: 5;
    width: 100%;
  }
  .nutrition-overview .nut-report-card,
  .nut-report-grid--dash .nut-report-card,
  .nut-progress-side .nut-report-card {
    position: relative !important;
    z-index: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    min-width: 0;
    background: var(--sys-surface, var(--surface)) !important;
    overflow: hidden;
  }
  .nut-chart-wrap,
  .nut-prog-chart {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    max-height: none !important;
    position: relative !important;
  }
  .nut-chart-svg {
    width: 100% !important;
    max-width: 100%;
    height: auto;
    display: block;
  }
  /* Legend below plot — never center overlay */
  .nut-chart-legend,
  .nut-chart-legend--in {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px 12px;
    width: 100%;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 0 0 10px 10px;
    background: color-mix(in srgb, var(--sys-bg, #0f1115) 88%, #000) !important;
    color: color-mix(in srgb, var(--text, #fff) 85%, transparent);
    z-index: auto !important;
    pointer-events: auto;
    white-space: normal !important;
  }

  /* Toolbar: scroll-snap chip bar */
  #tab-comidas .nutrition-toolbar-rd {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    justify-content: flex-start !important;
    gap: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
    padding: 6px 4px;
  }
  #tab-comidas .nut-tb-group {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    border-right: 1px solid var(--hairline, var(--border));
    padding: 0 10px;
    scroll-snap-align: start;
  }
  #tab-comidas .nut-tb-group:last-child { border-right: 0; }
  #tab-comidas .nut-tb-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px;
    width: auto;
  }
  #tab-comidas .nut-tb-btn {
    flex: 0 0 auto !important;
    min-width: 56px !important;
    min-height: 44px !important;
    width: auto !important;
    height: auto !important;
    padding: 6px 8px !important;
  }
  #tab-comidas .nut-tb-caption {
    display: block !important;
    font-size: 0.58rem !important;
    max-width: 4.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #tab-comidas .nut-tb-label {
    display: block !important;
    text-align: left;
    padding-left: 2px;
  }

  /* Client bar */
  #tab-comidas .nutrition-clientbar {
    flex-wrap: wrap !important;
    gap: 8px 10px;
    min-width: 0;
    width: 100%;
  }
  #tab-comidas .nutrition-client-compact {
    max-width: 100%;
    flex: 1 1 auto;
    min-width: 0;
  }
  #tab-comidas .nutrition-plan-title {
    max-width: min(220px, 60vw);
  }

  /* FAB clearance */
  #tab-comidas #nutrition-fab-wrap {
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    z-index: 50;
  }
  #tab-comidas .nutrition-plan-content {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden;
    min-width: 0;
  }
  #tab-comidas .nutrition-overview,
  #tab-comidas .nut-view-panel {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Nutrition modals — near full-sheet on phone */
  .nutrition-wizard-dialog,
  .nutrition-wizard-dialog--rd,
  .nutrition-tool-dialog,
  .nutrition-assistant-dialog,
  .nutrition-report-dialog,
  .nutrition-alerts-dialog,
  .nutrition-body-dialog,
  .nutrition-foods-dialog,
  .nutrition-history-dialog,
  .nutrition-menu-dialog,
  .nutrition-recipes-dialog,
  .nutrition-recipe-form-dialog,
  .nutrition-recipe-attach-dialog,
  .nutrition-shopping-dialog {
    --modal-w: calc(100vw - 16px);
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100svh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    margin: max(8px, env(safe-area-inset-top, 0px)) auto max(8px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 640px) {
  .nut-progress-dash { gap: 10px !important; }
  .nut-kpi-strip { gap: 6px; }
  .nut-kpi-card {
    padding: 10px 11px;
    min-height: 64px;
    gap: 6px;
  }
  .nut-kpi-card strong { font-size: 1.08rem; }
  .nut-kpi-ico { width: 30px; height: 30px; }
  .nut-kpi-ico--spark { width: 38px; height: 22px; }
  .nut-report-grid--dash {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  #tab-comidas .nut-tb-btn {
    min-width: 52px !important;
    min-height: 44px !important;
  }
  #tab-comidas .nut-tb-caption { font-size: 0.52rem !important; }

  .nutrition-wizard-dialog,
  .nutrition-wizard-dialog--rd,
  .nutrition-tool-dialog,
  .nutrition-assistant-dialog,
  .nutrition-report-dialog,
  .nutrition-alerts-dialog,
  .nutrition-body-dialog,
  .nutrition-foods-dialog,
  .nutrition-history-dialog,
  .nutrition-menu-dialog,
  .nutrition-recipes-dialog,
  .nutrition-recipe-form-dialog,
  .nutrition-shopping-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100svh !important;
    max-height: 100svh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    --modal-w: 100vw;
    --modal-max-h: 100svh;
  }
}

/* === CMD DENSE VIEWPORT — Centro de mando / Inicio (mockup 01/04) === */
/* Bento denso: llena altura del content; scroll página solo <700px. */

#tab-inicio .cmd-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 8px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, var(--surface)) 0%, var(--surface) 55%);
  border: 1px solid color-mix(in srgb, var(--border, var(--hairline)) 80%, #fff 12%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  margin-bottom: 0;
  overflow: hidden;
}
#tab-inicio .cmd-date {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 2px;
}
#tab-inicio .cmd-welcome {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
#tab-inicio .cmd-sub {
  display: none; /* mockup denso: fecha + hola bastan */
}
#tab-inicio .cmd-hero-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin: 0;
}
#tab-inicio .cmd-hero-stat {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
#tab-inicio .cmd-hero-stat dt {
  margin: 0;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  font-weight: 600;
}
#tab-inicio .cmd-hero-stat dd {
  margin: 1px 0 0;
  font-size: 1.15rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
#tab-inicio .cmd-hero-stat dd small {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
#tab-inicio .cmd-hero-stat dd.is-alert,
#tab-inicio #cmd-stat-alertas.is-alert {
  color: var(--err, #f87171);
}

#tab-inicio .cmd-section-head {
  margin-bottom: 4px;
}
#tab-inicio .cmd-section-head h3,
#tab-inicio .cmd-panel > h3 {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
#tab-inicio .cmd-link-btn {
  color: var(--muted);
  font-size: 11px;
  padding: 2px 6px;
}
#tab-inicio .cmd-link-btn:hover {
  color: var(--primary);
}

/* Agenda: strip horizontal compacto (no grid 4x alto) */
#tab-inicio .cmd-agenda-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
  min-height: 0;
}
#tab-inicio .cmd-agenda-card {
  flex: 0 0 min(188px, 68vw);
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border, var(--hairline));
  text-align: left;
  color: inherit;
  scroll-snap-align: start;
  transition: border-color 160ms ease, background 160ms ease;
}
#tab-inicio .cmd-agenda-card.is-now {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border, var(--hairline)));
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent);
}
#tab-inicio .cmd-agenda-card.is-now::before {
  display: none !important;
}
#tab-inicio .cmd-agenda-time {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
#tab-inicio .cmd-agenda-title {
  font-size: 12px;
  font-weight: 650;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tab-inicio .cmd-agenda-meta {
  font-size: 10px;
  color: var(--muted);
}
#tab-inicio .cmd-agenda-client {
  margin-top: 2px;
  padding-top: 0;
  font-size: 10px;
  color: var(--text);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
#tab-inicio .chip-now {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--primary);
  color: #111;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: auto;
}
#tab-inicio .cmd-skeleton {
  flex: 0 0 160px;
  height: 56px;
}

#tab-inicio .cmd-mid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 1fr);
  gap: 8px;
  margin-bottom: 0;
}
#tab-inicio .cmd-panel {
  background: var(--surface);
  border: 1px solid var(--border, var(--hairline));
  border-radius: 11px;
  padding: 8px 10px;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#tab-inicio .cmd-aforo-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 2px 0 0;
  flex-wrap: nowrap;
  min-width: 0;
}
#tab-inicio .cmd-ring {
  --pct: 0;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--surface) 66%, transparent 67% 100%),
    conic-gradient(var(--primary) calc(var(--pct) * 1%), color-mix(in srgb, var(--surface) 70%, #fff 8%) 0);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--border, var(--hairline));
  overflow: hidden;
}
#tab-inicio .cmd-ring-inner {
  width: 64%;
  max-width: 72px;
  text-align: center;
  line-height: 1.1;
  overflow: hidden;
}
#tab-inicio .cmd-ring-value {
  display: block;
  font-size: 1.35rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
#tab-inicio .cmd-ring-label {
  display: block;
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 1px;
}
#tab-inicio .cmd-aforo-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
#tab-inicio .cmd-aforo-legend .muted {
  color: var(--muted);
}
#tab-inicio .cmd-status-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
#tab-inicio .cmd-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#tab-inicio .cmd-sede-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sede-dot, var(--ok));
  flex-shrink: 0;
  margin-right: 0;
}
#tab-inicio .cmd-aforo-sedes {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 4.75rem;
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 0;
  padding-right: 2px;
}
#tab-inicio .cmd-aforo-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}
#tab-inicio .cmd-skeleton-block {
  height: 112px;
}
#tab-inicio .cmd-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--border, var(--hairline)) 80%, #fff 12%);
  background: color-mix(in srgb, var(--surface) 80%, #fff 4%);
  color: var(--muted);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}
#tab-inicio .cmd-refresh-btn svg {
  width: 11px;
  height: 11px;
}
#tab-inicio .cmd-refresh-btn:hover {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border, var(--hairline)));
}

#tab-inicio .cmd-action-stack,
#tab-inicio #quick-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}
#tab-inicio .cmd-action {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 8px 10px;
  min-height: 48px;
  border-radius: 9px;
  border: 1px solid var(--border, var(--hairline));
  background: color-mix(in srgb, var(--surface) 70%, #fff 4%);
  color: inherit;
  box-shadow: none;
}
#tab-inicio .cmd-action-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 0.75rem;
}
#tab-inicio .cmd-action.primary,
#tab-inicio .cmd-action:first-child {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, #fff), var(--primary));
  border-color: transparent;
  color: #1a0f08;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 22%, transparent);
}
#tab-inicio .cmd-action.primary .cmd-action-icon,
#tab-inicio .cmd-action:first-child .cmd-action-icon {
  background: rgba(0, 0, 0, 0.12);
  color: inherit;
}
#tab-inicio .cmd-action:nth-child(n + 2) {
  background: color-mix(in srgb, var(--surface) 70%, #fff 4%);
  border-color: var(--border, var(--hairline));
  color: var(--text);
  box-shadow: none;
}
#tab-inicio .cmd-action-label {
  font-size: 12px;
  font-weight: 700;
}
#tab-inicio .cmd-action-desc {
  display: block;
  font-size: 10px;
  opacity: 0.78;
  line-height: 1.2;
  font-weight: 500;
}
#tab-inicio .cmd-action-arrow {
  font-size: 0.85rem;
  opacity: 0.55;
}

#tab-inicio .cmd-bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 0;
}
#tab-inicio .cmd-dense-list {
  --cmd-row-h: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  width: 100%;
  max-height: calc(var(--cmd-row-h) * 4);
  overflow-x: hidden;
  overflow-y: auto;
}
#tab-inicio #cmd-upcoming.cmd-dense-list { --cmd-row-h: 36px; }
#tab-inicio #cmd-checkins.cmd-dense-list { --cmd-row-h: 30px; }
/* ~3 filas visibles; resto scroll interno — badge a la derecha, sin CTAs */
#tab-inicio #cmd-risk.cmd-dense-list {
  --cmd-row-h: 52px;
  max-height: calc(var(--cmd-row-h) * 3 + 12px) !important;
  gap: 6px;
}
#tab-inicio .cmd-dense-list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  padding: 4px 5px;
  border-radius: 7px;
  border-bottom: 0 !important;
  min-height: var(--cmd-row-h);
  height: auto;
  box-sizing: border-box;
  font-size: 11px;
}
#tab-inicio #cmd-checkins.cmd-dense-list li {
  padding: 2px 5px;
  min-height: var(--cmd-row-h);
}
#tab-inicio #cmd-checkins .cmd-dense-main span {
  display: none;
}
#tab-inicio .cmd-dense-list li:hover {
  background: color-mix(in srgb, var(--surface) 70%, #fff 5%);
}
/* Dot | nombre+motivo | badge — sin overlap ni CTAs */
#tab-inicio .cmd-dense-list li.is-risk {
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 8px;
  padding: 6px 6px;
  min-height: var(--cmd-row-h, 52px);
  height: auto;
}
#tab-inicio .cmd-dense-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#tab-inicio .cmd-dense-main strong {
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tab-inicio .cmd-dense-main span {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tab-inicio .cmd-dense-time {
  flex-shrink: 0;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
#tab-inicio .cmd-risk-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn, #fbbf24);
  margin: 0 auto;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn, #fbbf24) 18%, transparent);
}
#tab-inicio .cmd-risk-dot.high {
  background: var(--err, #f87171);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--err, #f87171) 22%, transparent);
}
#tab-inicio #cmd-risk .cmd-badge {
  flex-shrink: 0;
  align-self: center;
}
#tab-inicio .cmd-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  white-space: nowrap;
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tab-inicio .cmd-badge.ok {
  background: color-mix(in srgb, var(--ok, #34d399) 14%, transparent);
  color: var(--ok, #34d399);
}
#tab-inicio .cmd-badge.muted {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}
#tab-inicio .cmd-badge.warn {
  background: color-mix(in srgb, var(--err, #f87171) 14%, transparent);
  color: var(--err, #f87171);
}

/* Empty agenda: fila baja — no ~40% viewport */
#tab-inicio .cmd-empty {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px 10px;
  padding: 6px 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  width: 100%;
  box-sizing: border-box;
}
#tab-inicio .cmd-agenda-strip > .cmd-empty,
#tab-inicio .cmd-empty.has-art {
  background: var(--surface);
  border: 1px solid var(--border, var(--hairline));
  border-radius: 10px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 56px;
}
#tab-inicio .cmd-empty.has-art > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tab-inicio .empty-art-img.sm,
#tab-inicio .cmd-empty .empty-art-img {
  width: 40px;
  height: 40px;
  margin: 0;
  flex-shrink: 0;
}
#tab-inicio .cmd-empty-art {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 70%, #fff 4%);
  border: 1px dashed color-mix(in srgb, var(--border, var(--hairline)) 80%, #fff 12%);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 14px;
  flex-shrink: 0;
}
#tab-inicio .cmd-btn-primary {
  border: 0;
  background: var(--primary);
  color: #1a0f08;
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
#tab-inicio .cmd-btn-ghost {
  border: 1px solid color-mix(in srgb, var(--border, var(--hairline)) 80%, #fff 12%);
  background: color-mix(in srgb, var(--surface) 70%, #fff 4%);
  color: var(--text);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

#tab-inicio .diag,
#tab-inicio #diag-panel {
  margin-top: 0;
}
#tab-inicio .diag-summary {
  padding: 6px 10px;
  font-size: 0.72rem;
}
#tab-inicio .diag-hint {
  font-size: 0.62rem;
}

/* Shell: llena altura; bottom absorbe resto; listas scroll interno */
#tab-inicio.tab-panel.active {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  gap: 8px;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: contain;
  padding-bottom: 4px;
}

#tab-inicio .cmd-hero,
#tab-inicio .cmd-section,
#tab-inicio .cmd-mid,
#tab-inicio .diag,
#tab-inicio #diag-panel,
#tab-inicio #cmd-api-error {
  flex: 0 0 auto !important;
}

#tab-inicio .cmd-bottom {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none;
}

#tab-inicio .cmd-bottom .cmd-panel {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#tab-inicio .cmd-mid .cmd-panel {
  min-width: 0 !important;
  overflow: hidden;
}

#tab-inicio .cmd-dense-list {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-height: calc(var(--cmd-row-h, 34px) * 4) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#tab-inicio #cmd-risk.cmd-dense-list {
  max-height: calc(var(--cmd-row-h, 52px) * 3 + 12px) !important;
}

#tab-inicio .cmd-dense-list li,
#tab-inicio .cmd-dense-list .cmd-row-action {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-width: 0 !important;
  max-width: 100%;
  box-sizing: border-box;
}

#tab-inicio .cmd-dense-list li.is-risk,
#tab-inicio .cmd-dense-list .is-risk {
  grid-template-columns: 14px minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: var(--cmd-row-h, 52px) !important;
  height: auto !important;
}

#tab-inicio .cmd-dense-main {
  min-width: 0 !important;
  overflow: hidden;
}

#tab-inicio .cmd-dense-main strong,
#tab-inicio .cmd-dense-main span {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 1100px) {
  #tab-inicio .cmd-hero {
    align-items: flex-start;
  }
  #tab-inicio .cmd-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #tab-inicio .cmd-bottom .cmd-panel:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 800px) {
  #tab-inicio .cmd-mid,
  #tab-inicio .cmd-bottom {
    grid-template-columns: 1fr !important;
  }
}

@media (max-height: 820px) {
  #tab-inicio .cmd-ring {
    width: 100px;
    height: 100px;
  }
  #tab-inicio .cmd-ring-value {
    font-size: 1.2rem;
  }
  #tab-inicio .cmd-welcome {
    font-size: 1.08rem;
  }
}

/* Fallback scroll solo viewports muy bajos / zoom raro */
@media (max-height: 700px) {
  #tab-inicio.tab-panel.active {
    overflow-y: auto !important;
    height: auto;
    max-height: 100%;
  }
  #tab-inicio .cmd-bottom {
    flex: 0 0 auto !important;
  }
  #tab-inicio .cmd-bottom .cmd-panel {
    overflow: visible !important;
  }
  #tab-inicio .cmd-dense-list {
    flex: 0 0 auto !important;
    overflow-y: visible !important;
  }
  #tab-inicio .cmd-empty.has-art,
  #tab-inicio .cmd-agenda-strip > .cmd-empty {
    max-height: none;
  }
}

/* Home 20260908: anula densify posterior. Scroll + aire gana al cascade. */
#tab-inicio.tab-panel.active {
  display: flex !important;
  flex-direction: column;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  max-height: 100% !important;
  gap: 22px !important;
  padding-bottom: 40px !important;
}
#tab-inicio .cmd-hero {
  padding: 28px 28px 24px !important;
  margin-bottom: 0 !important;
  align-items: flex-start !important;
  overflow: visible !important;
}
#tab-inicio .cmd-welcome { font-size: 1.85rem !important; }
#tab-inicio .cmd-sub { display: block !important; font-size: 0.95rem !important; }
#tab-inicio .cmd-kpi-row,
#tab-inicio .cmd-feed,
#tab-inicio .cmd-ops,
#tab-inicio .cmd-block,
#tab-inicio .cmd-section { flex: 0 0 auto !important; }
#tab-inicio .cmd-panel {
  padding: 20px 22px !important;
  overflow: visible !important;
  min-height: 0 !important;
}
#tab-inicio .cmd-panel-tall { min-height: 280px !important; }
#tab-inicio .cmd-dense-list {
  max-height: none !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}
#tab-inicio .cmd-dense-list li {
  min-height: 56px !important;
  padding: 12px 8px !important;
  font-size: 0.86rem !important;
}
#tab-inicio .cmd-agenda-card {
  flex-basis: min(260px, 78vw) !important;
  min-height: 124px !important;
  padding: 18px !important;
}
#tab-inicio .cmd-action { min-height: 56px !important; padding: 12px 14px !important; }
#tab-inicio .cmd-action-desc { display: block !important; }
#tab-inicio .cmd-btn-primary,
#tab-inicio .cmd-btn-ghost {
  padding: 10px 14px !important;
  font-size: 0.84rem !important;
  border-radius: 10px !important;
}
#tab-inicio .cmd-empty.has-art {
  flex-direction: column !important;
  padding: 28px 8px !important;
}
#tab-inicio .cmd-aforo-sedes { max-height: none !important; }
#tab-inicio .cmd-people-list li,
#tab-inicio .cmd-people-list li.is-risk {
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
}
@media (max-width: 800px) {
  #tab-inicio .cmd-welcome { font-size: 1.5rem !important; }
}

/* ═══ AACR 20260831 — Agenda/Aforo/Clientes/Retención ═══ */
#aforo-live-stats .sede-cap.is-ok {
  border-color: color-mix(in srgb, var(--ok) 32%, transparent);
}
#aforo-live-stats .sede-cap.is-ok .nums { color: var(--ok); }
#aforo-live-stats .sede-cap.is-ok .cap-bar > i { background: var(--ok); }

.aforo-workspace { min-height: 0; overflow: hidden; }
.aforo-toolbar {
  align-items: center;
  flex-wrap: wrap;
}
.aforo-filter-label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  font-weight: 650;
  text-transform: uppercase;
  color: var(--muted);
  height: 34px;
  margin: 0;
}
.aforo-filter-label select,
.aforo-filter-label input {
  height: 30px;
  margin: 0;
  font-size: 0.78rem;
  text-transform: none;
  font-weight: 500;
}
.aforo-summary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
}
.aforo-chart-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px 14px;
  overflow: hidden;
}
.aforo-chart-head {
  margin: 0 0 6px;
}
.aforo-chart-card h3 {
  margin: 0 0 4px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.aforo-chart-desc {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted);
  font-weight: 450;
}
.aforo-kpi-line {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--text);
}
.aforo-chart-wrap {
  flex: 1 1 auto;
  min-height: 148px;
  position: relative;
  transition: opacity 0.28s ease;
}
.aforo-chart-wrap.is-loading {
  opacity: 0.45;
  pointer-events: none;
}
.aforo-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  min-height: 148px;
  display: block;
}
.aforo-range-cal .nutrition-cal-day.is-in-range:not(.is-on) {
  background: color-mix(in srgb, var(--primary) 18%, var(--sys-surface, var(--surface)));
  color: var(--text);
}
.aforo-range-cal .nutrition-cal-day.is-range-start,
.aforo-range-cal .nutrition-cal-day.is-range-end {
  position: relative;
  z-index: 1;
}
.aforo-range-cal .nutrition-cal-day.is-range-start.is-on,
.aforo-range-cal .nutrition-cal-day.is-range-end.is-on {
  background: var(--primary);
  color: var(--primary-contrast, #fff);
  font-weight: 650;
}
.aforo-range-cal .nutrition-cal-day.is-in-range.is-today:not(.is-on) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent);
}
.aforo-range-cal .nutrition-cal-grid {
  touch-action: none;
  user-select: none;
}
.aforo-range-cal .nutrition-cal-day.is-disabled {
  opacity: 0.32;
  cursor: not-allowed;
  pointer-events: none;
}
.aforo-visits-modal-list {
  max-height: min(60vh, 520px);
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

#centro-panel-clientes .clientes-toolbar {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
#centro-panel-clientes .clientes-toolbar #client-level-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
#centro-panel-clientes .clientes-toolbar #client-level-legend .chip {
  margin: 0;
}
#centro-panel-clientes .client-detail-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 10px;
  align-content: start;
}
#centro-panel-clientes .client-detail-fields > label.hint {
  margin: 6px 0 0;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
#centro-panel-clientes .client-chip-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#centro-panel-clientes .client-ms-chip {
  appearance: none;
  border: 1px solid var(--centro-line, var(--border));
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 10px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 650;
  cursor: pointer;
}
#centro-panel-clientes .client-ms-chip.is-on {
  border-color: color-mix(in srgb, var(--chip-accent, var(--primary)) 55%, transparent);
  background: color-mix(in srgb, var(--chip-accent, var(--primary)) 16%, var(--surface));
  color: var(--text);
}
#centro-panel-clientes .client-autosave-hint {
  min-height: 1.1em;
  margin: 4px 0 0;
}

.retencion-workspace { min-height: 0; overflow: hidden; }
.retencion-toolbar:has(> :not(.toolbar-spacer):not(.visually-hidden)) {
  /* keep if visible actions appear */
}
.retencion-toolbar {
  display: none; /* triggers hidden; KPIs + split fill space */
}
.retencion-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
}
.retencion-alerts-pane,
.retencion-insights-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--centro-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  overflow: hidden;
}
.retencion-alerts-pane .workspace-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 8px 10px;
}
.retencion-insights-pane {
  padding: 8px 12px 12px;
  gap: 6px;
}
.retencion-chart-block {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.retencion-chart-block + .retencion-chart-block {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--hairline);
}
.retencion-insights-pane .workspace-main-head {
  border-bottom: 0;
  padding-bottom: 2px;
}
.retencion-chart-hint {
  margin: 0 12px 6px;
  font-size: 0.72rem;
  line-height: 1.35;
}
.retencion-chart-wrap {
  min-height: 0;
  margin: 0 0 8px;
}
.retencion-chart-empty {
  margin: 8px 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.retencion-chart-insight {
  margin: 8px 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--muted);
}
.retencion-sev-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  padding: 4px 0 2px;
}
.retencion-sev-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  font-size: 0.78rem;
  color: var(--text);
}
.retencion-sev-pill strong {
  font-size: 0.95rem;
  font-weight: 700;
  margin-right: 2px;
}
.retencion-sev-pill.is-red { color: #f87171; }
.retencion-sev-pill.is-amber { color: #fbbf24; }
.retencion-sev-total {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.72rem;
}
.retencion-sev-track {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  border: 1px solid var(--centro-line, var(--border));
}
.retencion-sev-seg.is-red { background: #f87171; }
.retencion-sev-seg.is-amber { background: #fbbf24; }
.retencion-sev-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
  height: 0;
  margin-top: -14px;
}
.retencion-sev-grid i {
  border-right: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  height: 14px;
}
.retencion-sev-grid i:last-child { border-right: 0; }
.retencion-reasons-chart {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 2px 0;
}
.retencion-reason-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(72px, 1.4fr) 28px;
  gap: 8px;
  align-items: center;
}
.retencion-reason-label {
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.retencion-reason-bar-wrap {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--centro-line, var(--border)) 70%, transparent);
  overflow: hidden;
}
.retencion-reason-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary) 75%, #f87171),
    color-mix(in srgb, var(--primary) 55%, #fb923c)
  );
}
.retencion-reason-row[data-rank="1"] .retencion-reason-bar { background: #f87171; }
.retencion-reason-row[data-rank="2"] .retencion-reason-bar { background: #fb923c; }
.retencion-reason-row[data-rank="3"] .retencion-reason-bar { background: #fbbf24; }
.retencion-reason-row[data-rank="4"] .retencion-reason-bar { background: #60a5fa; }
.retencion-reason-row[data-rank="5"] .retencion-reason-bar { background: #a78bfa; }
.retencion-reason-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.retencion-insights-empty { margin: 8px 0 0; }

@media (max-width: 980px) {
  .agenda-ops {
    grid-template-columns: 1fr;
    grid-template-areas:
      "kpis"
      "empty"
      "citas"
      "clases"
      "config";
  }
  .agenda-sesiones-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .agenda-filter-cluster { flex-wrap: wrap; }
  .aforo-summary-row,
  .retencion-split { grid-template-columns: 1fr; }
}

#centro-panel-agenda.centro-panel.active,
#centro-panel-aforo.centro-panel.active,
#centro-panel-retencion.centro-panel.active {
  overflow: hidden;
}
#centro-panel-agenda .agenda-workspace,
#centro-panel-aforo .aforo-workspace,
#centro-panel-retencion .retencion-workspace {
  flex: 1 1 auto;
  min-height: 0;
}

/* Cita cards: menos hueco horizontal muerto */
#agenda-list > li.cita-row {
  gap: 8px 10px;
}
#agenda-list .cita-body {
  min-width: 0;
  flex: 1 1 auto;
}
#agenda-list .cita-end {
  flex: 0 0 auto;
  gap: 6px;
}

/* JV-003 — Usuarios hub + assignFlow bar */
.usuarios-shell {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: auto;
  height: auto;
  overflow: visible;
}
.usuarios-body {
  flex: 1 0 auto;
  min-height: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.usuarios-panel {
  display: none;
  flex: 0 0 auto;
  min-height: auto;
}
.usuarios-panel.active {
  display: block;
}
#tab-usuarios.tab-panel.active {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
}
#usuarios-panel-mensajes.usuarios-panel {
  flex: 1 1 auto;
  min-height: 0;
}
.flow-context-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--primary) 12%, var(--sys-surface));
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--hairline));
}
.content > .flow-context-bar:not(.hidden) {
  position: sticky;
  top: 0;
  z-index: 20;
}
.flow-context-back {
  margin-left: auto;
  font-weight: 600;
  white-space: nowrap;
}
.planner-tabs.is-single-mode .planner-tab:not([hidden]) {
  flex: 0 0 auto;
  pointer-events: none;
  cursor: default;
}
.planner-tabs.is-single-mode {
  gap: 0;
}

/* Hub asignación desde Usuarios */
.planner-assign-hub-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(42vh, 360px);
  overflow-y: auto;
  margin-top: 10px;
}
.planner-assign-hub-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface) 92%, transparent);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.planner-assign-hub-row:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--hairline));
}
.planner-assign-hub-row.is-selected {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 10%, var(--sys-surface));
}
.planner-assign-hub-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.planner-assign-hub-row-main strong {
  font-size: 0.9rem;
}
.assign-hub-section-title {
  margin: 14px 0 4px;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.plan-wizard-sessions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.plan-wizard-session-list {
  max-height: 200px;
  overflow-y: auto;
  margin: 8px 0;
}
.plan-wizard-session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.planner-assign-hub-foot {
  justify-content: space-between;
}

/* Supermodal asignación Usuarios */
.assign-super-dialog {
  width: min(960px, 98vw);
  max-height: min(94vh, 960px);
}
.assign-super-dialog.is-sessions-step {
  width: min(1320px, 99.5vw);
  max-height: min(97vh, 1080px);
}
.assign-super-dialog.is-confirm-step {
  width: min(880px, 96vw);
  max-height: min(96vh, 920px);
}
.assign-super-body {
  max-height: min(62vh, 640px);
  overflow-y: auto;
  padding-bottom: 8px;
}
.assign-super-dialog.is-sessions-step .assign-super-body {
  max-height: min(78vh, 820px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.assign-super-dialog.is-sessions-step .assign-super-panel[data-as-panel="3"] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.assign-super-dialog.is-confirm-step .assign-super-body {
  max-height: none;
  overflow: visible;
}
.assign-super-libpane {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 14px;
  min-height: 360px;
}
.assign-super-dialog.is-sessions-step .assign-super-libpane {
  flex: 1;
  min-height: min(68vh, 700px);
  height: min(68vh, 700px);
}
@media (max-width: 720px) {
  .assign-super-libpane {
    grid-template-columns: 1fr;
  }
  .assign-super-dialog.is-sessions-step .assign-super-libpane {
    height: auto;
    min-height: 0;
    overflow-y: auto;
  }
}
.assign-super-lib-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}
.assign-super-lib-hint {
  margin: 0;
  font-size: 0.75rem;
}
.assign-super-lib-list {
  flex: 1;
  min-height: 200px;
  max-height: min(48vh, 420px);
  overflow-y: auto;
}
.assign-super-dialog.is-sessions-step .assign-super-lib-list {
  max-height: none;
}
.assign-super-lib-card-wrap {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
  margin-bottom: 8px;
}
.assign-super-lib-card-wrap.is-on-plan .libpane-card {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--hairline));
}
.assign-super-lib-check {
  display: grid;
  place-items: center;
  padding-top: 14px;
}
.assign-super-lib-main {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-surface) 92%, transparent);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.assign-super-dialog.is-sessions-step .assign-super-lib-main {
  min-height: 0;
  height: 100%;
}
.assign-super-lib-editor {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.assign-super-lib-head {
  flex-wrap: wrap;
  gap: 8px;
}
.assign-super-lib-head .libpane-name-input {
  flex: 1 1 160px;
  min-width: 0;
  display: block !important;
}
#assign-super-lib-items {
  flex: 1;
  overflow-y: auto;
  max-height: min(42vh, 380px);
  padding: 8px 12px 14px;
}
.assign-super-dialog.is-sessions-step #assign-super-lib-items {
  max-height: none;
}
.assign-super-tpl-dialog {
  width: min(640px, 96vw);
  max-height: min(88vh, 720px);
  z-index: 1200;
}
.assign-super-tpl-cards {
  max-height: min(52vh, 440px);
  overflow-y: auto;
}
.assign-super-tpl-picked {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--hairline));
  background: color-mix(in srgb, var(--primary) 8%, var(--sys-surface));
  color: var(--text);
}
.assign-super-tpl-picked button {
  color: var(--primary);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.assign-super-summary-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.assign-super-sum-hero {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--hairline));
  background: color-mix(in srgb, var(--primary) 10%, var(--sys-surface));
}
.assign-super-sum-kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
}
.assign-super-sum-hero h5 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}
.assign-super-sum-pill {
  display: inline-flex;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
}
.assign-super-sum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}
.assign-super-sum-session {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface) 90%, transparent);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.assign-super-sum-session strong {
  font-size: 0.88rem;
}
#assign-super-dialog .modal-footer .btn-primary:disabled,
#assign-super-dialog .modal-footer .btn-primary.is-disabled,
#assign-super-tpl-dialog .modal-footer .btn-primary:disabled,
#assign-super-tpl-dialog .modal-footer .btn-primary.is-disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.25);
  pointer-events: none;
}
#assign-super-dialog .modal-footer .hidden,
#assign-super-dialog .modal-footer [hidden] {
  display: none !important;
}
.assign-super-cal {
  margin-top: 10px;
}
.assign-super-head {
  align-items: flex-start;
}
.assign-super-client {
  margin: 4px 0 0;
  font-weight: 600;
  color: var(--primary);
}
.assign-super-progress {
  padding: 0 18px 10px;
  border-bottom: 1px solid var(--hairline);
}
.assign-super-progress .assign-progress-track {
  height: 4px;
  border-radius: 999px;
  background: var(--sys-surface-2);
  margin-bottom: 8px;
  overflow: hidden;
}
.assign-super-progress .assign-progress-fill {
  height: 100%;
  width: 20%;
  background: var(--primary);
  transition: width 0.2s ease;
}
.assign-progress-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.assign-progress-steps .assign-progress-step {
  flex: 1;
  min-width: 0;
  font-size: 0.68rem;
  padding: 6px 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: default;
  pointer-events: none;
  opacity: 0.48;
}
.assign-progress-steps .assign-progress-step.is-on {
  color: var(--primary);
  font-weight: 700;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  opacity: 1;
  pointer-events: none;
  cursor: default;
}
.assign-progress-steps .assign-progress-step.is-done,
.assign-progress-steps .assign-progress-step.is-nav {
  color: var(--text);
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}
.assign-progress-steps .assign-progress-step.is-nav:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}
.assign-progress-steps .assign-progress-step:disabled:not(.is-on) {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.assign-super-origen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
@media (max-width: 640px) {
  .assign-super-origen-grid {
    grid-template-columns: 1fr;
  }
}
.assign-super-origen-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface) 90%, transparent);
  cursor: pointer;
}
.assign-super-origen-card.is-selected {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 12%, var(--sys-surface));
}
.assign-super-session-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
  align-items: center;
}
.assign-super-session-toolbar input[type="search"] {
  flex: 1 1 160px;
  min-width: 0;
}
.assign-super-session-list {
  max-height: 280px;
  overflow-y: auto;
}
.assign-super-session-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.assign-super-session-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.assign-super-when-root {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.assign-when-head-static {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.assign-super-summary {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.assign-session-nest-items {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}
.assign-session-nest-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
}
.assign-session-nest-ex-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.assign-session-nest-picker {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}
.assign-session-nest-ex-results {
  max-height: 180px;
  overflow-y: auto;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.flow-context-bar.hidden {
  display: none;
}
.flow-context-lead {
  font-weight: 600;
  font-size: 0.92rem;
}
.planner-flow-chip {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 600;
}
.planner-picker.is-flow-locked .planner-picker-trigger.is-flow-locked {
  opacity: 0.72;
  cursor: default;
  pointer-events: none;
}
#wellness-client-search.is-flow-locked {
  opacity: 0.72;
  cursor: default;
  pointer-events: none;
}
.usuarios-ficha-tabs {
  margin-bottom: 12px;
}
.usuarios-ficha-pane {
  display: none;
}
.usuarios-ficha-pane.active {
  display: block;
}
.usuarios-placeholder {
  padding: 24px 16px;
}
#usuarios-panel-clientes .usuarios-clientes-workspace,
#usuarios-panel-equipo .usuarios-equipo-workspace,
#usuarios-panel-encuestas .survey-workspace,
#usuarios-panel-etiquetas .tags-workspace,
#usuarios-panel-grupos .usuarios-grupos-workspace {
  display: flex;
  flex-direction: column;
}
#usuarios-panel-clientes .workspace {
  min-height: 0;
}
#usuarios-panel-clientes.usuarios-panel.active,
#usuarios-panel-equipo.usuarios-panel.active,
#usuarios-panel-encuestas.usuarios-panel.active,
#usuarios-panel-etiquetas.usuarios-panel.active,
#usuarios-panel-grupos.usuarios-panel.active {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: visible;
}
#usuarios-panel-mensajes.usuarios-panel.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Mensajes: ocultar Mis clientes / Mi equipo / Comunidad / Etiquetas */
#tab-usuarios.is-mensajes-panel .usuarios-subnav,
#tab-usuarios.is-mensajes-panel .usuarios-chrome .centro-subnav {
  display: none !important;
}
#usuarios-panel-clientes .usuarios-clientes-workspace,
#usuarios-panel-equipo .usuarios-equipo-workspace,
#usuarios-panel-encuestas .survey-workspace,
#usuarios-panel-etiquetas .tags-workspace,
#usuarios-panel-grupos .usuarios-grupos-workspace {
  flex: 0 0 auto;
  min-height: auto;
}
#usuarios-panel-mensajes .chat-shell {
  flex: 1 1 auto;
  min-height: 0;
}
.usuarios-ficha-files-mount {
  min-height: 280px;
}
.usuarios-ficha-files-workspace {
  gap: 8px;
}
.ficha-files-toolbar {
  flex-wrap: wrap;
  gap: 8px;
}

/* JV-003 F3 — Resumen 360° (Usuarios › ficha › Resumen) */
.resumen360 {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline, var(--border));
}
.resumen360-heading {
  margin: 12px 0 10px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.resumen360-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}
.resumen360-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, transparent);
  min-width: 0;
}
.resumen360-kpi-label {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.resumen360-kpi strong {
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resumen360-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.resumen360-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--hairline, var(--border));
  background: var(--sys-surface, var(--surface));
  min-height: 140px;
}
.resumen360-card.is-loading {
  justify-content: center;
  min-height: 120px;
}
.resumen360-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.resumen360-card-head h6 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
}
.resumen360-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--hairline, var(--border));
  background: var(--sys-surface-2, rgba(0, 0, 0, 0.04));
  color: var(--muted);
}
.resumen360-badge.is-active {
  color: var(--ok, #16a34a);
  border-color: color-mix(in srgb, var(--ok, #16a34a) 35%, transparent);
  background: color-mix(in srgb, var(--ok, #16a34a) 12%, transparent);
}
.resumen360-badge.is-expired {
  color: var(--warn, #d97706);
  border-color: color-mix(in srgb, var(--warn, #d97706) 35%, transparent);
  background: color-mix(in srgb, var(--warn, #d97706) 12%, transparent);
}
.resumen360-badge.is-none {
  color: var(--muted);
}
.resumen360-badge.is-error {
  color: var(--err, #dc2626);
  border-color: color-mix(in srgb, var(--err, #dc2626) 35%, transparent);
  background: color-mix(in srgb, var(--err, #dc2626) 10%, transparent);
}
.resumen360-plan-name {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resumen360-meta {
  display: grid;
  gap: 6px;
  margin: 0;
  flex: 1;
}
.resumen360-meta div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
}
.resumen360-meta dt {
  margin: 0;
  color: var(--muted);
  font-weight: 500;
}
.resumen360-meta dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.resumen360-error {
  margin: 0;
  font-size: 0.78rem;
  color: var(--err, #dc2626);
}
.resumen360-cta {
  align-self: flex-start;
  margin-top: auto;
}
@media (max-width: 900px) {
  .resumen360-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .resumen360-grid {
    grid-template-columns: 1fr;
  }
}

/* JV-003 — Usuarios › Clientes table + ficha drawer */
#usuarios-panel-clientes.usuarios-panel.active {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: visible;
}
.usuarios-clientes-workspace {
  flex: 0 0 auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.usuarios-equipo-workspace,
.usuarios-grupos-workspace {
  flex: 0 0 auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.usuarios-clientes-toolbar,
.usuarios-panel .usuarios-toolbar.clientes-toolbar,
.usuarios-panel .usuarios-toolbar.usuarios-toolbar-compact {
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: visible;
  scrollbar-width: thin;
}
.usuarios-panel .usuarios-toolbar.usuarios-toolbar-slim {
  flex-wrap: nowrap;
  overflow: visible;
}
.usuarios-toolbar-slim .usuarios-client-search-narrow {
  flex: 0 0 200px;
  width: 200px;
  max-width: 200px;
  min-width: 200px;
}
.usuarios-clear-filters-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
.workspace-toolbar.usuarios-toolbar-compact label.usuarios-client-search,
.usuarios-toolbar-compact label.usuarios-client-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 0 0 240px;
  width: 240px;
  max-width: 240px;
  min-width: 240px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background: var(--sys-surface);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}
.workspace-toolbar.usuarios-toolbar-compact label.usuarios-filter-inline,
.usuarios-toolbar-compact label.usuarios-filter-inline {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.usuarios-toolbar-compact label.usuarios-filter-inline select {
  min-width: 7.5rem;
  max-width: 10rem;
  font-size: 0.8rem;
  padding: 6px 8px;
}
.usuarios-toolbar-divider {
  flex: 0 0 1px;
  align-self: center;
  width: 1px;
  height: 24px;
  background: var(--hairline);
}
.usuarios-filter-icon {
  flex-shrink: 0;
  color: var(--err, #dc2626);
  border: 1px solid color-mix(in srgb, var(--err, #dc2626) 35%, transparent);
  background: color-mix(in srgb, var(--err, #dc2626) 8%, transparent);
}
.usuarios-filter-icon:hover:not(:disabled) {
  color: var(--err, #dc2626);
  background: color-mix(in srgb, var(--err, #dc2626) 16%, transparent);
  border-color: color-mix(in srgb, var(--err, #dc2626) 50%, transparent);
}
.usuarios-panel .usuarios-toolbar.clientes-toolbar {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.usuarios-panel .usuarios-toolbar .btn-primary {
  margin-top: 0;
  padding: 9px 16px;
  font-size: 0.85rem;
  border-radius: 9px;
  white-space: nowrap;
}
.usuarios-panel .usuarios-toolbar .icon-btn.ghost,
.usuarios-panel .usuarios-toolbar .ghost.icon-btn {
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--muted);
}
.usuarios-panel .usuarios-toolbar .icon-btn.ghost:hover,
.usuarios-panel .usuarios-toolbar .ghost.icon-btn:hover {
  color: var(--text);
  background: var(--sys-surface-2);
}
.usuarios-panel .usuarios-toolbar .chip.filter-chip[aria-pressed="true"],
.usuarios-panel .usuarios-toolbar .chip.filter-chip.active {
  background: var(--primary-soft);
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent);
}
.usuarios-client-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 0 0 240px;
  width: 240px;
  max-width: 240px;
  min-width: 0;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background: var(--sys-surface);
}
.usuarios-client-search .nav-ico {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
}
.usuarios-client-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 8px 0;
  font: inherit;
  font-size: 0.84rem;
  color: var(--text);
}
.usuarios-client-search input:focus {
  outline: none;
}
.usuarios-filters-btn {
  white-space: nowrap;
}
.usuarios-clientes-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 0 2px;
}
.usuarios-clientes-filter-row .centro-filter-compact select {
  min-width: 9rem;
}
.usuarios-filter-row-label {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}
.usuarios-level-legend {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.usuarios-level-legend .chip {
  margin: 0;
  padding: 5px 10px;
  font-size: 0.74rem;
  border-radius: 999px;
  cursor: pointer;
}
.usuarios-level-legend .chip.is-on {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent);
}
/* List tables: body scrolls when many rows; sticky thead stays. */
.usuarios-roster-wrap {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: min(68vh, 720px);
  overflow-x: hidden;
  overflow-y: auto;
}
.usuarios-roster-wrap.mc-roster-wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
.mc-table-xscroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  max-height: none;
}
.usuarios-roster-wrap .usuarios-roster-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--sys-surface-2);
  box-shadow: 0 1px 0 var(--hairline);
  text-align: center;
  vertical-align: middle;
}
.usuarios-roster-table tbody tr.usuarios-client-row {
  cursor: default;
}
.usuarios-roster-table tbody tr.usuarios-client-row.is-selected {
  background: color-mix(in srgb, var(--primary) 12%, var(--sys-surface));
}
.usuarios-roster-table tbody tr.usuarios-client-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.usuarios-client-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.usuarios-client-name .avatar.sm {
  width: 28px;
  height: 28px;
  font-size: 0.68rem;
}
.usuarios-client-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.usuarios-client-tags .chip.sm {
  padding: 2px 7px;
  font-size: 0.68rem;
}
.client-plan-status-icons {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  flex-wrap: nowrap;
}
.plan-status-dot,
.client-plan-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  color: var(--muted);
  background: color-mix(in srgb, var(--sys-surface-2) 88%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}
.plan-status-dot .nav-ico,
.client-plan-icon .nav-ico {
  width: 13px;
  height: 13px;
}
.plan-status-dot.is-active,
.client-plan-icon.is-active {
  color: var(--ok, #16a34a);
  border-color: color-mix(in srgb, var(--ok, #16a34a) 45%, transparent);
  background: color-mix(in srgb, var(--ok, #16a34a) 16%, transparent);
}
.plan-status-dot.is-expired,
.client-plan-icon.is-expired {
  color: var(--warn, #d97706);
  border-color: color-mix(in srgb, var(--warn, #d97706) 45%, transparent);
  background: color-mix(in srgb, var(--warn, #d97706) 16%, transparent);
}
.plan-status-dot.is-none,
.plan-status-dot.is-loading,
.client-plan-icon.is-none,
.client-plan-icon.is-loading {
  color: color-mix(in srgb, var(--muted) 85%, var(--text));
  border-color: var(--hairline);
  background: color-mix(in srgb, var(--sys-surface-2) 70%, transparent);
}
.plan-status-dot.is-error,
.client-plan-icon.is-error {
  color: var(--err, #dc2626);
  border-color: color-mix(in srgb, var(--err, #dc2626) 40%, transparent);
  background: color-mix(in srgb, var(--err, #dc2626) 12%, transparent);
}
.client-plan-icon.is-locked {
  color: color-mix(in srgb, var(--muted) 70%, #64748b);
  border-color: color-mix(in srgb, #64748b 35%, transparent);
  background: color-mix(in srgb, #94a3b8 14%, transparent);
  opacity: 0.85;
}
.membership-badge {
  display: inline-flex;
  align-items: center;
  max-width: 11rem;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface-2) 80%, transparent);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.membership-badge.is-empty {
  font-weight: 500;
  opacity: 0.8;
  border-style: dashed;
}
.membership-badge.is-compact {
  max-width: 9.5rem;
}
.grupo-planes-activos {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted);
}
.grupo-planes-activos.is-loading {
  opacity: 0.7;
}
.grupo-plan-ratio {
  white-space: nowrap;
}
.grupo-plan-ratio.is-locked {
  opacity: 0.75;
}
.grupo-plan-lock {
  width: 11px;
  height: 11px;
  vertical-align: -1px;
}
.grupo-plan-sep {
  opacity: 0.55;
}
.grupo-member-main {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
  flex: 1;
}
.grupo-member-warn {
  color: var(--warn, #d97706);
  font-weight: 600;
  text-transform: lowercase;
}
.grupo-add-warn:not(.hidden) {
  margin: 6px 0 0;
  color: var(--warn, #d97706);
}
.grupo-assign-preview-list {
  margin: 0.35rem 0 0.6rem;
  padding-left: 1.1rem;
}
.grupo-assign-preview-list li {
  margin: 0.15rem 0;
}
.resumen360-card.is-membership-locked {
  opacity: 0.92;
}
.resumen360-badge.is-locked {
  color: color-mix(in srgb, var(--muted) 75%, #64748b);
  background: color-mix(in srgb, #94a3b8 16%, transparent);
  border: 1px solid color-mix(in srgb, #64748b 30%, transparent);
}
.resumen360-cta-locked[disabled] {
  cursor: not-allowed;
  opacity: 0.65;
}
.client-plan-status-icons {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.client-plan-icon {
  border-radius: 999px;
  width: 24px;
  height: 24px;
}
.usuarios-roster-actions-col {
  width: 72px;
  max-width: 72px;
  white-space: nowrap;
  text-align: right;
}
.usuarios-ficha-drawer-root:not(.hidden) {
  display: block;
}
.usuarios-ficha-drawer-root.hidden {
  display: none;
}
.usuarios-ficha-drawer {
  width: min(480px, 96vw);
}
.usuarios-ficha-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 130;
}
.usuarios-ficha-drawer-root:not(.hidden) .drawer-backdrop {
  position: fixed;
  inset: 0;
}
.usuarios-ficha-drawer-root:not(.hidden) .usuarios-ficha-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.usuarios-ficha-drawer-head-copy {
  flex: 1;
  min-width: 0;
}
.usuarios-ficha-drawer-head-copy .hint {
  margin: 2px 0 0;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.usuarios-ficha-drawer .drawer-head,
.usuarios-staff-drawer .drawer-head,
.usuarios-grupo-drawer .drawer-head {
  flex-shrink: 0;
  align-items: flex-start;
}
.usuarios-ficha-drawer .drawer-head > .ghost,
.usuarios-staff-drawer .drawer-head > .ghost,
.usuarios-grupo-drawer .drawer-head > .ghost {
  flex-shrink: 0;
  margin-top: 2px;
}
.usuarios-ficha-drawer .drawer-head h3,
.usuarios-staff-drawer .drawer-head h3,
.usuarios-grupo-drawer .drawer-head h3 {
  flex: unset;
  font-size: 1.12rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
}
.usuarios-ficha-drawer-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.usuarios-ficha-drawer-title-row .staff-status-pill {
  flex-shrink: 0;
  font-size: 0.68rem;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.usuarios-ficha-drawer .drawer-body,
.usuarios-staff-drawer .drawer-body,
.usuarios-grupo-drawer .drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 22px;
  overscroll-behavior: contain;
}
.usuarios-staff-drawer .staff-detail-fields--drawer,
.usuarios-grupo-drawer .staff-detail-fields--drawer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 10px;
  align-content: start;
}
.usuarios-staff-drawer .staff-detail-fields--drawer > label.hint,
.usuarios-grupo-drawer .staff-detail-fields--drawer > label.hint {
  margin: 6px 0 0;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.usuarios-staff-drawer .staff-role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.usuarios-staff-drawer .staff-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.usuarios-grupo-drawer .grupo-members-list > li.grupo-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface) 60%, transparent);
}
.usuarios-grupo-drawer .grupo-member-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.usuarios-grupo-drawer .grupo-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.usuarios-grupo-drawer .grupo-add-row select {
  flex: 1 1 auto;
  min-width: 0;
}
.usuarios-grupo-drawer .grupo-assign-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface) 55%, transparent);
}

/* Ficha drawer — tabs pill (Asignación / Perfil / Archivos) */
.usuarios-ficha-tabs-v2 {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-surface-2) 72%, transparent);
  border: 1px solid var(--hairline);
}
.usuarios-ficha-tab {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.usuarios-ficha-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.usuarios-ficha-tab.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 38%, transparent);
}
.usuarios-ficha-pane.active {
  animation: fichaPaneIn 0.18s var(--ease-out, ease-out);
}
@keyframes fichaPaneIn {
  from { opacity: 0.5; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Asignación 360° dentro del drawer */
.usuarios-ficha-drawer .ficha-asignacion360.resumen360 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.usuarios-ficha-drawer .ficha-asignacion360 .resumen360-kpi-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.ficha-asignacion-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.ficha-tag-pill {
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 999px;
}
.usuarios-ficha-drawer .ficha-asignacion360 .resumen360-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}
.resumen360-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.resumen360-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  flex-shrink: 0;
}
.resumen360-card-icon .nav-ico {
  width: 16px;
  height: 16px;
}
.resumen360-card-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 6px;
}
.resumen360-cta-primary {
  min-width: 7.5rem;
}

/* Perfil — secciones editables */
.ficha-perfil {
  display: flex;
  flex-direction: column;
}
.ficha-perfil-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.ficha-perfil-section:first-child {
  padding-top: 2px;
}
.ficha-perfil-section-status {
  border-bottom: 0;
  padding-bottom: 4px;
}
.ficha-perfil-section-title {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.ficha-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.ficha-field:last-child {
  margin-bottom: 0;
}
.ficha-field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
.ficha-field-hint {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0;
}
.ficha-field input.is-readonly,
.ficha-field input[readonly] {
  opacity: 0.72;
  cursor: default;
}
.ficha-chip-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ficha-chip-multi .client-ms-chip,
.ficha-perfil .client-ms-chip {
  appearance: none;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface-2) 80%, transparent);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.ficha-chip-multi .client-ms-chip.is-on,
.ficha-perfil .client-ms-chip.is-on {
  border-color: color-mix(in srgb, var(--chip-accent, var(--primary)) 55%, transparent);
  background: color-mix(in srgb, var(--chip-accent, var(--primary)) 18%, var(--sys-surface));
  color: var(--text);
}
.ficha-chip-multi .client-ms-chip:hover,
.ficha-perfil .client-ms-chip:hover {
  border-color: color-mix(in srgb, var(--chip-accent, var(--primary)) 35%, var(--hairline));
}
.ficha-estado-cuenta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.ficha-estado-pill {
  font-size: 0.88rem;
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 650;
}
.ficha-inactivar-link {
  color: var(--err, #dc2626) !important;
  font-size: 0.82rem;
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: underline;
  cursor: pointer;
}
.ficha-inactivar-link:hover {
  opacity: 0.85;
}
.ficha-perfil-foot {
  margin: 14px 0 0;
  padding-top: 12px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  border-top: 1px solid var(--hairline);
}
.ficha-autosave-hint {
  min-height: 1.2em;
  margin: 6px 0 0;
  font-size: 0.75rem;
}

/* Archivos — layout vertical (drawer estrecho) */
.ficha-files-v2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ficha-files-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ficha-files-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ficha-files-field select {
  width: 100%;
}
.ficha-files-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ficha-files-upload-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.ficha-files-upload-btn .nav-ico {
  width: 16px;
  height: 16px;
}
.ficha-files-folders-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ficha-files-folder-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ficha-files-folder-chips .ficha-folder-chip {
  flex-shrink: 0;
}
.ficha-files-list-head h4 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 650;
}
.ficha-files-object-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ficha-file-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface) 90%, transparent);
}
.ficha-file-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}
.ficha-file-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ficha-file-name {
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ficha-file-meta {
  font-size: 0.72rem;
}
.ficha-file-attach {
  display: block;
  font-size: 0.72rem;
  margin-top: 2px;
}
.ficha-file-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.ficha-file-actions .ghost.sm {
  font-size: 0.72rem;
  padding: 4px 8px;
  white-space: nowrap;
}
.ficha-files-empty {
  padding: 24px 16px;
  text-align: center;
  border: 1px dashed var(--hairline);
  border-radius: 12px;
  list-style: none;
}
.ficha-files-empty-nutri {
  margin: 8px 0 12px;
  max-width: 28rem;
  margin-inline: auto;
  line-height: 1.35;
}
/* CS-0903 — PDF plan nutricional en ficha Archivos */
.ficha-files-nutri-pdf[hidden] {
  display: none !important;
}
.ficha-nutri-pdf-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--hairline));
  background: color-mix(in srgb, var(--primary) 8%, var(--sys-surface));
}
.ficha-nutri-pdf-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}
.ficha-nutri-pdf-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ficha-nutri-pdf-title {
  font-size: 0.84rem;
}
.ficha-nutri-pdf-meta {
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 420px) {
  .ficha-nutri-pdf-card {
    grid-template-columns: 36px minmax(0, 1fr);
  }
  .ficha-nutri-pdf-card .btn-primary {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

body.usuarios-ficha-drawer-open {
  overflow: hidden;
}
@media (max-width: 720px) {
  .usuarios-roster-table .usuarios-client-email,
  .usuarios-roster-table thead th:nth-child(2):not(.usuarios-roster-actions-col):not(.mc-kebab-col) {
    display: none;
  }
  /* Keep Acciones reachable — was display:none (unreachable on phone). */
  .usuarios-roster-actions-col,
  .usuarios-roster-table thead th.usuarios-roster-actions-col,
  .usuarios-roster-table td.usuarios-roster-actions-col {
    display: table-cell !important;
  }
}

/* JV-003 — Usuarios › Mensajes (master-detail INBOX wireframe) */
.usuarios-subnav-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--err, #dc2626);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--err, #dc2626) 45%, transparent);
}
.usuarios-subnav-badge.hidden {
  display: none;
}
#usuarios-panel-mensajes .chat-shell-inbox {
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 0;
}
#usuarios-panel-mensajes .chat-inbox {
  width: 320px;
  max-width: 320px;
  border-radius: 0;
  border-right: 1px solid var(--hairline);
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  background: var(--sys-surface, var(--surface));
}
#usuarios-panel-mensajes .chat-thread {
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--sys-surface) 92%, transparent);
}
#usuarios-panel-mensajes .chat-inbox-head {
  padding: 12px 14px 6px;
  flex-wrap: wrap;
  gap: 10px;
}
#usuarios-panel-mensajes .chat-inbox-search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 10px 8px;
  min-width: 0;
}
#usuarios-panel-mensajes .chat-inbox-search-row .chat-inbox-search {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
#usuarios-panel-mensajes .chat-new-icon-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--hairline));
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
#usuarios-panel-mensajes .chat-new-icon-btn:hover {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
}
#usuarios-panel-mensajes .chat-inbox-head h3 {
  font-size: 0.95rem;
  font-weight: 700;
}
#usuarios-panel-mensajes .chat-inbox-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
#usuarios-panel-mensajes .chat-inbox-head-actions .btn-primary {
  white-space: nowrap;
  font-size: 0.85rem;
  padding: 9px 16px;
  border-radius: 9px;
}
#usuarios-panel-mensajes .chat-new-cta {
  white-space: nowrap;
  font-size: 0.85rem;
  padding: 9px 16px;
  border-radius: 9px;
}
#usuarios-panel-mensajes .chat-inbox-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface-2) 60%, transparent);
}
#usuarios-panel-mensajes .chat-inbox-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 8px 0;
  margin: 0;
}
#usuarios-panel-mensajes .chat-inbox-filters {
  padding: 0 10px 8px;
  gap: 6px;
}
#usuarios-panel-mensajes .chat-conv-list {
  padding: 4px 8px 10px;
}
#usuarios-panel-mensajes .chat-conv-btn {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  padding: 10px 12px;
  border-radius: 0;
  border: 0;
  border-left: 3px solid transparent;
}
#usuarios-panel-mensajes .chat-conv-btn .chat-avatar {
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  font-size: 0.74rem;
}
#usuarios-panel-mensajes .chat-conv-btn .chat-conv-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#usuarios-panel-mensajes .chat-conv-btn .chat-conv-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#usuarios-panel-mensajes .chat-conv-name {
  font-weight: 650;
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
#usuarios-panel-mensajes .chat-conv-grupo-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
#usuarios-panel-mensajes .chat-conv-grupo-title {
  font-weight: 650;
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#usuarios-panel-mensajes .chat-role-badge {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface-2) 70%, transparent);
  color: var(--muted);
}
#usuarios-panel-mensajes .chat-role-badge.is-staff {
  color: color-mix(in srgb, var(--primary) 85%, var(--text));
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 50%, transparent);
}
#usuarios-panel-mensajes .chat-role-badge.is-mixed {
  color: var(--text);
}
#usuarios-panel-mensajes .chat-conv-preview {
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#usuarios-panel-mensajes .chat-conv-time {
  grid-column: 3;
  grid-row: 1;
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
}
#usuarios-panel-mensajes .chat-unread-badge {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  min-width: 20px;
  height: 20px;
  font-size: 0.68rem;
}
#usuarios-panel-mensajes .chat-conv-btn:hover {
  background: color-mix(in srgb, var(--sys-surface-2) 55%, transparent);
}
#usuarios-panel-mensajes .chat-conv-btn[aria-current="true"] {
  border-left-color: var(--primary);
  background: color-mix(in srgb, var(--sys-surface-2) 75%, var(--primary-soft));
}
#usuarios-panel-mensajes .chat-thread-empty {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 32px 24px;
  color: var(--muted);
  text-align: center;
}
#usuarios-panel-mensajes .chat-thread-empty p {
  margin: 0;
  font-size: 0.92rem;
}
#usuarios-panel-mensajes .chat-thread-active {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#usuarios-panel-mensajes .chat-thread-active.hidden {
  display: none;
}
#usuarios-panel-mensajes .chat-thread-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#usuarios-panel-mensajes .chat-view-ficha {
  font-size: 0.78rem;
  font-weight: 600;
}
#usuarios-panel-mensajes .chat-msg-list {
  padding: 16px 18px;
  gap: 12px;
}
#usuarios-panel-mensajes .chat-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
}
#usuarios-panel-mensajes .chat-msg-row.is-mine {
  justify-content: flex-end;
}
#usuarios-panel-mensajes .chat-msg-row .chat-avatar {
  width: 32px;
  height: 32px;
  font-size: 0.65rem;
  flex-shrink: 0;
}
#usuarios-panel-mensajes .chat-bubble {
  max-width: min(72%, 480px);
  padding: 10px 14px;
  border-radius: 16px;
  border: 0;
}
#usuarios-panel-mensajes .chat-bubble:not(.is-mine) {
  background: color-mix(in srgb, var(--sys-surface-2) 92%, var(--sys-surface));
  color: var(--text);
  border: 1px solid var(--hairline);
}
#usuarios-panel-mensajes .chat-bubble.is-mine {
  margin-left: 0;
  background: color-mix(in srgb, var(--primary) 16%, var(--sys-surface));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--hairline));
}
#usuarios-panel-mensajes .chat-bubble-meta {
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--muted);
}
#usuarios-panel-mensajes .chat-bubble-meta .chat-read-receipt {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--primary) 70%, var(--muted));
  letter-spacing: -0.08em;
}
#usuarios-panel-mensajes .chat-composer {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-rows: 42px;
  padding: 10px 14px;
  gap: 8px;
  align-items: center;
  background: color-mix(in srgb, var(--sys-surface) 96%, transparent);
}
#usuarios-panel-mensajes .chat-composer > * {
  align-self: center;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
#usuarios-panel-mensajes .chat-composer textarea {
  min-height: 42px;
  height: 42px;
  max-height: 96px;
  border-radius: 12px;
  padding: 10px 12px;
  grid-column: 3;
  grid-row: 1;
  box-sizing: border-box;
  line-height: 1.25;
}
#usuarios-panel-mensajes .chat-composer .chat-attach-wrap {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  height: 42px;
}
#usuarios-panel-mensajes .chat-composer .chat-camera-btn {
  grid-column: 2;
  grid-row: 1;
}
#usuarios-panel-mensajes .chat-composer .chat-attach-btn,
#usuarios-panel-mensajes .chat-composer .chat-camera-btn,
#usuarios-panel-mensajes .chat-composer .chat-mic-btn,
#usuarios-panel-mensajes .chat-composer .chat-send-btn {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding: 0;
  margin: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
  flex: 0 0 42px;
}
#usuarios-panel-mensajes .chat-composer .chat-mic-btn,
#usuarios-panel-mensajes .chat-composer .chat-send-btn {
  grid-column: 4;
  grid-row: 1;
}
#usuarios-panel-mensajes .chat-composer.has-text .chat-mic-btn {
  display: none !important;
}
#usuarios-panel-mensajes .chat-composer:not(.has-text) .chat-send-btn {
  display: none !important;
}
#usuarios-panel-mensajes .chat-composer .chat-send-btn {
  transform: none;
  position: relative;
  top: 0;
}
#usuarios-panel-mensajes .chat-composer .chat-send-btn .nav-ico,
#usuarios-panel-mensajes .chat-composer .chat-mic-btn .nav-ico,
#usuarios-panel-mensajes .chat-composer .chat-camera-btn .nav-ico,
#usuarios-panel-mensajes .chat-composer .chat-attach-btn .nav-ico {
  width: 18px;
  height: 18px;
  display: block;
}
#usuarios-panel-mensajes .chat-composer.is-recording {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
#usuarios-panel-mensajes .chat-composer.is-recording textarea,
#usuarios-panel-mensajes .chat-composer.is-recording .chat-mic-btn,
#usuarios-panel-mensajes .chat-composer.is-recording .chat-send-btn,
#usuarios-panel-mensajes .chat-composer.is-recording .chat-camera-btn,
#usuarios-panel-mensajes .chat-composer.is-recording .chat-attach-wrap {
  display: none !important;
}
#usuarios-panel-mensajes .chat-composer.is-recording .chat-rec-ui {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
}
#usuarios-panel-mensajes .chat-send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.chat-rec-ui {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  width: 100%;
  padding: 0 4px;
}
.chat-rec-ui:not(.hidden) {
  display: flex;
}
.chat-rec-wave {
  flex: 1 1 auto;
  min-width: 80px;
  height: 36px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sys-surface-2, #1a1f26) 90%, #000);
}
.chat-rec-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.9rem;
  color: #ef4444;
  min-width: 3rem;
  text-align: right;
}
.chat-rec-send.is-recording {
  color: #fff;
  background: #ef4444;
  border-radius: 999px;
}
.chat-manage-comunidad {
  margin-left: 6px;
  font-size: 0.74rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.chat-thread-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-publish-dialog {
  width: min(560px, calc(100vw - 24px));
}
.chat-publish-dialog .mc-hub-task-pick-list {
  max-height: min(36vh, 280px);
}
.chat-publish-dialog .mc-hub-task-detail-prompt {
  margin-bottom: 8px;
}
#chat-publish-plan-edit:disabled,
#chat-publish-plan-edit[aria-disabled="true"],
#chat-publish-session-edit:disabled,
#chat-publish-session-edit[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}
/* CTA primary: gris/apagado hasta que el form esté listo (planes, sesiones, futuros adjuntos) */
.chat-publish-dialog .modal-footer .btn-primary:disabled,
.chat-publish-dialog .modal-footer .btn-primary[aria-disabled="true"],
.modal-dialog.chat-attach-gated .modal-footer .btn-primary:disabled,
.modal-dialog.chat-attach-gated .modal-footer .btn-primary[aria-disabled="true"] {
  opacity: 0.38;
  filter: grayscale(0.35);
  background: color-mix(in srgb, var(--sys-surface-2, #2a2a2a) 70%, var(--muted, #888)) !important;
  color: color-mix(in srgb, var(--text, #fff) 45%, transparent) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}
.chat-publish-dialog .modal-footer .btn-primary:disabled:hover,
.modal-dialog.chat-attach-gated .modal-footer .btn-primary:disabled:hover {
  filter: grayscale(0.35);
  background: color-mix(in srgb, var(--sys-surface-2, #2a2a2a) 70%, var(--muted, #888)) !important;
}
.chat-publish-banner {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.4;
  background: color-mix(in srgb, var(--primary) 14%, var(--sys-surface));
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--hairline));
}
.chat-publish-dialog .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0;
  font-size: 0.86rem;
}
.chat-publish-dialog .field {
  margin-bottom: 12px;
}
.chat-publish-dialog textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
}

/* ═══ Mensajes — audience tabs Clientes | Colaboradores | Grupos (.msgs-*) ═══ */
#usuarios-panel-mensajes .msgs-audience-tabs,
#mensajes-audience-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 10px 8px;
  padding: 4px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface-2, var(--sys-surface)) 88%, var(--hairline));
  border: 1px solid var(--hairline);
}
#usuarios-panel-mensajes .msgs-audience-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted, #9aa3b2);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  line-height: 1.15;
}
#usuarios-panel-mensajes .msgs-audience-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--sys-surface) 70%, transparent);
}
#usuarios-panel-mensajes .msgs-audience-tab.active,
#usuarios-panel-mensajes .msgs-audience-tab[aria-selected="true"] {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 22%, var(--sys-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}
#usuarios-panel-mensajes .msgs-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  background: #ef4444;
  color: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sys-surface) 80%, transparent);
}
.chat-attach-wrap {
  position: relative;
  flex: 0 0 auto;
}
.chat-attach-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  min-width: 220px;
  padding: 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-surface) 96%, #000);
  border: 1px solid var(--hairline);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-attach-item {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.chat-attach-item:hover {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}
.chat-attach-item .nav-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  opacity: 0.9;
}
.chat-mic-btn.is-recording {
  color: #ef4444;
  box-shadow: 0 0 0 2px color-mix(in srgb, #ef4444 45%, transparent);
  animation: chat-mic-pulse 1.1s ease-in-out infinite;
}
@keyframes chat-mic-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.chat-msg-system {
  display: flex;
  justify-content: center;
  padding: 6px 10px;
}
.chat-msg-system span {
  font-size: 0.76rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--sys-surface-2, var(--sys-surface)) 85%, var(--hairline));
  border-radius: 999px;
  padding: 4px 12px;
}
.chat-audio-bubble,
.chat-media-bubble,
.chat-file-bubble,
.chat-share-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-media-bubble img,
.chat-media-bubble video {
  max-width: min(280px, 100%);
  border-radius: 10px;
  display: block;
}
.chat-audio-bubble audio {
  width: min(240px, 100%);
}
.chat-share-card {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--hairline));
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  font-weight: 600;
  white-space: pre-wrap;
}
.msg-toast-root {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 32px));
}
.msg-toast {
  pointer-events: auto;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--hairline));
  background: color-mix(in srgb, var(--sys-surface) 92%, #0b0d10);
  color: var(--text);
  text-align: left;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.msg-toast.show {
  opacity: 1;
  transform: none;
}
.msg-toast-title {
  font-weight: 750;
  font-size: 0.9rem;
}
.msg-toast-body {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
}
#usuarios-panel-mensajes .chat-composer {
  position: relative;
  align-items: center;
  gap: 8px;
}
#usuarios-panel-mensajes .msgs-manage-row {
  display: flex;
  justify-content: flex-end;
  padding: 0 12px 6px;
}
#usuarios-panel-mensajes .msgs-manage-link {
  font-size: 0.76rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#usuarios-panel-mensajes .msgs-group-avatar {
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: color-mix(in srgb, var(--primary) 55%, #2563eb);
  overflow: hidden;
}
#usuarios-panel-mensajes .msgs-group-avatar.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#usuarios-panel-mensajes .msgs-group-btn .chat-avatar,
#usuarios-panel-mensajes .msgs-group-btn .msgs-group-avatar {
  border-radius: 10px;
}
#usuarios-panel-mensajes .msgs-empty-cta-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 12px 14px;
}
#usuarios-panel-mensajes .msgs-thread-empty p {
  font-weight: 650;
}

.chat-new-modal-body .chat-group-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  cursor: pointer;
}
.chat-new-modal-body .chat-group-toggle-row input {
  width: 42px;
  height: 24px;
  accent-color: var(--primary);
  cursor: pointer;
}
.chat-new-modal-body .chat-group-hint {
  margin: 6px 0 0;
  font-size: 0.76rem;
}
.chat-new-results {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  margin-top: 6px;
}
.chat-new-results button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.chat-new-results button:hover {
  background: color-mix(in srgb, var(--primary-soft) 45%, transparent);
}
.chat-new-selected .chat-member-chip,
.chat-group-members-chips .chat-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--primary-soft) 40%, transparent);
  font-size: 0.78rem;
}
.chat-member-chip button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
@media (max-width: 900px) {
  #usuarios-panel-mensajes .chat-shell-inbox {
    grid-template-columns: 1fr;
  }
  #usuarios-panel-mensajes .chat-inbox {
    width: 100%;
    max-width: none;
    max-height: 42vh;
  }
}

/* JV-003 — Usuarios wireframe tables + drawers (all tabs) */
.usuarios-tab-blurb,
.usuarios-tab-lede {
  margin: 0 0 10px;
  padding: 9px 14px 9px 13px;
  border-radius: var(--panel-radius, 10px);
  background: color-mix(in srgb, var(--sys-surface-2) 72%, transparent);
  border: 1px solid var(--hairline);
  border-left: 3px solid color-mix(in srgb, var(--accent, #e85d4c) 78%, transparent);
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.4;
}
.usuarios-tab-blurb-title {
  display: block;
  margin: 0 0 2px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text, #f3f4f6);
}
.usuarios-tab-blurb-text {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}
.usuarios-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 2px 4px;
  border-top: 1px solid var(--hairline);
  margin-top: 4px;
}
.usuarios-pagination-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
.usuarios-pagination-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.usuarios-pagination-info {
  font-size: 0.8rem;
  color: var(--muted);
}
.usuarios-pagination-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted);
}
.usuarios-pagination-size-select {
  min-width: 4.25rem;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 6px;
  background: var(--sys-surface, var(--surface));
  color: inherit;
  font-size: 0.78rem;
}
.usuarios-pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.usuarios-pagination-pages {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.usuarios-pagination-page {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.usuarios-pagination-page:hover {
  background: var(--sys-surface-2);
}
.usuarios-pagination-page.is-current {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  color: var(--primary);
  font-weight: 600;
}
.usuarios-pagination-ellipsis {
  padding: 0 4px;
  color: var(--muted);
  font-size: 0.78rem;
}
.usuarios-pagination-prev,
.usuarios-pagination-next {
  min-width: 28px;
  padding: 0 8px;
}
.survey-assign-count-btn {
  font-size: 0.78rem;
  padding: 2px 6px;
}
.usuarios-roster-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}
.usuarios-roster-table td,
.usuarios-roster-table th {
  border: 1px solid var(--border-subtle, var(--hairline));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 6px;
}
.usuarios-roster-table thead th.has-col-filter {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.15;
  vertical-align: middle;
  padding-top: 5px;
  padding-bottom: 5px;
}
.usuarios-roster-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--sys-surface-2) 28%, transparent);
}
.usuarios-roster-table .usuarios-roster-actions-col {
  overflow: visible;
  white-space: nowrap;
  width: 56px;
  max-width: 56px;
  min-width: 56px;
  padding-right: 4px;
  text-align: center;
}
.usuarios-roster-table td.usuarios-roster-actions-col .roster-inline-actions {
  justify-content: center;
  width: 100%;
}
.usuarios-roster-table thead th.usuarios-roster-actions-col {
  text-align: center;
}
.usuarios-roster-table thead th:not(.usuarios-roster-actions-col) {
  text-align: center;
}
.usuarios-roster-table thead th .th-label {
  display: inline;
}
.usuarios-roster-table thead th.has-col-filter {
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}
.usuarios-roster-table td.usuarios-roster-cell-center {
  text-align: center;
}
.usuarios-roster-table td.usuarios-roster-cell-center .client-plan-status-icons {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}
.usuarios-roster-table td.usuarios-roster-cell-center .staff-status-pill {
  display: inline-block;
}
.usuarios-roster-table .roster-inline-action {
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.usuarios-roster-table .roster-inline-action.roster-action-edit {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 32%, transparent);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.usuarios-roster-table .roster-inline-action.roster-action-edit:hover {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
}
.usuarios-roster-table .roster-inline-action.roster-action-message {
  color: #3b82f6;
  border-color: color-mix(in srgb, #3b82f6 32%, transparent);
  background: color-mix(in srgb, #3b82f6 10%, transparent);
}
.usuarios-roster-table .roster-inline-action.roster-action-message:hover {
  background: color-mix(in srgb, #3b82f6 18%, transparent);
}
.usuarios-roster-table .roster-inline-action.roster-action-danger {
  color: var(--err, #dc2626);
  border-color: color-mix(in srgb, var(--err, #dc2626) 38%, transparent);
  background: color-mix(in srgb, var(--err, #dc2626) 10%, transparent);
}
.usuarios-roster-table .roster-inline-action.roster-action-danger:hover {
  background: color-mix(in srgb, var(--err, #dc2626) 18%, transparent);
}
.usuarios-roster-table .roster-inline-action.roster-action-success {
  color: var(--ok, #16a34a);
  border-color: color-mix(in srgb, var(--ok, #16a34a) 38%, transparent);
  background: color-mix(in srgb, var(--ok, #16a34a) 10%, transparent);
}
.usuarios-roster-table .roster-inline-action.roster-action-success:hover {
  background: color-mix(in srgb, var(--ok, #16a34a) 18%, transparent);
}
.usuarios-roster-table .roster-inline-action.roster-action-info {
  color: #0ea5e9;
  border-color: color-mix(in srgb, #0ea5e9 32%, transparent);
  background: color-mix(in srgb, #0ea5e9 10%, transparent);
}
.usuarios-roster-table .roster-inline-action.roster-action-info:hover {
  background: color-mix(in srgb, #0ea5e9 18%, transparent);
}
.usuarios-roster-table .roster-inline-action.roster-action-view {
  color: color-mix(in srgb, var(--text, #e5e7eb) 82%, var(--muted));
  border-color: color-mix(in srgb, var(--muted) 35%, transparent);
  background: color-mix(in srgb, var(--sys-surface-2) 55%, transparent);
}
.usuarios-roster-table .roster-inline-action.roster-action-view:hover {
  background: color-mix(in srgb, var(--sys-surface-2) 85%, transparent);
}
.usuarios-roster-table .roster-inline-action.roster-action-muted {
  color: var(--muted);
  border-color: color-mix(in srgb, var(--muted) 28%, transparent);
  background: color-mix(in srgb, var(--sys-surface-2) 45%, transparent);
}
.usuarios-roster-table .roster-inline-action.roster-action-muted:hover {
  color: var(--text, inherit);
  background: color-mix(in srgb, var(--sys-surface-2) 75%, transparent);
}
.usuarios-roster-table td .usuarios-client-tags,
.usuarios-roster-table td .staff-row-meta,
.usuarios-roster-table td .usuarios-client-name {
  white-space: normal;
}
.usuarios-roster-table .usuarios-client-name {
  display: block;
  min-width: 0;
  font-weight: 600;
}
.usuarios-roster-table .usuarios-client-name .name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.usuarios-clientes-table .col-name { width: 13%; }
.usuarios-clientes-table .col-email { width: 16%; }
.usuarios-clientes-table .col-sede { width: 9%; }
.usuarios-clientes-table .col-coach { width: 10%; }
.usuarios-clientes-table .col-tags { width: 10%; }
.usuarios-clientes-table .col-status { width: 10%; min-width: 76px; }
.usuarios-clientes-table .col-plans { width: 13%; min-width: 104px; }
.usuarios-clientes-table .col-actions { width: 56px; }
.usuarios-staff-table .col-member { width: 200px; }
.usuarios-staff-table .col-email { width: 200px; }
.usuarios-staff-table .col-role { width: 130px; }
.usuarios-staff-table .col-sede { width: 120px; }
.usuarios-staff-table .col-status { width: 100px; }
.usuarios-staff-table .col-clients { width: 80px; }
.usuarios-staff-table .col-activity { width: 140px; }
.usuarios-staff-table .col-cumplimiento { width: 120px; }
.usuarios-staff-table .col-invite-sent { width: 160px; }
.usuarios-staff-table .col-activated { width: 160px; }
.usuarios-staff-table .col-actions { width: 88px; }
.usuarios-grupos-table .col-name { width: 280px; }
.usuarios-grupos-table .col-members { width: 90px; min-width: 72px; }
.usuarios-grupos-table .col-coach { width: 160px; }
.usuarios-grupos-table .col-updated { width: 140px; }
.usuarios-grupos-table .col-actions { width: 120px; }
.tags-table .col-color { width: 48px; }
.tags-table .col-name { width: 24%; }
.tags-table .col-category { width: 18%; }
.tags-table .col-usage { width: 10%; }
.tags-table .col-created { width: 14%; }
.tags-table .col-actions { width: 56px; }
.survey-templates-table .col-title { width: 34%; }
.survey-templates-table .col-q { width: 12%; }
.survey-templates-table .col-anon { width: 12%; }
.survey-templates-table .col-assign { width: 14%; }
.survey-templates-table .col-actions { width: 56px; }
.usuarios-clientes-table .usuarios-client-email {
  max-width: 0;
}
.usuarios-clientes-table td .usuarios-client-tags {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-wrap: nowrap;
}
.usuarios-staff-table td .staff-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.usuarios-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: end;
  padding: 0 0 12px;
}
.usuarios-filter-row .centro-filter-compact select {
  min-width: 140px;
}
.usuarios-roster-table tbody tr.usuarios-staff-row,
.usuarios-roster-table tbody tr.usuarios-grupo-row,
.usuarios-roster-table tbody tr.tags-row {
  cursor: default;
}
.usuarios-roster-table tbody tr.is-selected {
  background: color-mix(in srgb, var(--primary) 12%, var(--sys-surface));
}
.usuarios-roster-meta {
  display: block;
  padding: 6px 2px 0;
}
.roster-actions-wrap {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
}
.roster-actions-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 168px;
  padding: 6px;
  border: 1px solid var(--hairline);
  border-radius: var(--panel-radius);
  background: var(--sys-surface);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.18));
}
.roster-actions-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 0.82rem;
}
.roster-actions-menu button:hover {
  background: var(--sys-surface-2);
}
.roster-actions-menu button.danger {
  color: var(--err, #dc2626);
}
.staff-status-pill.is-active {
  color: var(--ok, #16a34a);
  background: color-mix(in srgb, var(--ok, #16a34a) 14%, transparent);
}
.staff-status-pill.is-inactive {
  color: var(--err, #dc2626);
  background: color-mix(in srgb, var(--err, #dc2626) 12%, transparent);
}
.staff-status-pill.is-pending {
  color: var(--warn, #d97706);
  background: color-mix(in srgb, var(--warn, #d97706) 14%, transparent);
}
.usuarios-drawer-root:not(.hidden) {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 130;
}
.usuarios-drawer-root.hidden {
  display: none;
}
.usuarios-drawer-root:not(.hidden) .drawer-backdrop {
  position: fixed;
  inset: 0;
}
.usuarios-staff-drawer,
.usuarios-grupo-drawer,
.usuarios-ficha-drawer {
  width: min(480px, 96vw);
}
.usuarios-drawer-root:not(.hidden) .drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.usuarios-drawer-root .drawer-foot {
  flex-shrink: 0;
  margin-top: auto;
}
body.usuarios-drawer-open {
  overflow: hidden;
}
.tag-swatch-table {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  vertical-align: middle;
}
.staff-tool-row .filter-chip.is-on {
  background: color-mix(in srgb, var(--primary) 18%, var(--sys-surface));
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--primary);
}
.tag-table-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tag-table-name .tag-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}
.tag-color-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.tag-color-picker-row input[type="color"] {
  width: 44px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--sys-surface-2);
  cursor: pointer;
  flex-shrink: 0;
}
.tag-color-picker-row #tag-color {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, monospace;
  font-size: 0.88rem;
}
.tag-color-swatches {
  display: none;
}

/* —— Nueva / Editar etiqueta: automatizaciones expand-on-check —— */
.modal-dialog.tag-edit-dialog {
  --modal-w: min(600px, 94vw);
  max-height: min(92vh, 880px);
}
.tag-edit-dialog .modal-body.tag-edit-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  max-height: min(68vh, 640px);
  padding-bottom: 8px;
}
.tag-edit-lede {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
}
.tag-edit-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--text) 88%, #93c5fd);
  background: color-mix(in srgb, #1e3a5f 55%, var(--sys-surface-2));
  border: 1px solid color-mix(in srgb, #3b82f6 28%, transparent);
}
.tag-edit-note-sm {
  padding: 8px 10px;
  font-size: 0.78rem;
}
.tag-edit-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
}
.tag-edit-field .req {
  color: var(--primary);
  margin-left: 2px;
}
.tag-edit-field .hint {
  font-weight: 500;
}
.tag-edit-meta-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) 1.1fr;
  gap: 12px;
}
@media (max-width: 560px) {
  .tag-edit-meta-row {
    grid-template-columns: 1fr;
  }
}
.tag-autos {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.tag-autos h4 {
  margin: 0 0 2px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.tag-autos-hint {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: var(--muted);
}
.tag-auto {
  border-radius: 10px;
  transition: background 0.15s ease;
}
.tag-auto:has(.tag-auto-check:checked) {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.tag-auto-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px;
  margin: 0;
  cursor: pointer;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  user-select: none;
}
.tag-auto-toggle:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.tag-auto-toggle input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: var(--primary);
  cursor: pointer;
}
.tag-auto-panel {
  margin: 0 8px 12px 34px;
  padding: 12px 12px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--hairline));
  background: color-mix(in srgb, var(--sys-surface-2) 88%, #000);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: tag-auto-in 0.18s ease;
}
.tag-auto-panel[hidden] {
  display: none !important;
}
@keyframes tag-auto-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.tag-auto-panel-lede {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
}
.tag-auto-panel select,
.tag-auto-panel input[type="text"],
.tag-auto-panel input[type="search"],
.tag-auto-panel input[type="number"],
.tag-auto-panel input[type="date"] {
  width: 100%;
}
.tag-auto-pick-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 168px;
  overflow-y: auto;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-bg) 40%, transparent);
}
.tag-auto-pick-list .checkbox-row {
  padding: 6px 8px;
  margin: 0;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
}
.tag-auto-pick-list .checkbox-row:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.tag-auto-pick-empty {
  padding: 10px 8px;
  font-size: 0.8rem;
  color: var(--muted);
}
.tag-auto-service-checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tag-auto-service-checks .checkbox-row {
  margin: 0;
  padding: 6px 4px;
  font-weight: 500;
}
#tag-edit-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.usuarios-encuestas-subnav {
  margin-bottom: 12px;
}
.survey-segment[hidden] {
  display: none !important;
}
.survey-stepper {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0 0 14px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--hairline);
}
.survey-step {
  flex: 1;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 6px 8px;
  border-radius: 999px;
}
.survey-step.is-active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  font-weight: 600;
}
.survey-step.is-done {
  color: var(--ok, #16a34a);
}
.grupo-members-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.grupo-members-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.grupo-assign-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-conv-btn.has-unread .chat-conv-name,
.chat-conv-preview.is-unread {
  font-weight: 700;
}
.chat-thread-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 720px) {
  .usuarios-filter-row .centro-filter-compact {
    flex: 1 1 45%;
  }
  .usuarios-roster-table .usuarios-staff-row td:nth-child(2),
  .usuarios-roster-table thead th:nth-child(2) {
    display: none;
  }
}

/* JV-003 — column header filters + inline roster actions */
.usuarios-roster-table thead th.has-col-filter .th-label {
  display: inline;
  margin-right: 2px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: keep-all;
}
.usuarios-roster-table thead th.has-col-filter .th-col-filter-btn {
  display: inline-flex;
  vertical-align: middle;
  flex-shrink: 0;
}
.th-col-filter-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  vertical-align: middle;
  color: var(--muted);
}
.th-col-filter-btn.is-active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.th-col-filter-btn .nav-ico {
  width: 13px;
  height: 13px;
}
.usuarios-col-filter-pop {
  position: fixed;
  z-index: 90;
  min-width: 220px;
  max-width: 280px;
  width: 260px;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--panel-radius, 10px);
  background: var(--sys-surface);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.18));
  overflow-x: hidden;
}
.usuarios-col-filter-pop[hidden] {
  display: none;
}
.usuarios-col-filter-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 0 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: color-mix(in srgb, var(--sys-surface-2) 60%, transparent);
  min-width: 0;
}
.usuarios-col-filter-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 6px 0;
  font-size: 0.82rem;
}
.usuarios-col-filter-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 175px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}
.usuarios-col-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.usuarios-col-filter-option:hover,
.usuarios-col-filter-option.is-selected {
  background: var(--sys-surface-2);
}
.usuarios-col-filter-radio {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 2px solid var(--muted);
  border-radius: 50%;
  background: transparent;
  position: relative;
}
.usuarios-col-filter-option.is-selected .usuarios-col-filter-radio {
  border-color: var(--primary);
}
.usuarios-col-filter-option.is-selected .usuarios-col-filter-radio::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--primary);
}
.usuarios-col-filter-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  color: var(--text, inherit);
}
.usuarios-col-filter-empty {
  margin: 4px 0;
  padding: 4px 8px;
}
.roster-inline-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex-wrap: nowrap;
}
.roster-inline-action {
  width: 26px;
  height: 26px;
  padding: 0;
  flex-shrink: 0;
}
.roster-inline-action .nav-ico {
  width: 15px;
  height: 15px;
}
.usuarios-roster-table .usuarios-roster-actions-col {
  overflow: visible;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   Portal narrow viewport — 2026-09-02 (functional responsive)
   Inicio / Usuarios / Centro + Biblioteca / Coaching / Administración.
   Prefer stack + scroll over page blowouts. Not design craft.
   Breakpoints: 900 / 800 / 720 / 560 (align existing portal shell).
   ═══════════════════════════════════════════════════════════════════════ */

.usuarios-chrome {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 900px) {
  /* Inicio: densify unlock was only max-height; stacked cols need page scroll */
  #tab-inicio.tab-panel.active {
    overflow-y: auto !important;
    height: auto;
    max-height: 100%;
  }
  #tab-inicio .cmd-bottom {
    flex: 0 0 auto !important;
  }
  #tab-inicio .cmd-bottom .cmd-panel {
    overflow: visible !important;
  }
  #tab-inicio .cmd-dense-list {
    flex: 0 0 auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
  #tab-inicio .cmd-aforo-body {
    flex-wrap: wrap !important;
  }
  #tab-inicio .cmd-mid {
    grid-template-columns: 1fr !important;
  }
  #tab-inicio .cmd-hero-stats {
    width: 100%;
  }

  /* Fill-height modules: allow tab scroll on tablet/phone */
  .centro-host.tab-panel.active,
  #tab-usuarios.tab-panel.active,
  #tab-ejercicios.tab-panel.active,
  #tab-planificador.tab-panel.active,
  #tab-comidas.tab-panel.active,
  #tab-recuperacion.tab-panel.active,
  #tab-wellness.tab-panel.active,
  #tab-pagos.tab-panel.active,
  #tab-permisos.tab-panel.active,
  #tab-diagnostico.tab-panel.active,
  #tab-marca.tab-panel.active,
  #tab-metricas.tab-panel.active,
  #tab-clases-vod.tab-panel.active,
  #tab-superadmin.tab-panel.active {
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Usuarios — subnav scroll + toolbar stack */
  #tab-usuarios .usuarios-chrome .centro-subnav,
  #tab-usuarios .usuarios-subnav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
    max-width: 100%;
  }
  #tab-usuarios .usuarios-chrome .centro-subnav::-webkit-scrollbar,
  #tab-usuarios .usuarios-subnav::-webkit-scrollbar {
    display: none;
    height: 0;
  }
  #tab-usuarios .centro-subnav-btn {
    flex: 0 0 auto;
  }
  .usuarios-panel .usuarios-toolbar.clientes-toolbar,
  .usuarios-panel .usuarios-toolbar.usuarios-toolbar-compact,
  .usuarios-panel .usuarios-toolbar.usuarios-toolbar-slim {
    flex-wrap: wrap !important;
    overflow: visible !important;
    align-items: stretch;
  }
  .usuarios-toolbar-slim .usuarios-client-search-narrow,
  .workspace-toolbar.usuarios-toolbar-compact label.usuarios-client-search,
  .usuarios-toolbar-compact label.usuarios-client-search,
  .usuarios-client-search {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .usuarios-panel .usuarios-toolbar .toolbar-spacer {
    display: none;
  }
  .usuarios-panel .usuarios-toolbar .btn-primary,
  .usuarios-clear-filters-btn {
    flex: 1 1 auto;
    min-width: 0;
  }
  .usuarios-roster-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }
  .usuarios-roster-wrap .mc-table-xscroll {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
  .usuarios-roster-table {
    min-width: 560px;
  }
  .usuarios-pagination {
    gap: 8px;
  }
  .usuarios-pagination-inner {
    flex-wrap: wrap;
    width: 100%;
  }
  .flow-context-bar {
    gap: 8px;
  }
  .flow-context-back {
    margin-left: 0;
    width: 100%;
  }

  /* Centro — chrome + toolbars */
  .centro-chrome {
    flex-wrap: wrap;
    align-items: stretch;
  }
  .centro-chrome .ghost {
    width: 100%;
  }
  .centro-host .centro-tool-row,
  .centro-host .workspace-toolbar,
  .centro-host .staff-filter-bar {
    flex-wrap: wrap;
  }
  .centro-host .workspace-toolbar input,
  .centro-host .workspace-toolbar select,
  .workspace-toolbar input,
  .workspace-toolbar select {
    min-width: 0;
    max-width: 100%;
  }
  .centro-host .workspace-toolbar label,
  .workspace-toolbar label {
    flex: 1 1 140px;
    min-width: 0;
  }
  .centro-host .centro-filter-compact,
  .centro-filter-compact {
    flex: 1 1 140px;
    min-width: 0;
  }

  /* Biblioteca / Coaching (planner · nutri · physio · wellness) */
  #tab-planificador .planner-panel-head,
  #tab-comidas .nutrition-panel-head,
  #tab-comidas .nutrition-toolbar,
  #tab-comidas .nutrition-foods-toolbar,
  #tab-comidas .nutrition-lib-toolbar,
  #tab-comidas .nutrition-toolbar-actions,
  .wellness-toolbar,
  #tab-recuperacion .workspace-toolbar,
  #tab-metricas .metrics-toolbar {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }
  #tab-comidas .nutrition-toolbar .toolbar-field,
  #tab-metricas .metrics-toolbar .toolbar-field,
  .wellness-toolbar .wellness-client-field {
    flex: 1 1 140px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #nutrition-pane-biblioteca .libpane-kind-tabs {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #nutrition-pane-biblioteca .libpane-kind {
    min-width: 0;
    padding-inline: 6px;
  }
  #tab-comidas .nutrition-plan-body {
    grid-template-columns: 1fr;
  }
  #tab-planificador.is-library .planner-libpane,
  #tab-comidas.is-library .nutrition-libpane {
    min-width: 0;
    max-width: 100%;
  }

  /* Administración */
  .pagos-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pagos-assign-inline {
    flex-direction: column;
    align-items: stretch;
  }
  .pagos-assign-inline .btn-primary,
  .pagos-assign-inline > * {
    width: 100%;
    max-width: 100%;
  }
  #tab-marca .palette-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Modals usable on tablet */
  .assign-super-dialog,
  .assign-super-tpl-dialog {
    width: min(100vw - 12px, 96vw);
    max-height: min(94svh, 960px);
  }
  .assign-progress-steps .assign-progress-step {
    font-size: 0.62rem;
    padding: 6px 2px;
  }
  .usuarios-col-filter-pop {
    max-width: min(280px, calc(100vw - 16px));
    width: min(260px, calc(100vw - 16px));
  }
}

@media (max-width: 800px) {
  #tab-usuarios .usuarios-panel.active,
  #usuarios-panel-clientes.usuarios-panel.active,
  #usuarios-panel-equipo.usuarios-panel.active,
  #usuarios-panel-encuestas.usuarios-panel.active,
  #usuarios-panel-etiquetas.usuarios-panel.active,
  #usuarios-panel-grupos.usuarios-panel.active,
  #usuarios-panel-mensajes.usuarios-panel.active {
    overflow: visible;
  }
  .centro-host .centro-panel.active {
    overflow: visible;
  }
  .centro-host .workspace-main,
  .centro-host .workspace-side {
    max-height: none;
  }
  #tab-wellness .wellness-panel.active {
    overflow: visible;
  }
  #tab-comidas .nutrition-panel.active {
    overflow: visible;
  }
  #agenda-list > li.cita-row {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  #agenda-list > li.cita-row > :last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .usuarios-roster-table {
    min-width: 480px;
  }
  #mc-clients-table.mc-clients-table {
    min-width: 1480px;
    width: 100%;
  }
  /* Hide lower-priority roster cols; keep name + filters usable */
  .usuarios-roster-table:not(.mc-clients-table) .usuarios-client-tags,
  .usuarios-clientes-table:not(.mc-clients-table) thead th:nth-child(5),
  .usuarios-clientes-table:not(.mc-clients-table) tbody td:nth-child(5) {
    display: none;
  }
  .resumen360-kpi-strip {
    grid-template-columns: 1fr 1fr;
  }
  .survey-stepper {
    flex-wrap: wrap;
  }
  .survey-step {
    flex: 1 1 40%;
  }
  .pagos-kpi-row {
    grid-template-columns: 1fr;
  }
  #tab-marca .palette-grid {
    grid-template-columns: 1fr;
  }
  .ficha-file-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }
  .ficha-file-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  #tab-inicio .cmd-ring {
    width: 88px;
    height: 88px;
  }
  #tab-inicio .cmd-ring-value {
    font-size: 1.05rem;
  }
  #tab-inicio .cmd-welcome {
    font-size: 1.05rem;
  }
  #tab-inicio .cmd-action-desc {
    display: none;
  }

  .usuarios-roster-table {
    min-width: 420px;
  }
  .usuarios-clientes-table:not(.mc-clients-table) thead th:nth-child(3),
  .usuarios-clientes-table:not(.mc-clients-table) tbody td:nth-child(3),
  .usuarios-roster-table .usuarios-client-sede {
    display: none;
  }
  .usuarios-ficha-tabs-v2 {
    flex-wrap: wrap;
  }
  .usuarios-ficha-tab {
    flex: 1 1 30%;
    font-size: 0.74rem;
    padding: 8px 6px;
  }
  .usuarios-ficha-drawer {
    width: 100vw;
    max-width: 100vw;
  }
  .usuarios-tab-blurb,
  .usuarios-tab-lede {
    font-size: 0.78rem;
    padding: 8px 10px 8px 11px;
  }
  .usuarios-tab-blurb-title {
    font-size: 0.76rem;
  }
  .usuarios-tab-blurb-text {
    font-size: 0.76rem;
  }

  /* Phone modals — full bleed, sticky foot */
  dialog.modal-dialog,
  dialog.modal-dialog.modal-md,
  dialog.modal-dialog.modal-wide,
  .assign-super-dialog,
  .assign-super-tpl-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100svh !important;
    max-height: 100svh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    --modal-w: 100vw;
    --modal-max-h: 100svh;
  }
  .modal-dialog .modal-footer,
  .assign-super-dialog .modal-footer {
    flex-wrap: wrap;
    gap: 8px;
    position: sticky;
    bottom: 0;
    background: var(--sys-surface, var(--surface));
  }
  .modal-dialog .modal-footer .btn-primary,
  .modal-dialog .modal-footer .ghost {
    flex: 1 1 auto;
    min-width: 0;
  }
  .assign-progress-steps {
    gap: 2px;
  }
  .assign-progress-steps .assign-progress-step {
    flex: 1 1 18%;
    min-width: 3.2rem;
  }

  #usuarios-panel-mensajes .chat-inbox-head-actions {
    margin-left: 0;
    width: 100%;
  }
  #usuarios-panel-mensajes .chat-send-btn {
    min-width: 42px;
  }
  #usuarios-panel-mensajes .chat-composer {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    flex-wrap: nowrap;
  }
}

/* CS-0907 — Permisos matrix (read-only) */
.permisos-workspace .workspace-lede { max-width: 42rem; }
.permisos-matrix-root {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 0.25rem 0 1.5rem;
}
.permisos-matrix-block { min-width: 0; }
.permisos-matrix-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 650;
}
.permisos-matrix-hint { margin: 0 0 0.75rem; }
.permisos-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--sys-border, #e2e8f0);
  border-radius: 10px;
  background: var(--sys-surface, #fff);
}
.permisos-matrix {
  width: 100%;
  min-width: 52rem;
  border-collapse: collapse;
}
.permisos-matrix th,
.permisos-matrix td {
  padding: 0.55rem 0.65rem;
  text-align: center;
  vertical-align: middle;
}
.permisos-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--sys-surface-2, #f8fafc);
  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
}
.permisos-matrix tbody th {
  text-align: left;
  font-weight: 550;
  white-space: nowrap;
  background: var(--sys-surface, #fff);
}
.permisos-cell.is-yes {
  color: var(--sys-success, #16a34a);
  font-weight: 700;
}
.permisos-cell.is-no {
  color: var(--sys-muted, #94a3b8);
}

/* ── Library AI dialog + Biblioteca FAB speed-dials ─────────────────────── */
.library-ai-dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: min(88vh, 760px);
}
.library-ai-dialog .library-ai-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.library-ai-dialog .library-ai-head h3 {
  margin: 0;
}
.library-ai-dialog #library-ai-lede {
  margin: 0;
}
.library-ai-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.library-ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.library-ai-chip {
  border-radius: 999px;
}
.library-ai-matches {
  max-height: 140px;
  overflow: auto;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 88%, transparent);
}
.library-ai-matches:empty {
  display: none;
}
.library-ai-matches-label {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--muted);
}
.library-ai-match-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.library-ai-match {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.library-ai-match:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--primary-soft, var(--primary)) 35%, transparent);
}
.library-ai-match strong {
  font-size: 0.88rem;
}
.library-ai-thread {
  flex: 1 1 auto;
  min-height: 160px;
  max-height: min(42vh, 320px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px;
}
.library-ai-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 92%;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, var(--surface)) 92%, transparent);
}
.library-ai-msg.is-user {
  align-self: flex-end;
  background: color-mix(in srgb, var(--primary-soft, var(--primary)) 45%, var(--sys-surface, var(--surface)));
}
.library-ai-msg.is-assistant {
  align-self: flex-start;
}
.library-ai-msg-role {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: uppercase;
}
.library-ai-msg-body {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text);
}
.library-ai-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.library-ai-status {
  margin: 0;
  min-height: 1.1em;
}
.library-ai-compose {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.library-ai-compose #library-ai-input {
  flex: 1 1 180px;
  min-width: 0;
}

#tab-clases-vod,
#tab-wellness,
#tab-recuperacion {
  position: relative;
}

#ex-fab-wrap,
#vod-fab-wrap,
#wellness-fab-wrap,
#recovery-lib-fab-wrap {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: max-content;
  height: max-content;
  pointer-events: none;
}

#ex-fab-wrap > .planner-fab,
#ex-fab-wrap > .planner-fab-actions:not([hidden]),
#vod-fab-wrap > .planner-fab,
#vod-fab-wrap > .planner-fab-actions:not([hidden]),
#wellness-fab-wrap > .planner-fab,
#wellness-fab-wrap > .planner-fab-actions:not([hidden]),
#recovery-lib-fab-wrap > .planner-fab,
#recovery-lib-fab-wrap > .planner-fab-actions:not([hidden]) {
  pointer-events: auto;
}

/* Wellness: FAB prioritario en biblioteca; en coaching se oculta para no competir. */
#tab-wellness:not(.is-library) #wellness-fab-wrap {
  display: none;
}
#tab-wellness.is-library #wellness-fab-wrap {
  display: flex;
}

#tab-recuperacion:not(.is-library) #recovery-lib-fab-wrap {
  display: none !important;
}
#tab-recuperacion.is-library #recovery-lib-fab-wrap {
  display: flex !important;
}

html[data-theme="light"] .library-ai-matches,
html[data-theme="light"] .library-ai-msg {
  background: color-mix(in srgb, #fff 92%, var(--sys-surface, #f8fafc));
}


/* ── Mis clientes ─────────────────────────────── */
.mc-col-hidden { display: none !important; }

/* Clientes / equipo / comunidad / etiquetas: V-scroll inside roster wrap */
#usuarios-panel-clientes .mc-roster-wrap,
#usuarios-panel-clientes .usuarios-roster-wrap.mc-roster-wrap,
#usuarios-panel-equipo .usuarios-roster-wrap.mc-roster-wrap,
#usuarios-panel-grupos .usuarios-roster-wrap.mc-roster-wrap,
#usuarios-panel-etiquetas .usuarios-roster-wrap,
#usuarios-panel-encuestas .usuarios-roster-wrap {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: min(68vh, 720px);
  overflow-x: hidden;
  overflow-y: auto;
}
#usuarios-panel-equipo .usuarios-staff-table,
#equipo-staff-table.usuarios-staff-table {
  width: 100%;
  min-width: 1280px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8rem;
  overflow: visible;
}
#equipo-staff-table[data-equipo-view="invited"] {
  min-width: 760px;
}
#usuarios-panel-equipo .usuarios-staff-table thead th,
#equipo-staff-table thead th {
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  padding: 10px 10px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
#usuarios-panel-equipo .usuarios-staff-table tbody td,
#equipo-staff-table tbody td {
  height: auto !important;
  min-height: 56px;
  padding: 10px 10px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  line-height: 1.25;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 80%, transparent);
}
#usuarios-panel-equipo .usuarios-staff-table tbody td.equipo-cumplimiento-cell,
#equipo-staff-table tbody td.equipo-cumplimiento-cell {
  white-space: nowrap;
  overflow: visible;
}
#usuarios-panel-grupos .usuarios-grupos-table,
#grupos-comunidad-table.usuarios-grupos-table {
  width: 100%;
  min-width: 720px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8rem;
  overflow: visible;
}
#usuarios-panel-grupos .usuarios-grupos-table thead th,
#grupos-comunidad-table thead th {
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  padding: 10px 10px;
  white-space: nowrap;
}
#usuarios-panel-grupos .usuarios-grupos-table tbody td,
#grupos-comunidad-table tbody td {
  height: auto !important;
  min-height: 56px;
  padding: 10px 10px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  line-height: 1.25;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 80%, transparent);
}
#usuarios-panel-grupos .usuarios-grupos-table tbody td:nth-child(1),
#grupos-comunidad-table tbody td:nth-child(1) {
  white-space: normal;
  overflow: visible;
}
#usuarios-panel-grupos .grupo-planes-activos {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 2px 0;
}
#usuarios-panel-clientes .mc-clients-table,
#mc-clients-table.mc-clients-table {
  /* Ancho completo si hay espacio; si angosta, min-width + scroll H bajo la tabla. */
  width: 100%;
  min-width: 1480px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8rem;
  overflow: visible;
}
#mc-clients-table .col-check { width: 40px; }
#mc-clients-table .col-kebab { width: 36px; }
#mc-clients-table .col-cliente { width: 220px; }
#mc-clients-table .col-tags { width: 140px; }
#mc-clients-table .col-coach { width: 130px; }
#mc-clients-table .col-activacion { width: 120px; }
#mc-clients-table .col-app { width: 118px; }
#mc-clients-table .col-plan { width: 170px; }
#mc-clients-table .col-estado-plan { width: 160px; }
#mc-clients-table .col-pago { width: 120px; }
#mc-clients-table .col-cumplimiento { width: 150px; }
#mc-clients-table .col-actividad { width: 160px; }

#mc-clients-table thead th {
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  padding: 10px 10px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  border-bottom: 1px solid var(--hairline);
}
#mc-clients-table .mc-th-inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  max-width: none;
}
#mc-clients-table .mc-th-label {
  white-space: nowrap;
}
#mc-clients-table .mc-th-sort,
#mc-clients-table .mc-th-tip {
  appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--accent, #e85d4c);
  cursor: pointer;
  position: relative;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
#mc-clients-table .mc-th-sort::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-bottom: 4px solid currentColor;
  transform: translateX(-50%);
  opacity: 0.45;
}
#mc-clients-table .mc-th-sort::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  transform: translateX(-50%);
  opacity: 0.45;
}
#mc-clients-table .mc-th-sort.is-on.is-desc::after,
#mc-clients-table .mc-th-sort.is-on.is-asc::before {
  opacity: 1;
}
#mc-clients-table .mc-th-sort.is-on.is-desc::before,
#mc-clients-table .mc-th-sort.is-on.is-asc::after {
  opacity: 0.25;
}
#mc-clients-table .mc-th-tip {
  border: 1px solid color-mix(in srgb, var(--muted) 45%, transparent);
  color: var(--muted);
  font-size: 0.65rem;
}
#mc-clients-table .mc-th-tip:hover,
#mc-clients-table .mc-th-tip[aria-expanded="true"] {
  color: var(--accent, #e85d4c);
  border-color: color-mix(in srgb, var(--accent, #e85d4c) 55%, transparent);
}
.mc-th-tip-pop {
  position: fixed;
  z-index: 240;
  width: min(340px, calc(100vw - 24px));
  padding: 12px 14px;
  border-radius: 12px;
  background: #111;
  color: #f5f5f5;
  font-size: 0.8rem;
  line-height: 1.45;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.08);
}
.mc-th-tip-pop[hidden] { display: none !important; }
.mc-th-tip-pop .mc-tip-list {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: 6px;
}
.mc-th-tip-pop .mc-tip-list li { margin: 0; }
#mc-clients-table.mc-clients-table.data-table td,
#mc-clients-table tbody td {
  height: auto !important;
  min-height: 56px;
  padding: 10px 10px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  line-height: 1.25;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 80%, transparent);
}
#mc-clients-table tbody td[data-mc-col="cliente"],
#mc-clients-table tbody td[data-mc-col="etiquetas"],
#mc-clients-table tbody td[data-mc-col="cumplimiento"] {
  white-space: normal;
  overflow: visible;
}
#mc-clients-table td[data-mc-col="cliente"] {
  overflow: visible;
}
#mc-clients-table .mc-check-col,
#mc-clients-table .mc-kebab-col {
  width: 34px;
  padding-left: 6px;
  padding-right: 4px;
  text-align: center;
  overflow: visible;
}
#mc-clients-table .mc-check-col input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent, #e85d4c);
  cursor: pointer;
}
#mc-clients-table .mc-row-actions {
  justify-content: center;
  overflow: visible;
}
#mc-clients-table .roster-kebab-btn {
  width: 26px;
  height: 26px;
  color: var(--accent, #e85d4c);
}
#mc-clients-table .mc-row-menu {
  min-width: 220px;
  right: auto;
  left: 0;
  z-index: 30;
}
.roster-actions-menu.mc-row-menu.is-fixed-open {
  position: fixed !important;
  right: auto;
  z-index: 220;
  max-height: min(70vh, 360px);
  overflow-y: auto;
}
#mc-clients-table .mc-row-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
}
#mc-clients-table .mc-row-menu button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#mc-clients-table tbody tr.mc-client-row.is-checked {
  background: color-mix(in srgb, var(--accent, #e85d4c) 8%, transparent);
}
#mc-clients-table tbody tr.mc-client-row:hover {
  background: color-mix(in srgb, var(--sys-surface-2) 55%, transparent);
}
#mc-clients-table .mc-client-meta .name,
#mc-clients-table .mc-client-meta .email {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.mc-bulk-bar {
  position: sticky;
  bottom: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface) 92%, #000);
  box-shadow: 0 -8px 24px rgba(0,0,0,.25);
}
.mc-bulk-bar[hidden] { display: none !important; }
.mc-bulk-count {
  font-weight: 700;
  font-size: 0.9rem;
  margin-right: 4px;
}
.mc-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
}
.mc-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  appearance: none;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.mc-bulk-btn:hover {
  border-color: color-mix(in srgb, var(--accent, #e85d4c) 45%, var(--hairline));
}
.mc-bulk-btn.is-danger {
  color: #f87171;
  border-color: color-mix(in srgb, #f87171 40%, var(--hairline));
}
.mc-bulk-clear { margin-left: auto; }

.mc-lifecycle-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0;
}
.mc-lifecycle-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: -1px;
  padding: 10px 14px;
}
.mc-lifecycle-tab.is-active {
  border-bottom-color: var(--accent, #e85d4c);
  color: var(--text);
}
.mc-lifecycle-count {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.75;
  font-weight: 500;
}
.mc-clients-toolbar {
  position: relative;
  align-items: center;
  gap: 8px;
}
.mc-clients-search { flex: 1 1 240px; min-width: 200px; }
.mc-columns-wrap, .mc-add-wrap { position: relative; }
.mc-columns-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent, #e85d4c) 55%, var(--hairline));
  color: var(--accent, #e85d4c);
  cursor: pointer;
}
#mc-columns-menu.mc-columns-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  z-index: 50;
  width: 232px;
  max-height: min(68vh, 380px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--sys-surface, #12141a);
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
  text-transform: none;
}
#mc-columns-menu .mc-col-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 0;
  padding: 5px 8px;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.15;
  cursor: pointer;
  text-transform: none;
}
#mc-columns-menu .mc-col-toggle span {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: none;
  letter-spacing: 0;
}
#mc-columns-menu .mc-col-toggle.is-locked { opacity: 0.55; cursor: default; }
#mc-columns-menu .mc-col-toggle:hover {
  background: color-mix(in srgb, var(--sys-surface-2) 80%, transparent);
}
#mc-columns-menu .mc-col-toggle input[type="checkbox"],
#mc-columns-menu .mc-col-toggle input[role="switch"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 28px !important;
  height: 16px !important;
  min-width: 28px !important;
  min-height: 16px !important;
  max-width: 28px !important;
  max-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  border: 1px solid var(--hairline);
  position: relative;
  cursor: pointer;
  flex: 0 0 28px !important;
  box-shadow: none;
  transition: background .15s ease;
}
#mc-columns-menu .mc-col-toggle input[type="checkbox"]::before,
#mc-columns-menu .mc-col-toggle input[role="switch"]::before {
  content: none !important;
  display: none !important;
}
#mc-columns-menu .mc-col-toggle input[type="checkbox"]::after,
#mc-columns-menu .mc-col-toggle input[role="switch"]::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
#mc-columns-menu .mc-col-toggle input[type="checkbox"]:checked,
#mc-columns-menu .mc-col-toggle input[role="switch"]:checked {
  background: var(--accent, #e85d4c);
  border-color: transparent;
}
#mc-columns-menu .mc-col-toggle input[type="checkbox"]:checked::after,
#mc-columns-menu .mc-col-toggle input[role="switch"]:checked::after {
  transform: translateX(12px);
}
#mc-columns-menu .mc-col-toggle input[type="checkbox"]:disabled,
#mc-columns-menu .mc-col-toggle input[role="switch"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.mc-add-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 240px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--sys-surface, #12141a);
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.mc-add-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text);
  font-size: 0.9rem;
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.mc-add-item:hover { background: color-mix(in srgb, var(--sys-surface-2) 80%, transparent); }
.mc-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  cursor: pointer;
}
.mc-add-plus {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #e85d4c) 85%, #000);
  color: #fff;
  font-weight: 800;
  line-height: 1;
}
.mc-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  cursor: pointer;
  flex: 0 0 auto;
}
.mc-filter-btn[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent, #e85d4c) 55%, var(--hairline));
  color: var(--accent, #e85d4c);
}
.mc-clients-toolbar .mc-filter-btn + .mc-add-wrap,
.mc-clients-toolbar .mc-add-wrap {
  margin-left: 0;
}
.mc-clients-toolbar {
  gap: 8px;
}
.mc-clients-toolbar .toolbar-spacer {
  flex: 1 1 auto;
}

.mc-filter-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 80;
  width: min(420px, 100vw);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sys-surface, #0f1117);
  border-left: 1px solid var(--hairline);
  box-shadow: -20px 0 48px rgba(0,0,0,.45);
}
.mc-filter-panel[hidden] { display: none !important; }
.mc-filter-head,
.mc-filter-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface) 92%, #000);
}
.mc-filter-foot {
  border-bottom: 0;
  border-top: 1px solid var(--hairline);
  margin-top: auto;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.mc-filter-clear-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
}
.mc-filter-clear-btn:hover { color: var(--text); }
.mc-filter-clear-btn .nav-ico { width: 16px; height: 16px; }
.mc-filter-head h3 { margin: 0 0 6px; font-size: 1.08rem; }
.mc-filter-head .hint { margin: 0; line-height: 1.35; max-width: 32ch; }
.mc-filter-x { cursor: pointer; }
.mc-filter-body {
  overflow: auto;
  padding: 4px 0 20px;
  flex: 1;
}
.mc-filter-block {
  margin: 0;
  padding: 18px 20px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 85%, transparent);
}
.mc-filter-block:last-child { border-bottom: 0; }
.mc-filter-block-head { margin-bottom: 12px; }
.mc-filter-block-head h4 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
}
.mc-filter-block-head .hint { margin: 0; font-size: 0.8rem; line-height: 1.35; }

.mc-filter-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--sys-surface-2, #1a1d26);
  margin-bottom: 12px;
}
.mc-filter-search:focus-within {
  border-color: color-mix(in srgb, var(--accent, #e85d4c) 55%, var(--hairline));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #e85d4c) 18%, transparent);
}
.mc-filter-search input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text);
  min-width: 0;
  outline: none;
  font: inherit;
}

.mc-filter-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  min-height: 36px;
}
.mc-tag-btn,
.mc-chip-btn,
.mc-choice-btn {
  appearance: none;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface-2) 70%, transparent);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .08s ease;
}
.mc-tag-btn:hover,
.mc-chip-btn:hover,
.mc-choice-btn:hover {
  border-color: color-mix(in srgb, var(--accent, #e85d4c) 45%, var(--hairline));
  transform: translateY(-1px);
}
.mc-tag-btn.is-on,
.mc-chip-btn.is-on,
.mc-chip-btn[aria-pressed="true"],
.mc-choice-btn.is-on {
  border-color: transparent;
  background: color-mix(in srgb, var(--accent, #e85d4c) 22%, transparent);
  color: color-mix(in srgb, var(--accent, #e85d4c) 80%, #fff);
}

.mc-filter-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  appearance: none;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  padding: 10px 12px;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.35;
  cursor: pointer;
}
.mc-filter-toggle-row .mc-toggle-dot {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid var(--hairline);
  background: transparent;
}
.mc-filter-toggle-row.is-on,
.mc-filter-toggle-row[aria-pressed="true"] {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent, #e85d4c) 45%, var(--hairline));
  background: color-mix(in srgb, var(--accent, #e85d4c) 10%, transparent);
}
.mc-filter-toggle-row.is-on .mc-toggle-dot,
.mc-filter-toggle-row[aria-pressed="true"] .mc-toggle-dot {
  background: var(--accent, #e85d4c);
  border-color: transparent;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, #fff 25%, transparent);
}

.mc-filter-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.mc-choice-btn {
  border-radius: 12px;
  text-align: center;
  padding: 10px 12px;
}
.mc-filter-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mc-check-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface-2) 70%, transparent);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.mc-check-chip:hover {
  border-color: color-mix(in srgb, var(--accent, #e85d4c) 45%, var(--hairline));
}
.mc-check-chip:has(input:checked) {
  border-color: transparent;
  background: color-mix(in srgb, var(--accent, #e85d4c) 22%, transparent);
  color: color-mix(in srgb, var(--accent, #e85d4c) 80%, #fff);
}
.mc-check-chip input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent, #e85d4c);
  cursor: pointer;
}
.mc-coach-combo {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.mc-coach-combo[hidden] { display: none !important; }
.mc-coach-list {
  display: grid;
  gap: 4px;
  max-height: 180px;
  overflow: auto;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--sys-surface-2, #1a1d26);
}
.mc-coach-opt {
  appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
.mc-coach-opt:hover,
.mc-coach-opt.is-on {
  background: color-mix(in srgb, var(--accent, #e85d4c) 18%, transparent);
}
.mc-date-trigger-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mc-date-trigger-row .mc-date-trigger { flex: 1 1 auto; min-width: 0; }
.mc-date-field-clear {
  appearance: none;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.mc-date-field-clear:hover {
  color: #f87171;
  border-color: color-mix(in srgb, #f87171 45%, var(--hairline));
}
.mc-date-foot-slim {
  justify-content: flex-start;
}
.mc-date-foot-slim .mc-date-summary {
  width: 100%;
}

.mc-filter-select,
.mc-filter-input {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--sys-surface-2, #1a1d26);
  color: var(--text);
  padding: 8px 12px;
  font: inherit;
}
.mc-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mc-client-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.mc-client-cell .avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent, #e85d4c) 22%, transparent);
  color: var(--accent, #e85d4c);
}
.mc-client-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
}
.mc-client-meta .name {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
}
.mc-client-meta .email,
.mc-client-meta .email.hint {
  display: block !important;
  font-size: 0.7rem !important;
  line-height: 1.35 !important;
  color: var(--muted);
  white-space: nowrap;
  max-height: none !important;
  height: auto !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-app-dot {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}
.mc-app-dot .nav-ico { width: 14px; height: 14px; }
.mc-app-dot.is-on {
  background: color-mix(in srgb, #22c55e 28%, transparent);
  color: #4ade80;
}
.mc-app-dot.is-off {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
}
.mc-plan-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--hairline);
}
.mc-plan-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.mc-plan-status.is-ok { color: #4ade80; }
.mc-plan-status.is-muted { color: var(--muted); }
.mc-compliance {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.mc-comp-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.mc-comp-pill.is-up {
  color: #22c55e;
  border-color: color-mix(in srgb, #22c55e 35%, var(--hairline));
  background: color-mix(in srgb, #22c55e 12%, transparent);
}
.mc-comp-pill.is-down {
  color: #f87171;
  border-color: color-mix(in srgb, #f87171 35%, var(--hairline));
  background: color-mix(in srgb, #f87171 12%, transparent);
}
.mc-comp-arrow {
  font-size: 0.78rem;
  line-height: 1;
}

.mc-modal .modal-body { max-height: min(70vh, 640px); overflow: auto; }
.mc-form-section {
  margin: 8px 0 12px;
  font-size: 0.95rem;
}
.mc-gender-row,
.mc-service-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}
.mc-pros-checks {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--sys-surface-2, #1a1d26);
}
.mc-pros-checks .mc-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mc-invite-result {
  display: grid;
  gap: 10px;
}
.mc-invite-preview-frame {
  width: 100%;
  min-height: 360px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: #fff;
}
.mc-invite-link-body { display: grid; gap: 14px; }
.mc-invite-hero { text-align: center; padding: 8px 0 4px; }
.mc-invite-ico {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #e85d4c) 18%, transparent);
  color: var(--accent, #e85d4c);
  margin-bottom: 8px;
}
.mc-invite-hero h4 { margin: 0 0 6px; }
.mc-link-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--sys-surface-2, #1a1d26);
}
.mc-link-box input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text);
  min-width: 0;
}
body.mc-filter-open { overflow: hidden; }
@media (max-width: 720px) {
  .mc-filter-panel { width: 100vw; }
  .mc-add-btn { padding-inline: 12px; }
  .mc-filter-choice-grid { grid-template-columns: 1fr; }
}

/* ── Fecha activación (date range picker) ───────────────────────── */
.mc-date-wrap { position: relative; }
.mc-date-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--sys-surface-2, #1a1d26);
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}
.mc-date-trigger:hover,
.mc-date-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent, #e85d4c) 50%, var(--hairline));
}
.mc-date-trigger .is-filled,
#mc-filter-activation-label.is-filled {
  color: var(--text);
  font-weight: 600;
}
.mc-date-popover {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 120;
  width: min(720px, calc(100vw - 24px));
  max-height: min(90vh, 560px);
  overflow: auto;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0;
  border-radius: 16px;
  border: 1px solid var(--hairline);
  background: var(--sys-surface, #12141a);
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.mc-date-popover[hidden] { display: none !important; }
.mc-date-presets {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface-2) 55%, transparent);
}
.mc-date-presets button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent, #e85d4c);
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}
.mc-date-presets button:hover {
  background: color-mix(in srgb, var(--accent, #e85d4c) 14%, transparent);
}
.mc-date-cals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px 16px 8px;
}
.mc-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.9rem;
}
.mc-cal-nav {
  appearance: none;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--accent, #e85d4c);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.mc-cal-nav-spacer { width: 28px; height: 28px; }
.mc-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 700;
}
.mc-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.mc-cal-day {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  min-height: 34px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.mc-cal-day.is-out { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.mc-cal-day:hover { background: color-mix(in srgb, var(--accent, #e85d4c) 16%, transparent); }
.mc-cal-day.is-in {
  background: color-mix(in srgb, var(--accent, #e85d4c) 18%, transparent);
  border-radius: 0;
}
.mc-cal-day.is-start,
.mc-cal-day.is-end {
  background: var(--accent, #e85d4c);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
}
.mc-date-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--hairline);
}
.mc-date-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--sys-surface-2, #1a1d26);
  font-size: 0.85rem;
  color: var(--text);
}
.mc-date-foot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.mc-date-clear-btn {
  border-color: color-mix(in srgb, #f87171 45%, var(--hairline)) !important;
  color: #f87171 !important;
}
@media (max-width: 720px) {
  .mc-date-popover {
    grid-template-columns: 1fr;
    width: calc(100vw - 16px);
  }
  .mc-date-presets {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }
  .mc-date-cals { grid-template-columns: 1fr; }
}

/* ── Mis clientes: hub modal (clic columna Cliente) ───────────────────── */
#mc-clients-table td[data-mc-col="cliente"] .mc-client-open {
  width: 100%;
  margin: -4px -6px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
#mc-clients-table td[data-mc-col="cliente"] .mc-client-open:hover,
#mc-clients-table td[data-mc-col="cliente"] .mc-client-open:focus-visible {
  background: color-mix(in srgb, var(--accent, #e85d4c) 16%, var(--sys-surface, #171f1c));
  border-color: color-mix(in srgb, var(--accent, #e85d4c) 38%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, #e85d4c) 18%, transparent);
  transform: translateY(-1px);
  outline: none;
}
#mc-clients-table td[data-mc-col="cliente"] .mc-client-open:hover .name,
#mc-clients-table td[data-mc-col="cliente"] .mc-client-open:focus-visible .name {
  color: color-mix(in srgb, var(--accent, #e85d4c) 72%, var(--text));
}

.modal-dialog.mc-client-hub-dialog {
  --modal-w: min(1240px, calc(100vw - 24px));
  min-width: min(980px, calc(100vw - 24px));
  width: var(--modal-w);
  max-width: var(--modal-w);
  max-height: min(88vh, 820px);
  padding: 0;
  overflow: hidden;
  background: var(--sys-surface, #171f1c);
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  color: var(--text);
  z-index: 12000;
}

/* Primer open: sticky tabs/thead del roster pueden componer encima del
   <dialog> si aún no está en top-layer. Aislar y bajar z; kebab hub = 20000. */
body.is-hub-open .page-header,
html.is-hub-open .page-header {
  z-index: 0;
}
body.is-hub-open #tab-usuarios,
html.is-hub-open #tab-usuarios {
  isolation: isolate;
  z-index: 0;
}
body.is-hub-open .centro-subnav,
body.is-hub-open .usuarios-subnav,
body.is-hub-open #tab-usuarios .usuarios-chrome .centro-subnav {
  z-index: 0;
}
body.is-hub-open .usuarios-roster-wrap .usuarios-roster-table thead th,
body.is-hub-open #mc-clients-table thead th,
body.is-hub-open .data-table thead th {
  z-index: 0;
}
.mc-hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hairline);
  background:
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--accent, #e85d4c) 12%, transparent),
      transparent 55%
    ),
    var(--sys-surface-2, #1e2824);
  flex: 0 0 auto;
}
.mc-hub-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.mc-hub-identity .avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent, #e85d4c) 24%, transparent);
  color: var(--accent, #e85d4c);
  border: 1px solid color-mix(in srgb, var(--accent, #e85d4c) 35%, transparent);
}
.mc-hub-identity-text {
  min-width: 0;
}
.mc-hub-identity-text h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-hub-identity-text .hint {
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-hub-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.mc-hub-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.mc-hub-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  border-right: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface-2, #1e2824) 88%, #000);
  overflow-y: auto;
  position: relative;
  z-index: 1;
}
.mc-hub-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.mc-hub-tab:hover {
  background: color-mix(in srgb, var(--accent, #e85d4c) 10%, transparent);
}
.mc-hub-tab.is-active {
  background: color-mix(in srgb, var(--accent, #e85d4c) 18%, var(--sys-surface));
  border-color: color-mix(in srgb, var(--accent, #e85d4c) 40%, transparent);
}
.mc-hub-tab-label {
  font-size: 0.86rem;
  font-weight: 700;
}
.mc-hub-tab-sub {
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--muted);
}
.mc-hub-tab.is-active .mc-hub-tab-sub {
  color: color-mix(in srgb, var(--accent, #e85d4c) 55%, var(--muted));
}
.mc-hub-main {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overflow-x: hidden;
  padding: 16px 18px 20px;
  background: var(--sys-surface, #171f1c);
}
.mc-hub-pane[hidden] {
  display: none !important;
}
.mc-hub-stub {
  max-width: 420px;
  padding: 28px 8px;
}
.mc-hub-stub h4 {
  margin: 0 0 8px;
  font-size: 1rem;
}
.mc-hub-stub p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.mc-hub-cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.mc-hub-cal-toolbar-left,
.mc-hub-cal-toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.mc-hub-cal-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mc-hub-cal-nav .mc-hub-cal-chev {
  min-width: 32px;
  padding-inline: 8px;
  font-size: 1.1rem;
  line-height: 1;
}
#mc-hub-cal-label {
  margin: 0;
  min-width: 7rem;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--text);
}
.mc-hub-view-switch {
  display: inline-flex;
  align-items: stretch;
  padding: 2px;
  border-radius: 10px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.08));
  background: color-mix(in srgb, var(--sys-surface-2, #1e2824) 80%, transparent);
}
.mc-hub-view-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.mc-hub-view-btn:hover {
  color: var(--text);
}
.mc-hub-view-btn.is-active {
  background: color-mix(in srgb, var(--accent, #e85d4c) 22%, var(--sys-surface));
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #e85d4c) 35%, transparent);
}
.mc-hub-filter-wrap {
  position: relative;
  z-index: 8;
}
.mc-hub-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mc-hub-filter-btn .nav-ico {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}
.mc-hub-filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  min-width: 220px;
  width: max-content;
  max-width: min(280px, 70vw);
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--sys-surface-2, #1e2824);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.mc-hub-filter-panel.is-open {
  z-index: 90;
}
/* Anclado al dialog (top layer) — no a body, o queda detrás del modal. */
.mc-hub-filter-panel.is-fixed-open {
  position: fixed !important;
  right: auto !important;
  z-index: 50;
}
.mc-hub-filter-panel[hidden] {
  display: none !important;
}
.mc-hub-filter-chip {
  appearance: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.1));
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.mc-hub-filter-chip:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent, #e85d4c) 35%, transparent);
}
.mc-hub-filter-chip.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent, #e85d4c) 22%, var(--sys-surface));
  border-color: color-mix(in srgb, var(--accent, #e85d4c) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #e85d4c) 25%, transparent);
}
#mc-hub-filter-all {
  align-self: stretch;
  width: 100%;
}
.mc-hub-filter-chips {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}
.mc-hub-obs-btn .nav-ico,
#mc-hub-task-open .nav-ico {
  width: 14px;
  height: 14px;
}
#mc-hub-task-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mc-hub-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 6px;
}
.mc-hub-cal-weekdays[hidden] {
  display: none !important;
}
.mc-hub-cal-weekdays span {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 0;
}
.mc-hub-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.mc-hub-cal-grid.is-week {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.mc-hub-cal-grid.is-week .mc-hub-cal-cell {
  min-height: 140px;
}
.mc-hub-cal-grid.is-day {
  grid-template-columns: 1fr;
}
.mc-hub-cal-grid.is-day .mc-hub-cal-dayfocus {
  min-height: 220px;
  padding: 14px 16px;
}
.mc-hub-cal-cell {
  min-height: 78px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--hairline) 80%, transparent);
  background: color-mix(in srgb, var(--sys-surface-2, #1e2824) 70%, transparent);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-hub-cal-cell[data-iso] {
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.mc-hub-cal-cell[data-iso]:hover {
  border-color: color-mix(in srgb, var(--accent, #e85d4c) 40%, var(--hairline));
  background: color-mix(in srgb, var(--sys-surface-2, #1e2824) 55%, var(--accent, #e85d4c) 8%);
}
.mc-hub-cal-cell[data-iso]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #e85d4c) 70%, transparent);
  outline-offset: 1px;
}
.mc-hub-cal-cell.is-empty {
  background: transparent;
  border-color: transparent;
  min-height: 78px;
  cursor: default;
}
.mc-hub-cal-cell.is-other-month {
  opacity: 0.55;
}
.mc-hub-cal-cell.is-today {
  border-color: color-mix(in srgb, var(--accent, #e85d4c) 55%, var(--hairline));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #e85d4c) 28%, transparent);
}
.mc-hub-cal-daynum {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}
.mc-hub-cal-cell.is-today .mc-hub-cal-daynum {
  color: var(--accent, #e85d4c);
}
.mc-hub-cal-chips {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
}
.mc-hub-cal-chip {
  display: block;
  width: 100%;
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1a120f;
}
button.mc-hub-cal-chip.is-session {
  cursor: pointer;
}
button.mc-hub-cal-chip.is-session:hover {
  filter: brightness(1.06);
}
button.mc-hub-cal-chip.is-session:focus-visible {
  outline: 2px solid color-mix(in srgb, #fff 55%, transparent);
  outline-offset: 1px;
}
button.mc-hub-cal-chip.is-local {
  cursor: pointer;
}
button.mc-hub-cal-chip.is-local:hover {
  filter: brightness(1.06);
}
button.mc-hub-cal-chip.is-local:focus-visible {
  outline: 2px solid color-mix(in srgb, #fff 55%, transparent);
  outline-offset: 1px;
}
.mc-hub-cal-chip.tone-accent {
  background: color-mix(in srgb, var(--accent, #e85d4c) 88%, #fff);
  color: #1a120f;
}
.mc-hub-cal-chip.tone-mint {
  background: color-mix(in srgb, #34d399 75%, #0b1a14);
  color: #062016;
}
.mc-hub-cal-chip.tone-amber {
  background: color-mix(in srgb, #fbbf24 82%, #1a1200);
  color: #1a1200;
}
.mc-hub-cal-chip.tone-entren {
  background: color-mix(in srgb, #f97316 88%, #fff);
  color: #1a1008;
}
.mc-hub-cal-chip.tone-cardio {
  background: color-mix(in srgb, #f43f5e 85%, #fff);
  color: #1a080c;
}
.mc-hub-cal-chip.tone-nutri {
  background: color-mix(in srgb, #14b8a6 82%, #0b1a18);
  color: #04201c;
}
.mc-hub-cal-chip.tone-doc {
  background: color-mix(in srgb, #3b82f6 82%, #0b1220);
  color: #061018;
}
.mc-hub-cal-chip.tone-evo {
  background: color-mix(in srgb, #22d3ee 80%, #0b1a1e);
  color: #042028;
}
.mc-hub-cal-chip.tone-evo-foto {
  background: color-mix(in srgb, #67e8f9 72%, #0b1a1e);
  color: #042028;
}
.mc-hub-cal-chip.tone-sesion {
  background: color-mix(in srgb, #a78bfa 85%, #12081f);
  color: #14081f;
}
.mc-hub-cal-chip.tone-programa {
  background: color-mix(in srgb, #a8a29e 78%, #1c1814);
  color: #1a1612;
}
.mc-hub-cal-chip.tone-form {
  background: color-mix(in srgb, #4ade80 80%, #0b1a10);
  color: #062010;
}
.mc-hub-cal-note {
  margin: 12px 0 0;
  font-size: 0.75rem;
}

/* Observaciones modal */
.modal-dialog.mc-hub-obs-dialog {
  --modal-w: min(820px, calc(100vw - 32px));
  width: var(--modal-w);
  max-width: var(--modal-w);
  max-height: min(82vh, 640px);
  padding: 0;
  overflow: hidden;
  background: var(--sys-surface, #171f1c);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  color: var(--text);
}
.mc-hub-obs-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 18px 16px;
  min-height: 0;
}
.mc-hub-obs-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mc-hub-obs-search {
  flex: 1 1 220px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface-2, #1e2824) 75%, transparent);
}
.mc-hub-obs-search .nav-ico {
  width: 16px;
  height: 16px;
  opacity: 0.65;
  flex: 0 0 auto;
}
.mc-hub-obs-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  padding: 9px 0;
  outline: none;
}
.mc-hub-obs-table-wrap {
  overflow: auto;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  max-height: min(42vh, 360px);
}
.mc-hub-obs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.mc-hub-obs-table th,
.mc-hub-obs-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.mc-hub-obs-table th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: color-mix(in srgb, var(--sys-surface-2, #1e2824) 70%, transparent);
  position: sticky;
  top: 0;
  z-index: 1;
}
.mc-hub-obs-table tr:last-child td {
  border-bottom: 0;
}
.mc-hub-obs-empty td {
  text-align: center;
  color: var(--muted);
  padding: 28px 12px;
}
.mc-hub-obs-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent, #e85d4c) 18%, transparent);
  color: color-mix(in srgb, var(--accent, #e85d4c) 70%, var(--text));
  border: 1px solid color-mix(in srgb, var(--accent, #e85d4c) 28%, transparent);
}
.mc-hub-obs-footer {
  display: flex;
  justify-content: flex-end;
}

/* + Tarea modal — card grid */
.modal-dialog.mc-hub-task-dialog,
.modal-dialog.mc-hub-task-pick-dialog {
  --modal-w: min(720px, calc(100vw - 32px));
  width: var(--modal-w);
  max-width: var(--modal-w);
  max-height: min(92vh, 860px);
  padding: 0;
  overflow: hidden;
  background: var(--sys-surface, #171f1c);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  color: var(--text);
}
.modal-dialog.mc-hub-task-pick-dialog {
  --modal-w: min(560px, calc(100vw - 32px));
}
.mc-hub-task-body,
.mc-hub-task-pick-body {
  padding: 0 18px 8px;
  overflow: auto;
  max-height: min(68vh, 620px);
}

.mc-hub-task-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 22px;
  margin-bottom: 10px;
}
.mc-hub-task-date-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}
.mc-hub-task-date-field > label {
  margin: 0 !important;
  display: block !important;
}
#mc-hub-task-dialog #mc-hub-task-date {
  width: auto !important;
  max-width: max-content !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}
.mc-hub-task-repeat-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center !important;
  gap: 10px 14px;
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 2px;
}
.mc-hub-task-repeat-q {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.mc-hub-repeat-switch {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--sys-surface-2, #1e2824) 80%, transparent);
  padding: 2px;
}
.mc-hub-repeat-seg {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  margin: 0;
}
.mc-hub-repeat-seg:hover { color: var(--text); }
.mc-hub-repeat-seg.is-active {
  background: color-mix(in srgb, var(--accent, #e85d4c) 88%, #fff);
  color: #fff;
}
#mc-hub-repeat-panel.mc-hub-task-repeat-opts {
  margin: 4px 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface-2, #1e2824) 70%, transparent);
  display: grid;
  gap: 12px;
}
#mc-hub-repeat-panel.hidden,
#mc-hub-repeat-panel[hidden],
#mc-hub-task-detail.hidden,
#mc-hub-task-detail[hidden],
#mc-hub-task-summary.hidden,
#mc-hub-task-summary[hidden] {
  display: none !important;
}
.mc-hub-task-days {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.mc-hub-day-toggle {
  appearance: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.mc-hub-day-toggle:hover {
  border-color: color-mix(in srgb, var(--accent, #e85d4c) 45%, var(--hairline));
}
.mc-hub-day-toggle[aria-pressed="true"] {
  background: color-mix(in srgb, var(--text) 88%, transparent);
  border-color: transparent;
  color: var(--sys-surface, #171f1c);
}
.mc-hub-task-every { max-width: 160px; }
#mc-hub-task-dialog .mc-hub-task-every > label {
  margin: 0 0 6px !important;
  display: block !important;
}
#mc-hub-task-dialog .mc-hub-task-every input,
#mc-hub-task-dialog .mc-hub-end-line input[type="number"] {
  width: 64px !important;
  max-width: 64px !important;
  flex: 0 0 auto !important;
  font: inherit;
}
#mc-hub-task-dialog .mc-hub-task-end {
  display: grid !important;
  gap: 10px;
}
#mc-hub-task-dialog .mc-hub-end-line {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}
#mc-hub-task-dialog .mc-hub-end-line > label {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto !important;
}
#mc-hub-task-dialog .mc-hub-end-line > input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  accent-color: var(--accent, #e85d4c);
}
#mc-hub-task-dialog .mc-hub-end-line > input[type="date"] {
  width: 11.5ch !important;
  min-width: 11.5ch !important;
  max-width: 14ch !important;
  flex: 0 0 auto !important;
  font: inherit;
}
#mc-hub-task-dialog .mc-hub-end-line .mc-hub-end-unit {
  flex: 0 0 auto;
  font-size: 0.88rem;
  color: var(--text);
}
#mc-hub-task-dialog .mc-hub-end-line input:disabled { opacity: 0.45; }
.mc-hub-task-until-hint {
  margin: -2px 0 0 28px;
  font-size: 0.72rem;
}
#mc-hub-task-dialog input[type="radio"],
#mc-hub-task-dialog input[type="checkbox"],
#mc-hub-task-pick-dialog input[type="radio"],
#mc-hub-task-pick-dialog input[type="checkbox"] {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}
#mc-hub-task-detail.mc-hub-task-detail {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface-2, #1e2824) 55%, transparent);
}
#mc-hub-task-detail .mc-hub-task-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
#mc-hub-task-detail[data-tone="entren"] { --mc-hub-tone: #f97316; }
#mc-hub-task-detail[data-tone="cardio"] { --mc-hub-tone: #f43f5e; }
#mc-hub-task-detail[data-tone="video"] { --mc-hub-tone: #fb923c; }
#mc-hub-task-detail[data-tone="nutri"] { --mc-hub-tone: #14b8a6; }
#mc-hub-task-detail[data-tone="doc"] { --mc-hub-tone: #3b82f6; }
#mc-hub-task-detail[data-tone="evo"] { --mc-hub-tone: #22d3ee; }
#mc-hub-task-detail[data-tone="sesion"] { --mc-hub-tone: #a78bfa; }
#mc-hub-task-detail[data-tone="programa"] { --mc-hub-tone: #a8a29e; }
#mc-hub-task-detail[data-tone="mensaje"] { --mc-hub-tone: #c084fc; }
#mc-hub-task-detail[data-tone="form"] { --mc-hub-tone: #4ade80; }
#mc-hub-task-detail[data-tone="wellness"] { --mc-hub-tone: #a855f7; }
#mc-hub-task-detail[data-tone="fisio"] { --mc-hub-tone: #38bdf8; }

.mc-hub-task-types-label {
  margin: 8px 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mc-hub-task-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 720px) {
  .mc-hub-task-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.mc-hub-task-type-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface-2, #1e2824) 75%, transparent);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.mc-hub-task-type-card:hover {
  border-color: color-mix(in srgb, var(--mc-hub-tone, var(--accent, #e85d4c)) 40%, var(--hairline));
  background: color-mix(in srgb, var(--mc-hub-tone, var(--accent, #e85d4c)) 10%, var(--sys-surface-2, #1e2824));
}
.mc-hub-task-type-card.is-selected {
  border-color: color-mix(in srgb, var(--mc-hub-tone, var(--accent, #e85d4c)) 65%, transparent);
  background: color-mix(in srgb, var(--mc-hub-tone, var(--accent, #e85d4c)) 16%, var(--sys-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc-hub-tone, var(--accent, #e85d4c)) 28%, transparent);
}
.mc-hub-task-type-card[data-tone="entren"] { --mc-hub-tone: #f97316; }
.mc-hub-task-type-card[data-tone="cardio"] { --mc-hub-tone: #f43f5e; }
.mc-hub-task-type-card[data-tone="video"] { --mc-hub-tone: #fb923c; }
.mc-hub-task-type-card[data-tone="nutri"] { --mc-hub-tone: #14b8a6; }
.mc-hub-task-type-card[data-tone="doc"] { --mc-hub-tone: #3b82f6; }
.mc-hub-task-type-card[data-tone="evo"] { --mc-hub-tone: #22d3ee; }
.mc-hub-task-type-card[data-tone="sesion"] { --mc-hub-tone: #a78bfa; }
.mc-hub-task-type-card[data-tone="programa"] { --mc-hub-tone: #a8a29e; }
.mc-hub-task-type-card[data-tone="mensaje"] { --mc-hub-tone: #c084fc; }
.mc-hub-task-type-card[data-tone="form"] { --mc-hub-tone: #4ade80; }
.mc-hub-task-type-card[data-tone="wellness"] { --mc-hub-tone: #a855f7; }
.mc-hub-task-type-card[data-tone="fisio"] { --mc-hub-tone: #38bdf8; }
.mc-hub-task-type-card.is-pending {
  opacity: 0.72;
}
.mc-hub-task-pending-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--mc-hub-tone, #f97316) 85%, #fff);
  background: color-mix(in srgb, var(--mc-hub-tone, #f97316) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--mc-hub-tone, #f97316) 35%, transparent);
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1.2;
}
.mc-hub-task-pending {
  padding: 8px 2px 4px;
}
.mc-task-lib {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.mc-task-lib-hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}
.mc-task-lib-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mc-task-lib-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  margin: 0;
}
.mc-task-lib-search-ico {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  opacity: 0.55;
  pointer-events: none;
}
.mc-task-lib-search input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 32px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface, #171f1c) 88%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}
.mc-task-lib-search input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent, #e85d4c) 55%, var(--hairline));
}
.mc-task-lib-edit {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 12px;
}
.mc-task-lib-edit:disabled,
.mc-task-lib-edit[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}
.mc-task-lib-create {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent, #e85d4c) 45%, var(--hairline));
  background: color-mix(in srgb, var(--accent, #e85d4c) 16%, transparent);
  color: var(--accent, #e85d4c);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.mc-task-lib-create:hover {
  background: color-mix(in srgb, var(--accent, #e85d4c) 24%, transparent);
}
.mc-task-lib-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  padding: 2px;
  margin: 0 -2px;
}
.mc-task-lib-item {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface-2, #1e2824) 70%, transparent);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.mc-task-lib-item:hover {
  border-color: color-mix(in srgb, var(--accent, #e85d4c) 35%, var(--hairline));
  background: color-mix(in srgb, var(--accent, #e85d4c) 8%, var(--sys-surface-2, #1e2824));
}
.mc-task-lib-item.is-selected {
  border-color: var(--accent, #e85d4c);
  background: color-mix(in srgb, var(--accent, #e85d4c) 14%, var(--sys-surface, #171f1c));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #e85d4c) 35%, transparent);
}
.mc-task-lib-item strong {
  font-size: 0.86rem;
  font-weight: 650;
}
.mc-task-lib-item strong mark {
  background: color-mix(in srgb, var(--accent, #e85d4c) 28%, transparent);
  color: inherit;
  border-radius: 3px;
}
.mc-task-lib-meta {
  font-size: 0.72rem;
  color: var(--muted);
}
.mc-task-lib-empty {
  margin: 4px 2px 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.mc-hub-task-form-hint {
  margin: 0 0 10px;
}
.mc-hub-task-type-ico {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mc-hub-task-type-ico .nav-ico {
  width: 18px;
  height: 18px;
}
.mc-hub-task-type-ico.tone-accent {
  background: color-mix(in srgb, var(--accent, #e85d4c) 28%, transparent);
  color: var(--accent, #e85d4c);
}
.mc-hub-task-type-ico.tone-mint {
  background: color-mix(in srgb, #34d399 28%, transparent);
  color: #6ee7b7;
}
.mc-hub-task-type-ico.tone-amber {
  background: color-mix(in srgb, #fbbf24 28%, transparent);
  color: #fcd34d;
}
.mc-hub-task-type-ico.tone-entren {
  background: color-mix(in srgb, #f97316 28%, transparent);
  color: #fb923c;
}
.mc-hub-task-type-ico.tone-cardio {
  background: color-mix(in srgb, #f43f5e 28%, transparent);
  color: #fb7185;
}
.mc-hub-task-type-ico.tone-video {
  background: color-mix(in srgb, #fb923c 28%, transparent);
  color: #fdba74;
}
.mc-hub-task-type-ico.tone-nutri {
  background: color-mix(in srgb, #14b8a6 28%, transparent);
  color: #5eead4;
}
.mc-hub-task-type-ico.tone-doc {
  background: color-mix(in srgb, #3b82f6 28%, transparent);
  color: #93c5fd;
}
.mc-hub-task-type-ico.tone-evo {
  background: color-mix(in srgb, #22d3ee 28%, transparent);
  color: #67e8f9;
}
.mc-hub-task-type-ico.tone-sesion {
  background: color-mix(in srgb, #a78bfa 28%, transparent);
  color: #c4b5fd;
}
.mc-hub-task-type-ico.tone-programa {
  background: color-mix(in srgb, #a8a29e 28%, transparent);
  color: #d6d3d1;
}
.mc-hub-task-type-ico.tone-mensaje {
  background: color-mix(in srgb, #c084fc 28%, transparent);
  color: #e9d5ff;
}
.mc-hub-task-type-ico.tone-form {
  background: color-mix(in srgb, #4ade80 28%, transparent);
  color: #86efac;
}
.mc-hub-task-type-ico.tone-wellness {
  background: color-mix(in srgb, #a855f7 28%, transparent);
  color: #d8b4fe;
}
.mc-hub-task-type-ico.tone-fisio {
  background: color-mix(in srgb, #38bdf8 28%, transparent);
  color: #7dd3fc;
}
.mc-hub-task-type-label {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
}
.mc-hub-task-type-card[data-fit-tip] {
  cursor: pointer;
}
.mc-hub-task-summary {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--mc-hub-tone, var(--accent)) 35%, var(--hairline));
  background: color-mix(in srgb, var(--mc-hub-tone, var(--accent)) 10%, var(--sys-surface-2, #1e2824));
}
.mc-hub-task-summary[hidden] {
  display: none !important;
}
.mc-hub-task-summary-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--mc-hub-tone, var(--accent));
  flex-shrink: 0;
}
.mc-hub-task-summary-type {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.mc-hub-task-summary-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
}
.mc-hub-task-summary-meta {
  font-size: 0.75rem;
  color: var(--muted);
  width: 100%;
  margin: 0;
}
.mc-hub-task-pick-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mc-hub-task-pick-head .mc-hub-task-detail-dot {
  width: 10px;
  height: 10px;
}
.mc-hub-task-pick-dialog[data-tone="entren"],
.mc-hub-task-summary[data-tone="entren"] { --mc-hub-tone: #f97316; }
.mc-hub-task-pick-dialog[data-tone="cardio"],
.mc-hub-task-summary[data-tone="cardio"] { --mc-hub-tone: #f43f5e; }
.mc-hub-task-pick-dialog[data-tone="video"],
.mc-hub-task-summary[data-tone="video"] { --mc-hub-tone: #fb923c; }
.mc-hub-task-pick-dialog[data-tone="nutri"],
.mc-hub-task-summary[data-tone="nutri"] { --mc-hub-tone: #14b8a6; }
.mc-hub-task-pick-dialog[data-tone="doc"],
.mc-hub-task-summary[data-tone="doc"] { --mc-hub-tone: #3b82f6; }
.mc-hub-task-pick-dialog[data-tone="evo"],
.mc-hub-task-summary[data-tone="evo"] { --mc-hub-tone: #22d3ee; }
.mc-hub-task-pick-dialog[data-tone="sesion"],
.mc-hub-task-summary[data-tone="sesion"] { --mc-hub-tone: #a78bfa; }
.mc-hub-task-pick-dialog[data-tone="programa"],
.mc-hub-task-summary[data-tone="programa"] { --mc-hub-tone: #a8a29e; }
.mc-hub-task-pick-dialog[data-tone="mensaje"],
.mc-hub-task-summary[data-tone="mensaje"] { --mc-hub-tone: #c084fc; }
.mc-hub-task-pick-dialog[data-tone="form"],
.mc-hub-task-summary[data-tone="form"] { --mc-hub-tone: #4ade80; }
.mc-hub-task-pick-dialog[data-tone="wellness"],
.mc-hub-task-summary[data-tone="wellness"] { --mc-hub-tone: #a855f7; }
.mc-hub-task-pick-dialog[data-tone="fisio"],
.mc-hub-task-summary[data-tone="fisio"] { --mc-hub-tone: #38bdf8; }
.mc-hub-task-detail-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--mc-hub-tone, var(--accent));
  flex-shrink: 0;
}
.mc-hub-task-detail-prompt {
  margin: 0 0 10px;
  font-size: 0.84rem;
  color: var(--muted);
}
.mc-hub-task-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.mc-hub-task-search-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}
.mc-hub-nutri-search-wrap {
  position: relative;
  margin-bottom: 10px;
}
.mc-hub-nutri-search-wrap .mc-hub-task-search-row {
  margin-bottom: 0;
}
.mc-hub-nutri-kind-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 220px;
  padding: 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-surface-2, #1c2228) 96%, #000);
  border: 1px solid color-mix(in srgb, var(--border, #3a434c) 80%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.mc-hub-nutri-kind-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text, #f3f5f7);
  font: inherit;
  font-size: 0.92rem;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.mc-hub-nutri-kind-item:hover {
  background: color-mix(in srgb, var(--primary, #f97316) 14%, transparent);
}
.mc-hub-msg-kind {
  display: inline-flex;
  gap: 6px;
  margin-top: 6px;
}
.mc-hub-msg-kind-btn {
  appearance: none;
  border: 1px solid var(--border, #3a434c);
  background: color-mix(in srgb, var(--sys-surface-2, #1c2228) 80%, transparent);
  color: var(--text, #f3f5f7);
  font: inherit;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.mc-hub-msg-kind-btn.is-active {
  border-color: color-mix(in srgb, var(--primary, #f97316) 55%, var(--border));
  background: color-mix(in srgb, var(--primary, #f97316) 16%, transparent);
}
.mc-hub-msg-audio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.mc-hub-msg-file-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin: 0;
}
#mc-hub-msg-rec.is-recording {
  border-color: color-mix(in srgb, #ef4444 60%, var(--border));
  color: #fecaca;
}
.mc-hub-msg-audio-preview {
  display: block;
  width: 100%;
  margin-top: 10px;
}
.mc-hub-msg-audio-name {
  margin: 8px 0 0;
}
#mc-hub-task-editar:disabled,
#mc-hub-task-editar[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}
/* Plantilla sesión desde hub «Añadir tarea» — detalle ≈ #planner-detail-dialog */
.hub-session-detail-dialog {
  --modal-w: min(820px, 94vw);
  --modal-max-h: min(78vh, 720px);
  width: var(--modal-w);
  max-height: var(--modal-max-h);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.hub-session-detail-dialog .hub-session-detail-header {
  position: relative;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 44px 10px 16px; /* ≈ Publicar plan */
  border-bottom: 1px solid var(--hairline, var(--border));
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--sys-surface-2) 55%, transparent);
  min-height: 0;
}
.hub-session-detail-dialog.modal-dialog .modal-header.hub-session-detail-header {
  padding: 14px 44px 10px 16px;
  background: color-mix(in srgb, var(--sys-surface-2) 55%, transparent);
  align-items: flex-start;
  gap: 10px;
}
.hub-session-detail-dialog .hub-session-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
  padding-right: 4px;
}
.hub-session-detail-dialog .hub-session-meta {
  margin: 2px 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  opacity: 1;
  color: var(--muted);
}
.hub-session-detail-dialog .hub-session-title-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  justify-content: flex-start;
  flex: 0 1 auto; /* no crecer: evita hueco enorme título ↔ meta */
}
.hub-session-detail-dialog .libpane-title-row {
  flex: 0 1 auto;
}
.hub-session-detail-dialog .hub-session-title-row h3 {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 40px);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-session-detail-dialog .hub-session-title-row.is-renaming h3 {
  display: none;
}
.hub-session-detail-dialog .hub-session-title-row .icon-mini {
  flex: 0 0 auto;
}
.hub-session-detail-dialog .hub-session-meta,
.hub-session-detail-dialog #hub-plan-meta,
.hub-session-detail-dialog #hub-lib-count {
  margin: 2px 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  opacity: 1;
  color: var(--muted);
}
.hub-session-detail-dialog #hub-lib-error {
  margin: 2px 0 0;
}
.hub-session-detail-dialog #hub-lib-name {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 18rem;
  margin: 0;
  padding: 2px 0;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 55%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  font-family: inherit;
}
.hub-session-detail-dialog #hub-lib-name:focus {
  outline: none;
  border-bottom-color: var(--primary);
}
.hub-session-detail-dialog .hub-session-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  align-self: flex-start;
  z-index: 1;
  margin-top: 0;
}
.hub-session-detail-dialog .hub-rm-calc-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  margin: 0;
  border-radius: 10px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface-2, var(--surface)) 88%, transparent);
  color: var(--text);
}
.hub-session-detail-dialog .hub-rm-calc-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary, #e85d04) 45%, var(--border));
  color: var(--primary, #e85d04);
}
/* CTA primaria: añadir ejercicios (sustituye FAB naranja) */
.hub-session-detail-dialog .hub-lib-add-cta {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  margin: 0;
  border-radius: 10px;
  color: #fff !important;
  border: none !important;
  background: var(--primary, #e85d04) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--primary, #e85d04) 42%, transparent);
}
.hub-session-detail-dialog .hub-lib-add-cta .nav-ico {
  width: 18px;
  height: 18px;
}
.hub-session-detail-dialog .hub-lib-add-cta:hover:not(:disabled) {
  filter: brightness(1.06);
  color: #fff !important;
  background: var(--primary, #e85d04) !important;
}
.hub-session-detail-dialog .hub-session-close-x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  margin: 0;
}
/* Un solo scroll container: body. .libpane-items NO debe anidar overflow
   (si no, la rueda apunta al hijo «scrollable» sin overflow real). */
.hub-session-detail-dialog .hub-session-detail-body,
#hub-session-detail-body.hub-session-detail-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(58vh, 520px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 16px 12px;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* Editar plan — ancho/densidad ≈ Publicar plan */
#hub-plan-detail-dialog.hub-session-detail-dialog {
  --modal-w: min(560px, calc(100vw - 24px));
  --modal-max-h: min(78vh, 640px);
}
#hub-plan-detail-dialog .hub-session-detail-body {
  max-height: min(52vh, 480px);
  padding: 10px 16px 12px;
}
#hub-plan-detail-dialog .libpane-plan-edit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
#hub-plan-detail-dialog .libpane-plan-meta-row {
  margin: 0;
}
#hub-plan-detail-dialog .libpane-plan-sessions {
  margin: 0;
}
#hub-plan-detail-dialog #hub-plan-error:not(.hidden) {
  margin: 4px 0 0;
}
#hub-plan-detail-dialog #hub-plan-error.hidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden;
}
.hub-session-detail-dialog .hub-session-detail-body .libpane-items,
#hub-session-detail-body .libpane-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  padding-right: 0;
  padding-bottom: 0;
}
.hub-session-detail-dialog .hub-session-detail-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hub-session-detail-dialog .hub-session-detail-footer .toolbar-spacer {
  flex: 1 1 auto;
  min-width: 8px;
}
/* legacy FAB eliminado — por si queda markup viejo en cache */
.hub-lib-fab,
#hub-lib-fab {
  display: none !important;
}
/* legacy (PL-UI-46 desde hub) — por si queda markup viejo */
.planner-saved-dialog.is-from-hub {
  width: min(44rem, calc(100vw - 24px));
  max-height: min(92vh, 760px);
}

/* Calculadora RM — tema FitOS oscuro */
.rm-calculator-dialog {
  --modal-w: min(440px, 94vw);
  --modal-max-h: min(78vh, 640px);
  max-height: var(--modal-max-h);
}
.rm-calculator-dialog .rm-calc-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-right: 8px;
}
.rm-calculator-dialog .rm-calc-head h3 {
  margin: 0;
}
.rm-calculator-dialog .rm-calc-head .hint {
  margin: 0;
}
.rm-calculator-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.rm-calc-inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.rm-calc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 7rem;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--muted);
}
.rm-calc-field input {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 55%, transparent);
  color: var(--text);
  font-size: 1rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.rm-calc-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rm-calc-input-wrap input {
  flex: 1 1 auto;
}
.rm-calc-unit {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 650;
}
.rm-calc-inputs #rm-calc-run {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 10px;
}
.rm-calc-warn {
  margin: 0;
  color: color-mix(in srgb, var(--primary, #e85d04) 70%, #fbbf24);
}
.rm-calc-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--hairline, var(--border));
}
.rm-calc-tab {
  appearance: none;
  margin: 0;
  padding: 8px 12px 10px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
}
.rm-calc-tab.is-active {
  color: var(--primary, #e85d04);
  border-bottom-color: var(--primary, #e85d04);
}
.rm-calc-panel {
  min-height: 0;
  max-height: min(36vh, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.rm-calc-pct-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rm-calc-pct-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--hairline, var(--border));
  font-variant-numeric: tabular-nums;
}
.rm-calc-pct-row:last-child {
  border-bottom: none;
}
.rm-calc-pct-row.is-max {
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--text);
}
.rm-calc-pct-row:not(.is-max) {
  color: var(--muted);
  font-size: 0.92rem;
}
.rm-calc-pct-row strong {
  color: var(--text);
  font-weight: 700;
}
.rm-calc-reps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.rm-calc-rep-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg, var(--bg)) 40%, transparent);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rm-calc-rep-card .rm-rep-label {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 650;
}
.rm-calc-rep-card .rm-rep-kg {
  font-size: 1.15rem;
  font-weight: 750;
  color: var(--text);
  line-height: 1.1;
}
.rm-calc-rep-card .rm-rep-unit {
  font-size: 0.68rem;
  color: var(--muted);
}
.rm-calculator-footer {
  justify-content: flex-start !important;
}
.rm-calc-formula {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
}
.rm-calc-formula .nav-ico {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  opacity: 0.75;
}
@media (max-width: 560px) {
  .rm-calc-reps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.planner-saved-dialog.is-from-hub .planner-saved-items {
  max-height: min(52vh, 440px);
}
.mc-hub-task-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.mc-hub-task-search-wrap input {
  width: 100%;
  padding-right: 56px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--sys-surface, #171f1c);
  color: var(--text);
  font: inherit;
  height: 38px;
  padding-left: 12px;
}
.mc-hub-task-search-wrap input:focus {
  outline: 2px solid color-mix(in srgb, var(--mc-hub-tone, var(--accent)) 55%, transparent);
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--mc-hub-tone, var(--accent)) 45%, var(--hairline));
}
.mc-hub-task-search-clear {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  padding: 2px 4px;
  line-height: 1;
}
.mc-hub-task-search-clear[hidden] {
  display: none;
}
.mc-hub-task-search-ico {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity: 0.55;
  pointer-events: none;
}
.mc-hub-task-pick-list {
  max-height: min(42vh, 320px);
  overflow: auto;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--sys-surface, #171f1c);
}
.mc-hub-task-pick-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent);
  cursor: pointer;
  margin: 0;
  text-align: left;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
}
.mc-hub-task-pick-item:last-child {
  border-bottom: 0;
}
.mc-hub-task-pick-item:hover {
  background: color-mix(in srgb, var(--mc-hub-tone, var(--accent)) 8%, transparent);
}
.mc-hub-task-pick-item.is-selected {
  background: color-mix(in srgb, var(--mc-hub-tone, var(--accent)) 14%, transparent);
}
.mc-hub-task-pick-item input {
  width: auto !important;
  margin: 0;
  flex: 0 0 auto;
  align-self: center;
  accent-color: var(--mc-hub-tone, var(--accent, #e85d4c));
}
.mc-hub-task-pick-item-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}
.mc-hub-task-pick-item-body strong {
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.25;
}
.mc-hub-task-pick-item-body mark {
  background: color-mix(in srgb, var(--mc-hub-tone, var(--accent)) 35%, transparent);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.mc-hub-task-pick-meta {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0;
}
.mc-hub-task-pick-empty {
  padding: 16px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 0.84rem;
}
.mc-hub-task-detail-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
}
.mc-hub-task-detail-grid .mc-hub-task-pick-list {
  max-height: 220px;
}
.mc-hub-task-detail-side {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}
.mc-hub-task-detail-side textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--sys-surface, #171f1c);
  color: var(--text);
  font: inherit;
  padding: 10px 12px;
}
.mc-hub-task-check-list {
  display: grid;
  gap: 10px;
  margin: 4px 0 12px;
}
.mc-hub-task-check-list label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  margin: 0;
  color: var(--text);
  font-weight: 600;
}
.mc-hub-task-check-list input {
  width: auto;
  accent-color: var(--mc-hub-tone, var(--accent));
  height: 16px;
}
.mc-hub-task-sesion-fields {
  display: grid;
  gap: 10px;
}
.mc-hub-task-sesion-fields .form-2col {
  gap: 10px;
}
.mc-hub-task-pick-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
@media (max-width: 640px) {
  .mc-hub-task-detail-grid {
    grid-template-columns: 1fr;
  }
  .mc-hub-end-line {
    flex-wrap: wrap !important;
  }
}
@media (max-width: 820px) {
  .mc-hub-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .mc-hub-tabs {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    padding: 10px;
  }
  .mc-hub-tab {
    min-width: 148px;
  }
  .mc-hub-tab-sub {
    display: none;
  }
  .mc-hub-cal-cell {
    min-height: 64px;
  }
  .mc-hub-cal-grid.is-week .mc-hub-cal-cell {
    min-height: 96px;
  }
  .mc-hub-task-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mc-hub-task-detail-grid {
    grid-template-columns: 1fr;
  }
  .mc-hub-cal-toolbar-right {
    width: 100%;
  }
}

/* Hub evolución — detail modals (FitOS dark) */
.modal-dialog.mc-hub-evo-detail-dialog {
  --modal-w: min(560px, calc(100vw - 28px));
  width: var(--modal-w);
  max-width: var(--modal-w);
  max-height: min(88vh, 720px);
  padding: 0;
  overflow: hidden;
  background: var(--sys-surface, #171f1c);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  color: var(--text);
}
.modal-dialog.mc-hub-evo-metrics-dialog {
  --modal-w: min(720px, calc(100vw - 28px));
  max-height: min(92vh, 860px);
}
.mc-hub-evo-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 10px;
  border-bottom: 1px solid var(--hairline);
}
.mc-hub-evo-detail-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mc-hub-evo-detail-title-row h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.mc-hub-evo-detail-ico {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #22d3ee 45%, var(--hairline));
  display: grid;
  place-items: center;
  color: #67e8f9;
  flex-shrink: 0;
}
.mc-hub-evo-detail-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.mc-hub-evo-trash {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  padding: 0;
}
.mc-hub-evo-trash:hover {
  border-color: color-mix(in srgb, #f87171 55%, var(--hairline));
  color: #fca5a5;
}
.mc-hub-evo-detail-body {
  padding: 14px 18px 18px;
  overflow: auto;
  max-height: min(70vh, 620px);
}
.mc-hub-evo-date-label {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted, #9aa7a0);
}
.mc-hub-evo-date-value {
  margin: 4px 0 2px;
  font-size: 1rem;
  font-weight: 700;
}
.mc-hub-evo-edit-date {
  margin: 0 0 12px;
  padding-left: 0;
  color: #67e8f9;
}
.mc-hub-evo-date-edit {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 14px;
}
.mc-hub-evo-date-edit input[type="date"] {
  flex: 1;
  min-width: 0;
}
.mc-hub-evo-foto-status {
  margin: 8px 0 12px;
  font-size: 0.85rem;
  color: var(--text);
}
.mc-hub-evo-foto-status.is-empty {
  color: var(--muted, #9aa7a0);
}
.mc-hub-evo-foto-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.mc-hub-evo-foto-thumb {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface, #171f1c) 70%, #000);
}
.mc-hub-evo-foto-thumb img {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: cover;
}
.mc-hub-evo-foto-thumb figcaption {
  padding: 4px 6px;
  font-size: 0.68rem;
  color: var(--muted, #9aa7a0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-hub-evo-foto-drop {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
  padding: 22px 14px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, #22d3ee 40%, var(--hairline));
  background: color-mix(in srgb, #0b1a1e 55%, var(--sys-surface, #171f1c));
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
}
.mc-hub-evo-foto-drop:hover {
  border-color: #67e8f9;
}
.mc-hub-evo-foto-drop .nav-ico {
  width: 28px;
  height: 28px;
  color: #67e8f9;
}
.mc-hub-evo-section-label {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted, #9aa7a0);
}
.mc-hub-evo-metrics-block {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.mc-hub-evo-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.mc-hub-evo-metrics-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mc-hub-evo-metrics-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}
.mc-hub-evo-metrics-fields .field label {
  font-size: 0.78rem;
  color: var(--muted, #9aa7a0);
}
.mc-hub-evo-metrics-fields .field input {
  background: color-mix(in srgb, var(--sys-surface, #171f1c) 80%, #000);
  border: 1px solid var(--hairline);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
}
.mc-hub-evo-metrics-circ {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 16px;
  align-items: start;
}
.mc-hub-evo-silhouette {
  display: grid;
  place-items: center;
  padding-top: 8px;
  color: color-mix(in srgb, var(--text) 55%, transparent);
}
.mc-hub-evo-sil-svg {
  width: 100px;
  height: auto;
  max-height: 240px;
}
@media (max-width: 640px) {
  .mc-hub-evo-metrics-grid,
  .mc-hub-evo-metrics-grid-2,
  .mc-hub-evo-metrics-grid-3 {
    grid-template-columns: 1fr;
  }
  .mc-hub-evo-metrics-circ {
    grid-template-columns: 1fr;
  }
  .mc-hub-evo-silhouette {
    order: -1;
  }
}

/* ── Actividad física shell (Librería) — top tabs ────────────────────── */
#tab-ejercicios.af-shell.tab-panel.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
#tab-ejercicios .af-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0 4px 0 0;
}
#tab-ejercicios .af-top-tabs.mc-lifecycle-tabs {
  flex: 0 0 auto;
  margin: 0 0 10px;
  padding: 0 2px;
}
#tab-ejercicios .af-top-tab.mc-lifecycle-tab {
  flex: 1 1 0;
  font-size: 0.95rem;
}
.ex-scope-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--fit-surface-2, #1c2228) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--fit-border, #3a434c) 70%, transparent);
}
.ex-scope-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fit-muted, #9aa3ad);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.ex-scope-tab:hover {
  color: var(--fit-text, #f3f5f7);
}
.ex-scope-tab.is-on,
.ex-scope-tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--fit-primary, #f97316) 22%, #2a3138);
  color: var(--fit-text, #f3f5f7);
}
.ex-tipo-seg {
  display: inline-flex;
  gap: 6px;
  margin-top: 4px;
}
.ex-tipo-seg-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--fit-border, #3a434c) 80%, transparent);
  background: color-mix(in srgb, var(--fit-surface-2, #1c2228) 90%, transparent);
  color: var(--fit-muted, #9aa3ad);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.ex-tipo-seg-btn:hover {
  color: var(--fit-text, #f3f5f7);
}
.ex-tipo-seg-btn.is-on,
.ex-tipo-seg-btn[aria-checked="true"] {
  border-color: color-mix(in srgb, var(--fit-primary, #f97316) 55%, transparent);
  background: color-mix(in srgb, var(--fit-primary, #f97316) 18%, #2a3138);
  color: var(--fit-text, #f3f5f7);
}
.ex-card-tipo-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fit-primary, #f97316) 85%, #111);
  color: #fff;
  pointer-events: none;
}
#tab-ejercicios .af-rail { display: none !important; }
#tab-ejercicios .af-pane {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
#tab-ejercicios .af-pane.is-active { display: flex; }
#tab-ejercicios .af-create-btn {
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 650;
}
#tab-ejercicios .af-count-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #1c1c1c) 90%, #000);
  border: 1px solid color-mix(in srgb, var(--border, #333) 80%, transparent);
}
#tab-ejercicios .exercise-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#tab-ejercicios.af-tab-sesiones #af-sesiones-host,
#tab-ejercicios #af-sesiones-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#tab-ejercicios #planner-pane-biblioteca {
  display: grid !important;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}
#tab-ejercicios #af-sesiones-fab-wrap {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  pointer-events: none;
}
#tab-ejercicios #af-sesiones-fab-wrap > .planner-fab {
  pointer-events: auto;
}

/* Cardio catalog */
.af-cardio-head { flex: 0 0 auto; padding: 12px 16px 0; }
.af-cardio-lede {
  margin: 0 0 10px;
  color: color-mix(in srgb, var(--text, #eee) 65%, transparent);
  font-size: 0.9rem;
}
#cardio-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: min(360px, 100%);
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border, #333) 90%, transparent);
  background: color-mix(in srgb, var(--surface, #1c1c1c) 95%, #000);
}
#cardio-search-wrap .exercise-search {
  flex: 1;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.af-cardio-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 14px 16px 28px;
  align-content: start;
}
.af-cardio-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border, #333) 85%, transparent);
  background: color-mix(in srgb, var(--panel, #141414) 95%, #000);
  cursor: pointer;
  text-align: left;
  color: inherit;
  padding: 0;
}
.af-cardio-card:hover {
  border-color: color-mix(in srgb, var(--accent, #f97316) 50%, transparent);
}
.af-cardio-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0d0d0d;
  overflow: hidden;
}
.af-cardio-media .af-cardio-thumb,
.af-cardio-media img,
.af-cardio-media .exercise-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.af-cardio-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 12px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  color: #fff;
  font-weight: 650;
  font-size: 0.95rem;
}
.af-cardio-creator {
  margin: 0;
  padding: 8px 12px 10px;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--text, #eee) 55%, transparent);
}
.af-cardio-detail-body {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}
.af-cardio-detail-media {
  border-radius: 12px;
  overflow: hidden;
  background: #0d0d0d;
  aspect-ratio: 16 / 10;
}
.af-cardio-detail-media img,
.af-cardio-detail-media .exercise-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.af-cardio-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 140px;
}
.af-cardio-create-dialog {
  --modal-w: min(520px, 96vw);
}
.af-cardio-create-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.af-cardio-cover-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.84rem;
  font-weight: 600;
}
.af-cardio-cover-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.af-cardio-cover-opt {
  appearance: none;
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid color-mix(in srgb, var(--fit-border, #3a434c) 80%, transparent);
  background: #12161a;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}
.af-cardio-cover-opt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.af-cardio-cover-opt.is-selected {
  border-color: #f97316;
  box-shadow: 0 0 0 1px color-mix(in srgb, #f97316 45%, transparent);
}
.af-cardio-cover-opt.is-selected::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
}
.af-cardio-cover-brand {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fdba74;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, #f97316 35%, #1a1210), #0b0d10 70%);
}
.af-cardio-cover-opt.is-custom {
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--muted);
  background: color-mix(in srgb, var(--sys-surface-2, #1c2228) 90%, transparent);
}
.af-cardio-cover-custom {
  margin-top: 8px;
}
.af-cardio-save-lib {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 0;
  font-size: 0.86rem;
  line-height: 1.35;
  cursor: pointer;
}
.af-cardio-save-lib input {
  margin-top: 3px;
}

/* Wizard crear / editar ejercicio */
.af-wizard-dialog {
  --modal-w: min(640px, 94vw);
  --modal-max-h: min(72vh, 640px);
  width: min(var(--modal-w), 94vw);
  max-height: var(--modal-max-h);
  display: flex;
  flex-direction: column;
}
.af-wizard-dialog[open] {
  display: flex;
  flex-direction: column;
}
.af-wizard-dialog > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: inherit;
  height: 100%;
  text-align: left;
}
.af-wizard-dialog .af-wizard-footer .ghost,
.af-wizard-dialog .af-wizard-footer .btn-primary {
  order: initial;
}
.af-wizard-dialog .exercise-form-delete {
  order: 0;
  margin-right: auto;
}
.af-wizard-dialog .af-wizard-header {
  flex: 0 0 auto;
  align-items: flex-start;
}
.af-wizard-dialog .af-wizard-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}
.af-wizard-dialog .af-wizard-footer {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.af-wizard-footer-spacer { flex: 1 1 auto; min-width: 8px; }
/* inline-flex de .btn-primary gana al [hidden] del UA — forzar ocultar */
.af-wizard-dialog .af-wizard-footer [hidden],
.af-wizard-dialog .af-wizard-footer .hidden {
  display: none !important;
}
.af-wizard-dialog .af-wizard-footer .btn-primary:disabled,
.af-wizard-dialog .af-wizard-footer .btn-primary.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
  transform: none;
}
.af-wizard-steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  flex-wrap: nowrap;
  margin: 0 0 10px;
  padding: 0 8px 2px;
}
.af-wizard-rail {
  position: absolute;
  left: calc(8px + (100% - 16px) / 10);
  right: calc(8px + (100% - 16px) / 10);
  top: 14px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border, #444) 85%, transparent);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.af-wizard-rail-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--accent, #f97316);
  transition: width 0.22s ease;
}
.af-wizard-step {
  appearance: none;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 88px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--text, #eee) 55%, transparent);
  cursor: pointer;
  font: inherit;
}
.af-wizard-step.is-locked {
  cursor: not-allowed;
  opacity: 0.72;
}
.af-wizard-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border, #444) 90%, transparent);
  background: color-mix(in srgb, var(--surface, #1c1c1c) 96%, #000);
  font-size: 0.8rem;
  font-weight: 650;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sys-bg, #111) 80%, transparent);
}
.af-wizard-caption {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  max-width: 72px;
}
.af-wizard-step.is-on { color: var(--text, #eee); }
.af-wizard-step.is-on .af-wizard-num {
  background: var(--accent, #f97316);
  border-color: var(--accent, #f97316);
  color: #111;
  font-weight: 700;
}
.af-wizard-step.is-done { color: var(--accent, #f97316); }
.af-wizard-step.is-done .af-wizard-num {
  border-color: color-mix(in srgb, var(--accent, #f97316) 60%, transparent);
  color: var(--accent, #f97316);
}
.af-wizard-dialog.is-edit .af-wizard-step:not(.is-on) .af-wizard-num {
  border-color: color-mix(in srgb, var(--accent, #f97316) 55%, transparent);
  color: var(--accent, #f97316);
}
.af-wizard-dialog.is-edit .af-wizard-step:not(.is-on) {
  color: var(--accent, #f97316);
}
.af-wizard-pane { display: none; text-align: left; }
.af-wizard-pane.is-active { display: block; }
.af-wizard-pane .field {
  text-align: left;
  align-items: stretch;
}
.af-wizard-pane .fit-label {
  display: flex;
  justify-content: flex-start;
  text-align: left;
}
.af-wizard-dialog .af-check-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 8px 0 14px;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.af-wizard-dialog .af-check-row input[type="checkbox"],
.af-wizard-dialog input[type="checkbox"],
.af-wizard-dialog input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  max-width: 16px;
  flex: 0 0 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--accent, #f97316);
  align-self: center;
}
.af-wizard-dialog .af-check-row span {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}
.af-media-fieldset {
  border: 1px solid color-mix(in srgb, var(--border, #333) 85%, transparent);
  border-radius: 12px;
  padding: 12px;
  margin: 0;
  text-align: left;
}
.af-media-fieldset legend {
  padding: 0 6px;
  color: color-mix(in srgb, var(--text, #eee) 70%, transparent);
}
.af-media-hint { margin: 0 0 10px; }
.af-media-preview {
  margin-top: 8px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid color-mix(in srgb, var(--border, #333) 80%, transparent);
}
.af-media-preview iframe,
.af-media-preview video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  max-height: 180px;
}
.af-media-preview-img img {
  display: block;
  width: 100%;
  max-height: 140px;
  object-fit: cover;
}
.af-chip-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  text-align: left;
  justify-content: flex-start;
  align-content: flex-start;
}
.af-chip-cloud-scroll {
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
.af-chip {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--border, #444) 90%, transparent);
  background: color-mix(in srgb, var(--surface, #1c1c1c) 92%, #000);
  color: color-mix(in srgb, var(--text, #eee) 82%, transparent);
  border-radius: 999px;
  padding: 6px 11px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
  text-transform: none;
}
.af-chip:hover {
  border-color: color-mix(in srgb, var(--accent, #f97316) 45%, transparent);
  color: var(--text, #eee);
}
.af-chip.is-on {
  background: color-mix(in srgb, var(--accent, #f97316) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent, #f97316) 70%, transparent);
  color: var(--accent, #f97316);
}
.af-chip.is-hidden { display: none !important; }
.af-tags-filter {
  margin-top: 8px;
}
.af-classify-scroll {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: min(42vh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  text-align: left;
}
.af-wizard-dialog .field > .hint { text-align: left; }

@media (max-width: 900px) {
  #tab-ejercicios.af-shell.tab-panel.active {
    display: flex;
    flex-direction: column;
  }
  .af-cardio-detail-body {
    grid-template-columns: 1fr;
  }
  .af-wizard-caption { max-width: 56px; font-size: 0.62rem; }
  .af-wizard-step { max-width: 64px; }
  .af-wizard-rail {
    left: calc(4px + (100% - 8px) / 10);
    right: calc(4px + (100% - 8px) / 10);
  }
  .af-wizard-steps { padding: 0 4px 2px; }
}

/* —— Mi equipo (FitOS dark) — scoped #usuarios-panel-equipo —— */
#usuarios-panel-equipo .equipo-lifecycle-tabs {
  margin-bottom: 10px;
}
#usuarios-panel-equipo .equipo-member-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#usuarios-panel-equipo .equipo-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  background: color-mix(in srgb, var(--accent, #e85d4c) 28%, var(--sys-surface, #1a1c22));
  border: 1px solid color-mix(in srgb, var(--accent, #e85d4c) 40%, transparent);
}
#usuarios-panel-equipo .equipo-avatar-lg {
  width: 72px;
  height: 72px;
  font-size: 1.15rem;
}
#usuarios-panel-equipo .equipo-member-cell .name {
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#usuarios-panel-equipo .equipo-demo-mark {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  vertical-align: middle;
}
#usuarios-panel-equipo .equipo-activity-cell {
  white-space: nowrap;
}
#usuarios-panel-equipo .equipo-cumplimiento-pair {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
}
#usuarios-panel-equipo .equipo-cumplimiento-ring {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: 36px;
  height: auto;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
#usuarios-panel-equipo .equipo-cumplimiento-ring svg {
  position: relative;
  inset: auto;
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  transform: rotate(-90deg);
}
#usuarios-panel-equipo .equipo-cumplimiento-track {
  fill: none;
  stroke: color-mix(in srgb, var(--muted) 35%, transparent);
  stroke-width: 3.5;
}
#usuarios-panel-equipo .equipo-cumplimiento-val {
  fill: none;
  stroke: var(--accent, #e85d4c);
  stroke-width: 3.5;
  stroke-linecap: round;
}
#usuarios-panel-equipo .equipo-cumplimiento-ring.is-weekly .equipo-cumplimiento-val {
  stroke: #3b82f6;
}
#usuarios-panel-equipo .equipo-cumplimiento-ring.is-monthly .equipo-cumplimiento-val {
  stroke: var(--accent, #e85d4c);
}
#usuarios-panel-equipo .equipo-cumplimiento-pct {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--text);
  pointer-events: none;
}
#usuarios-panel-equipo .equipo-cumplimiento-lab {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--muted);
  text-align: center;
}
#usuarios-panel-equipo .equipo-cumplimiento-cell {
  white-space: nowrap;
  overflow: visible;
  text-align: center;
}
.usuarios-staff-drawer .equipo-drawer-summary {
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--hairline, var(--border));
  background: color-mix(in srgb, var(--sys-surface, #12141a) 92%, transparent);
}
.usuarios-staff-drawer .equipo-drawer-summary-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.usuarios-staff-drawer .equipo-drawer-cumplimiento-title {
  display: block;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.usuarios-staff-drawer .equipo-drawer-cumplimiento-nums {
  display: flex;
  gap: 16px;
}
.usuarios-staff-drawer .equipo-drawer-cumplimiento-nums strong {
  display: block;
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--text);
}
.usuarios-staff-drawer .equipo-drawer-cumplimiento-nums span {
  font-size: 0.72rem;
  color: var(--muted);
}
.usuarios-staff-drawer .equipo-drawer-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 0;
}
.usuarios-staff-drawer .equipo-drawer-meta > div {
  min-width: 0;
}
.usuarios-staff-drawer .equipo-drawer-meta dt {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.usuarios-staff-drawer .equipo-drawer-meta dd {
  margin: 2px 0 0;
  font-size: 0.88rem;
  color: var(--text);
  word-break: break-word;
}
.usuarios-staff-drawer .equipo-drawer-soon {
  margin: 10px 0 0;
  font-size: 0.78rem;
}
@media (max-width: 720px) {
  .usuarios-staff-drawer .equipo-drawer-meta {
    grid-template-columns: 1fr;
  }
}

/* —— Comunidad: gestión de grupos (wizard + tabla esencial) —— */
#usuarios-panel-grupos .comunidad-blurb .usuarios-tab-blurb-text {
  max-width: 52rem;
}
#usuarios-panel-grupos .comunidad-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#usuarios-panel-grupos .comunidad-row-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--border, #444) 80%, transparent);
}
#usuarios-panel-grupos .comunidad-row-avatar.is-ph {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--surface, #1c1c1c) 90%, #000);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}
#crear-grupo-dialog.comunidad-wizard-dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: min(92vh, 820px);
}
#crear-grupo-dialog .comunidad-wizard-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#crear-grupo-dialog .comunidad-wizard-steps .af-wizard-step {
  max-width: 110px;
}
#crear-grupo-dialog .comunidad-avatar-row {
  display: flex;
  justify-content: center;
  margin: 4px 0 12px;
}
#crear-grupo-dialog .comunidad-avatar-btn {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
#crear-grupo-dialog .comunidad-avatar-preview {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #1c1c1c) 92%, #000);
  border: 1px solid color-mix(in srgb, var(--border, #444) 85%, transparent);
  color: var(--muted);
  overflow: hidden;
}
#crear-grupo-dialog .comunidad-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#crear-grupo-dialog .comunidad-avatar-edit {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--accent, #f97316);
  color: #111;
  border: 2px solid color-mix(in srgb, var(--sys-bg, #111) 90%, transparent);
}
#crear-grupo-dialog .comunidad-avatar-edit .nav-ico {
  width: 14px;
  height: 14px;
}
#crear-grupo-dialog .comunidad-seg {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #1c1c1c) 88%, #000);
  border: 1px solid color-mix(in srgb, var(--border, #444) 80%, transparent);
  margin: 0 0 10px;
}
#crear-grupo-dialog .comunidad-seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
}
#crear-grupo-dialog .comunidad-seg-btn.is-on {
  background: var(--accent, #f97316);
  color: #111;
}
#crear-grupo-dialog .comunidad-tag-list,
#crear-grupo-dialog .comunidad-staff-list {
  max-height: 180px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--border, #444) 85%, transparent);
  border-radius: 10px;
  padding: 6px;
  background: color-mix(in srgb, var(--surface, #1c1c1c) 94%, #000);
  margin: 8px 0;
}
#crear-grupo-dialog .comunidad-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.86rem;
}
#crear-grupo-dialog .comunidad-check-row:hover {
  background: color-mix(in srgb, var(--accent, #f97316) 12%, transparent);
}
#crear-grupo-dialog .comunidad-tag-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--cg-tag, #64748B);
  flex: 0 0 auto;
}
#crear-grupo-dialog .comunidad-tag-match,
#crear-grupo-dialog .comunidad-perm-field {
  border: 0;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
#crear-grupo-dialog .comunidad-tag-match legend,
#crear-grupo-dialog .comunidad-perm-field legend {
  padding: 0;
  margin: 0 0 4px;
  font-size: 0.86rem;
  color: var(--text);
}
#crear-grupo-dialog .comunidad-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  cursor: pointer;
}
#crear-grupo-dialog .comunidad-radio input {
  accent-color: var(--accent, #f97316);
}
#crear-grupo-dialog .comunidad-people-count {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface, #1c1c1c) 88%, #000);
  border: 1px solid color-mix(in srgb, var(--border, #444) 80%, transparent);
  font-size: 0.86rem;
}
#crear-grupo-dialog .comunidad-section-title {
  margin: 4px 0 6px;
  font-size: 0.95rem;
}
#crear-grupo-dialog .comunidad-personas-block + .comunidad-personas-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--hairline, #333) 85%, transparent);
}
#crear-grupo-dialog .comunidad-wizard-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}
#crear-grupo-dialog #crear-grupo-submit.is-disabled,
#crear-grupo-dialog #crear-grupo-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#editar-grupo-dialog.comunidad-edit-dialog {
  width: min(520px, calc(100vw - 24px));
}
#editar-grupo-dialog .comunidad-edit-section {
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline, #333) 85%, transparent);
}
#editar-grupo-dialog .comunidad-edit-section:last-child {
  border-bottom: 0;
}
#editar-grupo-dialog .comunidad-edit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
#editar-grupo-dialog .comunidad-edit-head h4 {
  margin: 0;
  font-size: 0.95rem;
}
#editar-grupo-dialog .comunidad-edit-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
#editar-grupo-dialog .comunidad-summary-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--border, #444) 80%, transparent);
}
#editar-grupo-dialog .comunidad-summary-avatar.is-ph {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--surface, #1c1c1c) 90%, #000);
  color: var(--muted);
}
#editar-grupo-dialog .comunidad-mini-tag {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #f97316) 22%, transparent);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 650;
}
#editar-grupo-dialog .comunidad-perm-summary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
#editar-grupo-dialog .comunidad-perm-summary li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.86rem;
}
#editar-grupo-dialog .comunidad-perm-summary span {
  color: var(--muted);
}
#editar-grupo-dialog .modal-footer .danger {
  color: #f87171;
}

/* Asignar sesión/plan — Clientes | Grupos */
.planner-schedule-dialog .assign-who-tabs,
#planner-plan-assign-dialog .assign-who-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 12px;
  padding: 4px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface-2, var(--sys-surface)) 88%, var(--hairline));
  border: 1px solid var(--hairline);
}
.planner-schedule-dialog .assign-who-tab,
#planner-plan-assign-dialog .assign-who-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted, #9aa3b2);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.15;
}
.planner-schedule-dialog .assign-who-tab:hover,
#planner-plan-assign-dialog .assign-who-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--sys-surface) 70%, transparent);
}
.planner-schedule-dialog .assign-who-tab.active,
.planner-schedule-dialog .assign-who-tab[aria-selected="true"],
#planner-plan-assign-dialog .assign-who-tab.active,
#planner-plan-assign-dialog .assign-who-tab[aria-selected="true"] {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 22%, var(--sys-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}
.planner-assign-list.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

/* ── Plan semanal wizard ── */
.nut-weekly-dialog {
  --modal-w: min(1100px, 96vw);
  --modal-max-h: min(92svh, 920px);
}
.nut-weekly-dialog .af-wizard-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.nut-weekly-dialog .af-wizard-steps {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  gap: 8px;
}
.nut-weekly-dialog .af-wizard-step {
  max-width: 110px;
  flex: 1 1 0;
}
.nut-weekly-dialog .af-wizard-caption {
  max-width: 96px;
  white-space: nowrap;
}
.nut-weekly-dialog .af-wizard-rail {
  left: calc(8px + (100% - 16px) / 6);
  right: calc(8px + (100% - 16px) / 6);
}
.nut-weekly-resumen-days {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}
.nut-weekly-resumen-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border, #444) 80%, transparent);
  background: color-mix(in srgb, var(--surface, #1c1c1c) 94%, #000);
  font-size: 0.84rem;
}
.nut-weekly-resumen-row strong {
  font-weight: 650;
}
.nut-weekly-resumen-row .hint {
  margin: 0;
}
.nut-weekly-media {
  border: 1px solid color-mix(in srgb, var(--border, #444) 88%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface, #1c1c1c) 92%, #000);
  margin-bottom: 10px;
}
.nut-weekly-media-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.nut-weekly-media-head strong {
  font-size: 0.92rem;
}
.nut-weekly-media-toggle[hidden] {
  display: none !important;
}
.nut-weekly-media-toggle[aria-expanded="true"] .nav-ico {
  transform: rotate(180deg);
}
.nut-weekly-media-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border, #444) 80%, transparent);
}
.nut-weekly-media-note {
  margin: 8px 0 0;
  font-size: 0.72rem;
}
.nut-weekly-macro-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.nut-weekly-macro-chip {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-bg, #111) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--border, #444) 70%, transparent);
}
.nut-weekly-macro-chip strong {
  display: block;
  font-size: 0.82rem;
  line-height: 1.25;
}
.nut-weekly-macro-chip .hint {
  display: block;
  font-size: 0.68rem;
  margin: 0 0 2px;
}
.nut-weekly-macro-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.nut-weekly-macro-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
.nut-weekly-days {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.nut-weekly-day {
  flex: 0 0 min(220px, 78vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border, #444) 88%, transparent);
  background: color-mix(in srgb, var(--surface, #1c1c1c) 96%, #000);
  overflow: hidden;
}
.nut-weekly-day-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #444) 70%, transparent);
}
.nut-weekly-day-head strong {
  flex: 1;
  font-size: 0.92rem;
}
.nut-weekly-day-ico {
  display: grid;
  place-items: center;
  opacity: 0.7;
}
.nut-weekly-day-ico .nav-ico,
.nut-weekly-day-placeholder .nav-ico {
  width: 18px;
  height: 18px;
}
.nut-weekly-day-actions {
  display: inline-flex;
  gap: 2px;
}
.nut-weekly-day-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 16px 14px 18px;
}
.nut-weekly-day-placeholder {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--border, #444) 90%, transparent);
  opacity: 0.75;
  margin-bottom: 4px;
}
.nut-weekly-day-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.nut-weekly-day-empty .hint {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.35;
}
.nut-weekly-day-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.nut-weekly-day-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nut-weekly-day-plan {
  font-size: 0.9rem;
  line-height: 1.3;
}
.nut-weekly-cargar-dialog {
  --modal-w: min(720px, 96vw);
  --modal-max-h: min(90svh, 860px);
}
.nut-weekly-cargar-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.nut-weekly-cargar-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
  padding: 2px;
}
.nut-weekly-cargar-opt {
  appearance: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border, #444) 85%, transparent);
  background: color-mix(in srgb, var(--surface, #1c1c1c) 94%, #000);
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.nut-weekly-cargar-opt:hover {
  border-color: color-mix(in srgb, var(--accent, #f97316) 45%, var(--border));
}
.nut-weekly-cargar-opt.is-on {
  border-color: var(--accent, #f97316);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #f97316) 35%, transparent);
  background: color-mix(in srgb, var(--accent, #f97316) 10%, var(--surface, #1c1c1c));
}
.nut-weekly-cargar-preview {
  border-top: 1px solid color-mix(in srgb, var(--border, #444) 75%, transparent);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: min(48svh, 420px);
  overflow-y: auto;
}
.nut-weekly-cargar-info h4,
.nut-weekly-cargar-meals h4 {
  margin: 0 0 8px;
  font-size: 0.88rem;
}
.nut-weekly-meal-card {
  border: 1px solid color-mix(in srgb, var(--border, #444) 80%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--sys-bg, #111) 40%, transparent);
  margin-bottom: 8px;
}
.nut-weekly-meal-foods {
  margin: 6px 0 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface, #1c1c1c) 88%, #000);
  font-size: 0.78rem;
  line-height: 1.35;
}
.nut-weekly-meal-macros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 0.74rem;
}
.nut-weekly-meal-macros span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
@media (max-width: 720px) {
  .nut-weekly-macro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nut-weekly-day {
    flex-basis: min(200px, 84vw);
    min-height: 290px;
  }
}

/* ── Librería Documentos ─────────────────────────────────────────── */
.docs-lib-workspace {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
.docs-lib-toolbar {
  margin-bottom: 12px;
}
.docs-lib-toolbar .usuarios-client-search {
  flex: 1 1 280px;
  max-width: 420px;
}
.docs-lib-table-wrap {
  border: 1px solid var(--hairline, rgba(255,255,255,0.08));
  border-radius: var(--radius-lg, 12px);
  background: var(--sys-surface, #1a1a1a);
  overflow-x: auto !important;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.docs-lib-table-xscroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
}
.docs-lib-table {
  min-width: 880px;
  width: 100%;
  table-layout: auto;
}
.docs-lib-table .docs-lib-desc-cell {
  color: var(--sys-muted, #9ca3af);
  max-width: 280px;
}
.docs-lib-file-meta {
  margin-top: 2px;
  font-weight: 400;
}
.docs-lib-persist-hint {
  margin: 10px 0 0;
  font-size: 0.78rem;
}
.docs-col-nombre { min-width: 180px; }
.docs-col-desc { min-width: 140px; }
.docs-col-vis { min-width: 120px; }
.docs-col-creador { min-width: 100px; }
.docs-col-actions {
  width: 168px;
  min-width: 168px;
}
.docs-lib-table th.usuarios-roster-actions-col,
.docs-lib-table td.docs-lib-actions-cell,
.docs-lib-table td.usuarios-roster-actions-col {
  width: 168px;
  min-width: 168px;
  max-width: none;
  overflow: visible !important;
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 10px;
}
.docs-lib-actions-cell .roster-inline-actions,
.docs-lib-actions {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  min-width: 148px;
  overflow: visible;
}
.docs-lib-actions .roster-inline-action {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}
.docs-lib-pdf-dialog {
  --modal-w: min(920px, 96vw);
  --modal-max-h: min(92svh, 900px);
}
.docs-lib-pdf-body {
  padding: 0;
  min-height: min(70vh, 640px);
  background: #111;
}
.docs-lib-pdf-frame,
.docs-lib-pdf-embed {
  display: block;
  width: 100%;
  height: min(70vh, 640px);
  border: 0;
  background: #1a1a1a;
}
.docs-lib-pdf-frame[hidden],
.docs-lib-pdf-embed[hidden],
.docs-lib-pdf-img[hidden] {
  display: none !important;
}
.docs-lib-file-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.docs-lib-file-row input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}
.docs-lib-file-row #docs-lib-file-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.docs-lib-form-body .req {
  color: #ef4444;
  font-weight: 700;
  margin-left: 2px;
}
.docs-lib-vis-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.docs-lib-vis-fieldset legend {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--sys-text, #f3f4f6);
}
.docs-lib-vis-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
}
.docs-lib-radio {
  display: grid !important;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--sys-muted, #c4c4c4);
  cursor: pointer;
  margin: 0;
}
.docs-lib-radio input[type="radio"] {
  margin: 3px 0 0;
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  flex: none;
  justify-self: center;
  accent-color: var(--brand, #e85d04);
}
.docs-lib-radio-text,
.docs-lib-radio > span {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}
.docs-lib-tag-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0 1.9rem;
  min-width: 0;
}
.docs-lib-assign-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.docs-lib-assign-doc-name {
  margin: 0;
  font-weight: 600;
  color: var(--sys-text, #f3f4f6);
}
.docs-lib-assign-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: var(--sys-surface-2, #222);
  border: 1px solid var(--hairline, rgba(255,255,255,0.08));
  width: fit-content;
  max-width: 100%;
}
.docs-lib-assign-tabs .assign-who-tab {
  border: 0;
  background: transparent;
  color: var(--sys-muted, #9ca3af);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}
.docs-lib-assign-tabs .assign-who-tab.active,
.docs-lib-assign-tabs .assign-who-tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--brand, #e85d04) 22%, transparent);
  color: var(--sys-text, #fff);
}
.docs-lib-assign-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  width: 100%;
  max-width: 100%;
}
.docs-lib-assign-list {
  max-height: min(42vh, 20rem);
}
.programas-assign-helper {
  margin: 0;
  color: var(--sys-muted, #9ca3af);
}
.programas-assign-start-field {
  margin: 0;
}
.programas-assign-start-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--sys-text, #f3f4f6);
}
.programas-assign-start-field input[type="date"] {
  width: 100%;
  max-width: 16rem;
}
.programas-assign-cal-stub {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--sys-muted, #9ca3af);
  line-height: 1.35;
}

/* Shared Asignar — Por nombre | Por etiquetas */
.assign-client-mode-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  margin: 0 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sys-surface-2, #222) 92%, var(--brand, #e85d04) 8%);
  border: 1px solid var(--hairline, rgba(255,255,255,0.08));
  width: fit-content;
  max-width: 100%;
}
.assign-client-mode-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--sys-muted, #9ca3af);
  padding: 6px 12px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  line-height: 1.15;
}
.assign-client-mode-tab:hover {
  color: var(--sys-text, #fff);
}
.assign-client-mode-tab.active,
.assign-client-mode-tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--brand, #e85d04) 28%, transparent);
  color: var(--sys-text, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand, #e85d04) 40%, transparent);
}
.assign-tag-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.assign-tag-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px color-mix(in srgb, #000 35%, transparent);
}
.assign-tag-meta {
  color: var(--sys-muted, #9ca3af);
  font-size: 0.78rem;
}
.fit-assign-dialog .docs-lib-assign-list {
  max-height: min(40vh, 18rem);
}
#schedule-client-mode-tabs[hidden],
#plan-assign-client-mode-tabs[hidden] {
  display: none !important;
}
.docs-lib-tag-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline, rgba(255,255,255,0.12));
  background: var(--sys-surface-2, #222);
  font-size: 0.78rem;
  cursor: pointer;
}
.docs-lib-tag-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.docs-lib-tag-chip.is-on {
  border-color: color-mix(in srgb, var(--brand, #e85d04) 55%, transparent);
  background: color-mix(in srgb, var(--brand, #e85d04) 18%, transparent);
  color: var(--sys-text, #fff);
}
.docs-lib-tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.docs-lib-form-body .field {
  margin-bottom: 14px;
}
.docs-lib-file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 720px) {
  .docs-lib-file-row {
    flex-direction: column;
    align-items: stretch;
  }
  .docs-lib-tag-picks {
    margin-left: 0;
  }
}
.docs-lib-share-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--hairline, rgba(255,255,255,0.08));
  border-radius: 10px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--sys-text, #fff);
}
.docs-lib-share-wrap.hidden {
  display: none;
}
.docs-lib-share-wrap input {
  margin-top: 3px;
  flex: 0 0 auto;
}
.docs-lib-pdf-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.docs-lib-pdf-img {
  display: block;
  max-width: 100%;
  max-height: min(70vh, 640px);
  margin: 0 auto;
  object-fit: contain;
  background: #111;
}

/* Hub cliente → Documentos */
.mc-hub-pane[data-mc-hub-pane="documentos"] {
  min-width: 0;
  overflow-x: hidden;
}
.mc-docs-pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.mc-docs-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
}
.mc-docs-view[hidden] {
  display: none !important;
}
.mc-docs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0;
}
.mc-docs-lede,
.mc-docs-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--sys-text, #fff);
}
.mc-docs-lede {
  min-width: 0;
  flex: 1 1 auto;
}
.mc-docs-head .hint {
  margin: 4px 0 0;
}
.mc-docs-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex: 0 0 auto;
}
.mc-docs-head .btn-primary,
.mc-docs-cta {
  width: auto !important;
  margin-top: 0 !important;
  padding: 7px 12px;
  font-size: 0.8rem;
  flex: 0 0 auto;
  white-space: nowrap;
}
.mc-docs-cta-sm {
  padding: 6px 11px;
  font-size: 0.76rem;
}
.mc-docs-grant-title-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.mc-docs-grant-copy {
  min-width: 0;
}
.mc-docs-back {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.mc-docs-back-ico {
  width: 18px;
  height: 18px;
  transform: rotate(90deg);
}
.mc-docs-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--hairline, rgba(255,255,255,0.1));
  border-radius: 10px;
  background: var(--sys-surface-2, #121212);
}
.mc-docs-search .nav-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--muted, #9ca3af);
}
.mc-docs-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px 0;
  font: inherit;
  font-size: 0.88rem;
  color: var(--text, #fff);
}
.mc-docs-search input:focus {
  outline: none;
}
.mc-docs-table-wrap {
  border: 1px solid var(--hairline, rgba(255,255,255,0.08));
  border-radius: 12px;
  overflow-x: hidden;
  max-width: 100%;
  background: var(--sys-surface, #1a1a1a);
}
.mc-docs-table,
.cf-docs-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
}
.mc-docs-col-name { width: 40%; }
.mc-docs-col-desc { width: 22%; }
.mc-docs-col-vis { width: 16%; }
.mc-docs-col-author { width: 10%; }
.mc-docs-col-act { width: 132px; }
.mc-docs-table th,
.mc-docs-table td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--hairline, rgba(255,255,255,0.06));
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-docs-table th {
  color: var(--muted, #9ca3af);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.mc-docs-table td {
  color: var(--sys-text, #fff);
}
.mc-docs-name-cell {
  max-width: 0;
}
.mc-docs-name,
.cf-docs-name,
.mc-docs-file,
.cf-docs-file {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.mc-docs-name,
.cf-docs-name {
  font-weight: 650;
}
.mc-docs-file,
.cf-docs-file {
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted, #9ca3af);
}
.mc-docs-table .mc-docs-desc {
  color: var(--muted, #9ca3af);
}
.mc-docs-actions-col,
.mc-docs-table td.mc-docs-actions-cell {
  width: 132px;
  white-space: nowrap;
  text-align: right;
  overflow: visible;
}
.mc-docs-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.mc-docs-actions .roster-inline-action {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}
.mc-docs-grant-btn {
  white-space: nowrap;
  padding: 4px 10px;
  font-size: 0.72rem;
  line-height: 1.2;
  border-radius: 999px;
  flex: 0 0 auto;
}
.mc-docs-empty {
  text-align: center;
  color: var(--muted, #9ca3af);
  padding: 36px 16px;
}

/* ── Librería Formularios ────────────────────────────────────────── */
.forms-lib-workspace {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
.forms-lib-toolbar {
  margin-bottom: 12px;
}
.forms-lib-toolbar .usuarios-client-search {
  flex: 1 1 280px;
  max-width: 420px;
}
.forms-lib-table-wrap {
  border: 1px solid var(--hairline, rgba(255,255,255,0.08));
  border-radius: var(--radius-lg, 12px);
  background: var(--sys-surface, #1a1a1a);
  overflow-x: auto;
  overflow-y: visible;
}
.forms-lib-table .forms-lib-desc-cell {
  color: var(--sys-muted, #9ca3af);
  max-width: 260px;
}
.forms-lib-check-col {
  width: 40px;
  text-align: center;
}
.forms-col-actions {
  width: 168px;
  min-width: 168px;
}
.forms-lib-table th.usuarios-roster-actions-col,
.forms-lib-table td.forms-lib-actions-cell,
.forms-lib-table td.usuarios-roster-actions-col {
  width: 168px;
  min-width: 168px;
  max-width: none;
  overflow: visible !important;
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 10px;
}
.forms-lib-actions-cell .roster-inline-actions,
.forms-lib-actions {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  min-width: 148px;
  overflow: visible;
}
.forms-lib-actions .roster-inline-action {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}
.forms-lib-persist-hint {
  margin: 10px 0 0;
  font-size: 0.78rem;
}
.forms-lib-persist-hint code {
  font-size: 0.72rem;
  opacity: 0.85;
}
.forms-lib-sort {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.forms-lib-sort.is-active {
  color: var(--brand, #e85d04);
}
.forms-lib-sort.is-active::after {
  content: attr(data-dir);
  margin-left: 4px;
  font-size: 0.7rem;
  text-transform: uppercase;
  opacity: 0.7;
}
.forms-lib-sort[data-dir="asc"].is-active::after { content: "↑"; }
.forms-lib-sort[data-dir="desc"].is-active::after { content: "↓"; }
.forms-lib-name {
  color: var(--brand, #e85d04);
  font-weight: 600;
}
.forms-lib-tipo-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline, rgba(255,255,255,0.14));
  background: transparent;
  color: var(--sys-text, #f3f4f6);
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.forms-lib-tipo-badge.is-auto {
  background: var(--sys-text, #f3f4f6);
  color: #111;
  border-color: transparent;
  font-weight: 600;
}
.forms-lib-creator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.forms-lib-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--brand, #e85d04) 35%, #222);
  color: #fff;
  flex: 0 0 auto;
}
.forms-lib-meta-body .field {
  margin-bottom: 14px;
}
.forms-lib-meta-body .req {
  color: var(--brand, #e85d04);
}

/* Builder — near-fullscreen dialog */
dialog.forms-lib-builder-dialog.modal-dialog {
  --modal-w: min(1120px, calc(100vw - 32px));
  width: var(--modal-w);
  max-width: var(--modal-w);
  height: min(92vh, 860px);
  max-height: min(92vh, 860px);
  padding: 0;
  overflow: hidden;
}
dialog.forms-lib-builder-dialog.modal-dialog > .forms-lib-builder {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--sys-bg, #121212);
}
.forms-lib-builder-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline, rgba(255,255,255,0.08));
  flex: 0 0 auto;
}
.forms-lib-builder-eyebrow {
  margin: 0 0 2px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sys-muted, #9ca3af);
}
.forms-lib-builder-title-wrap h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}
.forms-lib-builder-desc {
  margin: 4px 0 0;
}
.forms-lib-builder-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.forms-lib-builder-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.forms-lib-builder-canvas {
  overflow: auto;
  padding: 20px 24px 28px;
  background:
    radial-gradient(ellipse at top, color-mix(in srgb, var(--brand, #e85d04) 8%, transparent), transparent 55%),
    var(--sys-bg, #121212);
}
.forms-lib-questions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
}
.forms-lib-q-empty {
  text-align: center;
  padding: 32px 12px;
}
.forms-lib-q-card {
  position: relative;
  background: var(--sys-surface, #1a1a1a);
  border: 1px solid var(--hairline, rgba(255,255,255,0.1));
  border-radius: 14px;
  padding: 16px 18px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.forms-lib-q-card:hover {
  border-color: color-mix(in srgb, var(--brand, #e85d04) 35%, transparent);
}
.forms-lib-q-card.is-selected {
  border-color: var(--brand, #e85d04);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand, #e85d04) 40%, transparent);
}
.forms-lib-q-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.forms-lib-q-drag {
  color: var(--sys-muted, #777);
  letter-spacing: -2px;
  font-size: 0.85rem;
  user-select: none;
}
.forms-lib-q-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--brand, #e85d04);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}
.forms-lib-q-badge .nav-ico {
  width: 12px;
  height: 12px;
}
.forms-lib-q-type-pill {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--sys-muted, #9ca3af);
  border: 1px solid var(--hairline, rgba(255,255,255,0.1));
  border-radius: 999px;
  padding: 3px 8px;
}
.forms-lib-q-title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 600;
}
.forms-lib-q-desc {
  margin: 0 0 12px;
  font-size: 0.86rem;
  color: var(--sys-muted, #9ca3af);
}
.forms-lib-q-desc.is-placeholder {
  opacity: 0.55;
  font-style: italic;
}
.forms-lib-preview-input,
.forms-lib-preview-textarea,
.forms-lib-preview-num,
.forms-lib-preview-file {
  border: 1px solid var(--hairline, rgba(255,255,255,0.12));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface-2, #222) 80%, transparent);
  color: var(--sys-muted, #9ca3af);
  padding: 10px 12px;
  font-size: 0.88rem;
}
.forms-lib-preview-textarea {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.forms-lib-preview-num {
  max-width: 120px;
}
.forms-lib-preview-scale {
  display: flex;
  gap: 8px;
}
.forms-lib-preview-scale span {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-radius: 8px;
  border: 1px solid var(--hairline, rgba(255,255,255,0.12));
  font-weight: 600;
  font-size: 0.85rem;
}
.forms-lib-preview-yesno {
  display: flex;
  gap: 10px;
}
.forms-lib-preview-yesno span {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--hairline, rgba(255,255,255,0.12));
  font-weight: 600;
}
.forms-lib-preview-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.forms-lib-preview-opts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.forms-lib-preview-opts li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}
.forms-lib-preview-radio,
.forms-lib-preview-checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--sys-muted, #888);
  flex: 0 0 auto;
}
.forms-lib-preview-radio { border-radius: 50%; }
.forms-lib-preview-checkbox { border-radius: 4px; }
.forms-lib-q-help {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--sys-muted, #9ca3af);
}
.forms-lib-q-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline, rgba(255,255,255,0.06));
}
.forms-lib-q-card-actions .danger {
  color: #f87171;
}
.forms-lib-add-q-wrap {
  position: relative;
  max-width: 720px;
  margin: 18px auto 0;
  display: flex;
  justify-content: center;
}
.forms-lib-add-q {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 0;
  background: #2a2a2a;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}
.forms-lib-add-q:hover {
  background: #333;
}
.forms-lib-add-q-plus {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand, #e85d04);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
}
.forms-lib-q-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  background: var(--sys-surface, #1e1e1e);
  border: 1px solid var(--hairline, rgba(255,255,255,0.12));
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  padding: 6px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.forms-lib-q-menu[hidden] {
  display: none;
}
.forms-lib-q-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--sys-text, #f3f4f6);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.88rem;
  cursor: pointer;
}
.forms-lib-q-menu button:hover {
  background: color-mix(in srgb, var(--brand, #e85d04) 18%, transparent);
}
.forms-lib-q-sidebar {
  border-left: 1px solid var(--hairline, rgba(255,255,255,0.08));
  background: var(--sys-surface, #171717);
  padding: 18px 16px;
  overflow: auto;
}
.forms-lib-q-sidebar h4 {
  margin: 0 0 12px;
  font-size: 0.95rem;
}
.forms-lib-sidebar-fields .field {
  margin-bottom: 12px;
}
.forms-lib-sidebar-fields label {
  display: block;
  font-size: 0.78rem;
  margin-bottom: 4px;
  color: var(--sys-muted, #9ca3af);
}
.forms-lib-sidebar-fields input[type="text"],
.forms-lib-sidebar-fields textarea,
.forms-lib-sidebar-fields select {
  width: 100%;
}
.forms-lib-required-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 14px;
  font-size: 0.88rem;
  cursor: pointer;
}
.forms-lib-required-toggle input {
  accent-color: var(--brand, #e85d04);
  width: 18px;
  height: 18px;
}
.forms-lib-side-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.forms-lib-opt-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.forms-lib-opt-row input {
  flex: 1 1 auto;
  min-width: 0;
}
.forms-lib-builder-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--hairline, rgba(255,255,255,0.08));
  background: var(--sys-surface, #1a1a1a);
  flex: 0 0 auto;
}
.forms-lib-builder-footer .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
}
.forms-lib-builder-dialog.is-readonly .forms-lib-q-card {
  cursor: default;
}
@media (max-width: 860px) {
  .forms-lib-builder-body {
    grid-template-columns: 1fr;
  }
  .forms-lib-q-sidebar {
    border-left: 0;
    border-top: 1px solid var(--hairline, rgba(255,255,255,0.08));
    max-height: 40vh;
  }
  dialog.forms-lib-builder-dialog.modal-dialog {
    height: min(96vh, 920px);
  }
}

/* ── Librería → Logros ── */
.logros-lib-workspace {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}
.logros-lib-hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 2px 4px;
}
.logros-lib-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.2vw, 1.85rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--text, #f5f5f5);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.logros-lib-count {
  font-size: 0.95rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--text, #eee) 42%, transparent);
}
.logros-lib-blurb {
  margin: 0;
  max-width: 52rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text, #eee) 62%, transparent);
}
.logros-lib-toolbar {
  margin-top: 2px;
}
.logros-lib-toolbar .usuarios-client-search {
  flex: 1 1 280px;
  max-width: 420px;
}
.logros-lib-persist-hint {
  margin: 4px 0 0;
}
.logros-lib-persist-hint code {
  font-size: 0.85em;
}
.logros-lib-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.logros-lib-empty {
  padding: 28px 12px;
}
.logros-cat {
  border: 1px solid color-mix(in srgb, var(--border, #444) 88%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface, #1c1c1c) 92%, #000);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.logros-cat.is-open {
  border-color: color-mix(in srgb, var(--accent, #f97316) 35%, var(--border, #444));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #f97316) 12%, transparent);
}
.logros-cat-header {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 2px 6px 2px 2px;
}
.logros-cat-toggle {
  appearance: none;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: 10px 12px;
  margin: 0;
  padding: 12px 10px 12px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.logros-cat-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #f97316) 14%, transparent);
  color: var(--accent, #f97316);
}
.logros-cat-ico .nav-ico {
  width: 18px;
  height: 18px;
}
.logros-cat-name {
  font-weight: 680;
  color: var(--text, #f5f5f5);
  white-space: nowrap;
}
.logros-cat-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #f97316) 88%, #111);
  color: #111;
  font-size: 0.72rem;
  font-weight: 750;
}
.logros-cat-vis {
  justify-self: end;
  font-size: 0.82rem;
  white-space: nowrap;
}
.logros-cat-chevron {
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--text, #eee) 45%, transparent);
  transition: transform 0.18s ease;
}
.logros-cat.is-open .logros-cat-chevron {
  transform: rotate(180deg);
}
.logros-cat-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 4px;
}
.logros-cat-body {
  padding: 4px 16px 18px;
  border-top: 1px solid color-mix(in srgb, var(--border, #444) 70%, transparent);
}
.logros-cat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 28px 12px 12px;
}
.logros-cat-empty-art {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  opacity: 0.55;
}
.logros-cat-empty-art span {
  width: 42px;
  height: 48px;
  border-radius: 10px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent, #f97316) 28%, #333), #2a2a2a);
  clip-path: polygon(50% 0, 100% 18%, 100% 70%, 50% 100%, 0 70%, 0 18%);
}
.logros-cat-empty-art span:nth-child(2) {
  transform: translateY(-6px) scale(1.05);
  opacity: 0.9;
}
.logros-cat-empty-title {
  margin: 0;
  font-weight: 650;
  color: var(--text, #eee);
}
.logros-cat-add-wrap {
  display: flex;
  justify-content: center;
  padding: 10px 0 2px;
}
.logros-add-ach-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent, #f97316) 55%, var(--border, #444));
  background: transparent;
  color: var(--accent, #f97316);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.logros-add-ach-btn:hover {
  background: color-mix(in srgb, var(--accent, #f97316) 12%, transparent);
  border-color: var(--accent, #f97316);
}
.logros-ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 14px 0 4px;
}
.logros-ach-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border, #444) 85%, transparent);
  background: color-mix(in srgb, var(--sys-bg, #111) 55%, var(--surface, #1c1c1c));
  min-height: 148px;
}
.logros-ach-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
}
.logros-ach-thumb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent, #f97316) 10%, #222);
  border: 1px solid color-mix(in srgb, var(--border, #444) 80%, transparent);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  border-radius: 0;
}
.logros-ach-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.logros-ach-thumb-ph {
  color: color-mix(in srgb, var(--accent, #f97316) 70%, #fff);
}
.logros-ach-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  margin: -4px -4px 0 0;
}
.logros-ach-name {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text, #f5f5f5);
}
.logros-ach-cond {
  margin: 0;
  font-size: 0.78rem;
}

/* Category modal */
.logros-cat-body .req,
.logros-ach-body .req {
  color: #f87171;
  font-weight: 700;
}
.logros-vis-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
.logros-vis-fieldset legend {
  margin: 0 0 8px;
  font-weight: 650;
  font-size: 0.9rem;
}
.logros-vis-cards,
.logros-cond-cards,
.logros-dur-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.logros-vis-card,
.logros-cond-card {
  display: block;
  cursor: pointer;
}
.logros-vis-card input,
.logros-cond-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.logros-vis-card-inner,
.logros-cond-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border, #444) 90%, transparent);
  background: color-mix(in srgb, var(--surface, #1c1c1c) 88%, #000);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.logros-vis-card.is-on .logros-vis-card-inner,
.logros-cond-card.is-on .logros-cond-card-inner,
.logros-vis-card:has(input:checked) .logros-vis-card-inner,
.logros-cond-card:has(input:checked) .logros-cond-card-inner {
  border-color: color-mix(in srgb, var(--accent, #f97316) 70%, var(--border, #444));
  background: color-mix(in srgb, var(--accent, #f97316) 10%, var(--surface, #1c1c1c));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #f97316) 18%, transparent);
}
.logros-vis-card-ico,
.logros-cond-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #f97316) 14%, transparent);
  color: var(--accent, #f97316);
}
.logros-vis-card-text,
.logros-cond-card-inner > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.logros-vis-card-text strong,
.logros-cond-card-inner strong {
  font-weight: 680;
  color: var(--text, #f5f5f5);
}
.logros-vis-card-text span,
.logros-cond-card-inner .hint {
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--text, #eee) 58%, transparent);
}

.logros-cat-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.logros-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border, #444) 90%, transparent);
  background: color-mix(in srgb, var(--sys-bg, #111) 40%, transparent);
  font-size: 0.82rem;
  cursor: pointer;
}
.logros-group-chip input {
  margin: 0;
}
.logros-group-chip.is-on {
  border-color: color-mix(in srgb, var(--accent, #f97316) 65%, var(--border, #444));
  background: color-mix(in srgb, var(--accent, #f97316) 12%, transparent);
}
.logros-cat-note {
  margin-top: 12px;
}

/* Achievement wizard */
.logros-ach-dialog.modal-dialog {
  width: min(640px, calc(100vw - 24px));
}
.logros-ach-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.logros-section-title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
}
.logros-badge-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 148px;
  padding: 16px;
  border-radius: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--border, #444) 95%, transparent);
  background: color-mix(in srgb, var(--sys-bg, #111) 50%, transparent);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.logros-badge-drop:hover,
.logros-badge-drop.is-drag {
  border-color: var(--accent, #f97316);
  background: color-mix(in srgb, var(--accent, #f97316) 8%, transparent);
}
.logros-badge-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  color: color-mix(in srgb, var(--text, #eee) 70%, transparent);
}
.logros-badge-empty .nav-ico {
  width: 28px;
  height: 28px;
  color: var(--accent, #f97316);
}
.logros-badge-preview {
  width: 112px;
  height: 112px;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  overflow: hidden;
  background: #222;
}
.logros-badge-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.logros-cond-detail,
.logros-dur-detail {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border, #444) 80%, transparent);
  background: color-mix(in srgb, var(--sys-bg, #111) 35%, transparent);
}
.logros-cond-fields {
  display: grid;
  gap: 10px;
}
.logros-dur-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.logros-ach-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.logros-ach-footer .btn-primary {
  width: auto;
  min-width: 128px;
}
@media (max-width: 720px) {
  .logros-cat-toggle {
    grid-template-columns: auto 1fr auto;
  }
  .logros-cat-vis {
    justify-self: start;
  }
  .logros-dur-row {
    grid-template-columns: 1fr;
  }
}


/* ===== Biblioteca → Programas ===== */
.modal-dialog.modal-xl { --modal-w: min(1120px, 96vw); }
.programas-lib-workspace { position: relative; padding-bottom: 72px; }
.programas-lib-hero { margin-bottom: 12px; }
.programas-lib-title {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0; font-size: 1.65rem; font-weight: 750; color: var(--text, #f5f5f5);
}
.programas-lib-count {
  font-size: 0.95rem; font-weight: 650; color: var(--accent, #ff6a00);
}
.programas-lib-blurb {
  margin: 6px 0 0; max-width: 62ch; color: var(--muted, #a3a3a3); font-size: 0.92rem; line-height: 1.45;
}
.programas-lib-toolbar { margin-bottom: 10px; }
/* H-scroll like Mis clientes: outer clip, inner .mc-table-xscroll scrolls */
.programas-lib-table-wrap {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow-x: hidden;
  overflow-y: visible;
  background: var(--sys-surface, #1a1a1a);
}
.programas-lib-table-xscroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.programas-lib-table {
  width: 100%;
  min-width: 1120px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.programas-lib-table .programas-col-check { width: 42px; text-align: center; }
.programas-col-nombre { min-width: 160px; width: 180px; }
.programas-col-desc { min-width: 200px; width: 240px; }
.programas-col-semanas { width: 88px; min-width: 88px; }
.programas-col-actualizado { width: 110px; min-width: 110px; }
.programas-col-auto { width: 110px; min-width: 110px; }
.programas-col-creador { min-width: 120px; width: 140px; }
.programas-col-creacion { width: 110px; min-width: 110px; }
.programas-col-actions {
  width: 148px;
  min-width: 148px;
}
.programas-lib-table .usuarios-roster-actions-col,
.programas-lib-table th.usuarios-roster-actions-col,
.programas-lib-table td.usuarios-roster-actions-col {
  width: 148px;
  min-width: 148px;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
  text-align: center;
  padding-right: 8px;
}
.programas-lib-table td.usuarios-roster-actions-col .roster-inline-actions {
  justify-content: center;
  width: auto;
}
.programas-lib-table td.programas-name-cell {
  padding: 4px 6px;
  vertical-align: middle;
}
.programas-name-link {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: none;
  border: 1px solid transparent;
  margin: 0;
  padding: 8px 10px;
  color: var(--accent, #e85d4c);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 10px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}
.programas-name-link:hover,
.programas-name-link:focus-visible {
  text-decoration: none;
  color: color-mix(in srgb, var(--accent, #e85d4c) 72%, var(--text, #f5f5f5));
  background: color-mix(in srgb, var(--accent, #e85d4c) 16%, var(--sys-surface, #171f1c));
  border-color: color-mix(in srgb, var(--accent, #e85d4c) 38%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, #e85d4c) 18%, transparent);
  transform: translateY(-1px);
  outline: none;
}
.programas-desc-cell {
  max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--muted, #a3a3a3);
}
.programas-row.is-selected { background: rgba(255,106,0,0.08); }
.programas-auto-yes, .programas-auto-no {
  display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center;
  border-radius: 999px;
}
.programas-auto-yes { color: #4ade80; background: rgba(74,222,128,0.12); }
.programas-auto-no { color: #737373; background: rgba(255,255,255,0.04); }
.programas-empty { padding: 36px 16px; text-align: center; }
.programas-lib-persist-hint { margin-top: 12px; }
.programas-lib-persist-hint code { font-size: 0.85em; }
#programas-bulk-bar { position: sticky; bottom: 12px; z-index: 5; }

.programas-editor-dialog .modal-body { max-height: min(72vh, 760px); overflow: auto; }
.programas-editor-section { margin-bottom: 22px; }
.programas-editor-section-title {
  margin: 0 0 10px; font-size: 0.95rem; font-weight: 700; color: var(--text, #f5f5f5);
}
.programas-auto-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
@media (max-width: 720px) {
  .programas-auto-grid { grid-template-columns: 1fr; }
}
.programas-auto-cb-sr {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.programas-auto-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  width: 100%; text-align: left; padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03);
  color: inherit; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.programas-auto-card:hover {
  border-color: rgba(255,106,0,0.35); background: rgba(255,106,0,0.06);
}
.programas-auto-card.is-selected {
  border-color: var(--accent, #ff6a00);
  background: rgba(255,106,0,0.1);
  box-shadow: inset 0 0 0 1px rgba(255,106,0,0.25);
}
.programas-auto-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-weight: 650;
}
.programas-auto-card-title { font-size: 0.95rem; }
.programas-auto-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.25); color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.programas-auto-check .nav-ico { width: 14px; height: 14px; }
.programas-auto-card.is-selected .programas-auto-check {
  border-color: var(--accent, #ff6a00);
  background: var(--accent, #ff6a00);
  color: #111;
}
.programas-auto-card .hint { margin: 0; font-size: 0.8rem; opacity: 0.75; }
.programas-auto-link-panel {
  margin-top: 8px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 6px;
}
.programas-auto-link-panel[hidden] { display: none !important; }
.programas-auto-link-panel .field-label {
  font-size: 0.78rem; font-weight: 600; color: var(--muted, #a3a3a3);
}
.programas-auto-card select,
.programas-auto-link-panel select {
  width: 100%; margin-top: 0;
}
.programas-auto-link-empty { margin: 0; color: #fbbf24; }

/* Hub task modal — Programas template mode */
.mc-hub-task-dialog.is-program-template .mc-hub-task-date-field input[type="date"] {
  display: none;
}
.mc-hub-task-date-relative {
  margin: 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  font-weight: 650; color: var(--text, #f5f5f5);
}
.mc-hub-task-date-relative[hidden] { display: none !important; }
.mc-hub-task-repeat-na { margin: 0; grid-column: 1 / -1; }
.mc-hub-task-dialog.is-program-template .mc-hub-task-repeat-row { display: none !important; }
.mc-hub-task-dialog:not(.is-program-template) .mc-hub-task-repeat-na { display: none !important; }
.mc-hub-task-dialog:not(.is-program-template) .mc-hub-task-date-relative { display: none !important; }
.programas-content-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.programas-weeks-host { display: flex; flex-direction: column; gap: 14px; }
.programas-week-card {
  border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
  background: rgba(0,0,0,0.25); padding: 12px;
}
.programas-week-card.is-dragging { opacity: 0.55; outline: 1px dashed var(--accent, #ff6a00); }
.programas-week-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px; cursor: grab;
}
.programas-week-label { font-weight: 700; }
.programas-week-actions { display: flex; gap: 4px; }
.programas-days-row {
  display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 8px;
  overflow-x: auto; padding-bottom: 4px;
}
.programas-day-col {
  min-height: 140px; display: flex; flex-direction: column; gap: 6px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025); padding: 8px;
}
.programas-day-head {
  font-size: 0.78rem; font-weight: 700; color: var(--muted, #a3a3a3);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.programas-day-tasks { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.programas-day-empty { font-size: 0.78rem; }
.programas-day-add {
  margin-top: auto; align-self: center; width: 30px; height: 30px; border-radius: 999px;
  border: 1px solid rgba(255,106,0,0.45); background: rgba(255,106,0,0.12);
  color: var(--accent, #ff6a00); font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.programas-day-add:hover { background: rgba(255,106,0,0.22); }
.programas-day-add { position: relative; z-index: 2; -webkit-user-drag: none; }

/* Hub chip actions / move-copy — use FitModal modal-dialog (centered + blur) */
.fitos-chip-actions.modal-dialog {
  --modal-w: 360px;
}
.fitos-chip-actions-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.fitos-chip-actions-body {
  display: grid;
  gap: 8px;
}
.fitos-chip-actions-body .btn-primary,
.fitos-chip-actions-body .ghost {
  min-height: 40px;
  width: 100%;
  justify-content: center;
}
.fitos-chip-actions-body .danger {
  color: #fecaca;
  border-color: rgba(185, 28, 28, 0.45);
}
.fitos-chip-actions-body .danger:hover {
  background: rgba(185, 28, 28, 0.18);
}

.programas-task-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  width: 100%; border: 0; border-radius: 8px; padding: 5px 7px;
  font-size: 0.72rem; font-weight: 650; text-align: left; cursor: pointer;
  color: #fff; background: rgba(255,255,255,0.08);
}
.programas-task-chip.tone-entren { background: rgba(180,83,9,0.45); }
.programas-task-chip.tone-cardio { background: rgba(185,28,28,0.4); }
.programas-task-chip.tone-nutri { background: rgba(21,128,61,0.4); }
.programas-task-chip.tone-doc { background: rgba(71,85,105,0.55); }
.programas-task-chip.tone-evo { background: rgba(13,148,136,0.45); }
.programas-task-chip.tone-sesion { background: rgba(124,58,237,0.4); }
.programas-task-chip.tone-programa { background: rgba(82,82,82,0.55); }
.programas-task-chip.tone-form { background: rgba(22,101,52,0.5); }
.programas-task-chip.tone-wellness { background: rgba(126,34,206,0.45); }
.programas-task-chip.tone-fisio { background: rgba(3,105,161,0.45); }
.programas-task-x { opacity: 0.75; font-size: 0.95rem; }



/* —— Agenda › Tipos de sesiones —— */
.session-types-workspace { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.session-types-persist-hint { margin: 4px 0 0; opacity: 0.75; font-size: 0.8rem; }
.session-types-persist-hint code { font-size: 0.85em; }
.session-types-table .col-name { width: 36%; }
.session-types-table .col-color { width: 28%; }
.session-types-table .col-created { width: 18%; }
.session-types-table .col-actions { width: 18%; }
.session-type-swatch-row {
  display: inline-flex; align-items: center; gap: 8px;
}
.session-type-name-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-top: 4px; min-height: 1.2em;
}
.session-type-name-meta .field-error {
  color: var(--danger, #f87171); font-size: 0.8rem;
}
.session-type-name-meta .char-count { margin-left: auto; white-space: nowrap; }
.session-type-visible-row { margin: 10px 0 14px; }
.session-type-color-row { margin-top: 6px; }
.session-type-preview { margin-top: 16px; }
.session-type-preview-label { margin: 0 0 8px; }
.session-type-preview-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--hairline, rgba(255,255,255,0.1));
  border-left: 4px solid #3B82F6;
  background: color-mix(in srgb, #3B82F6 18%, transparent);
}
.session-type-preview-dot {
  width: 10px; height: 10px; border-radius: 50%; margin-top: 5px;
  background: #3B82F6; flex-shrink: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, #3B82F6 35%, transparent);
}
.session-type-preview-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.session-type-preview-text strong {
  font-size: 0.92rem; font-weight: 650; color: var(--text, #f5f5f5);
}

/* —— Agenda › Actividad —— */
.agenda-actividad-workspace {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: min(62vh, 640px);
  position: relative;
}
.agenda-actividad-toolbar {
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.agenda-actividad-range {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--sys-border) 80%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary, #F59E0B) 8%, transparent), transparent 55%),
    color-mix(in srgb, var(--sys-surface) 88%, transparent);
}
.agenda-actividad-date-field input[type="date"] {
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-weight: 560;
  padding: 4px 2px;
  min-width: 9.5rem;
  color-scheme: dark;
}
.agenda-actividad-range-sep {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
}
.agenda-actividad-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--primary, #F59E0B) 35%, var(--sys-border));
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
}
.agenda-actividad-filter-btn:hover {
  background: color-mix(in srgb, var(--primary, #F59E0B) 14%, transparent);
}
.agenda-actividad-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px 24px;
  position: relative;
  z-index: 1;
}
.agenda-actividad-feed::before {
  content: "";
  position: absolute;
  inset: 8% 12% auto;
  height: 220px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.22;
  background:
    radial-gradient(ellipse at 30% 40%, color-mix(in srgb, var(--primary, #F59E0B) 35%, transparent), transparent 60%),
    radial-gradient(ellipse at 70% 60%, color-mix(in srgb, #38bdf8 22%, transparent), transparent 55%);
  filter: blur(8px);
}
.actividad-day-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 2px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.actividad-day-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary, #F59E0B) 40%, transparent), transparent);
}
.actividad-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px 14px;
  align-items: start;
  position: relative;
  z-index: 1;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--sys-border) 85%, transparent);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--sys-surface) 92%, #000) 0%, color-mix(in srgb, var(--sys-surface) 70%, transparent) 100%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  transition: border-color 160ms ease, transform 160ms ease;
}
.actividad-row:hover {
  border-color: color-mix(in srgb, var(--primary, #F59E0B) 45%, var(--sys-border));
  transform: translateY(-1px);
}
.actividad-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--primary, #F59E0B) 75%, #fff);
  padding-top: 2px;
}
.actividad-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.actividad-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.actividad-action-chip,
.actividad-loc-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.actividad-action-chip {
  background: color-mix(in srgb, var(--primary, #F59E0B) 22%, transparent);
  color: #ffe7b8;
  border-color: color-mix(in srgb, var(--primary, #F59E0B) 35%, transparent);
}
.actividad-action-chip.tone-booking_cancelled,
.actividad-action-chip.tone-waitlist_cancelled,
.actividad-action-chip.tone-session_deleted {
  background: color-mix(in srgb, #f87171 22%, transparent);
  color: #fecaca;
  border-color: color-mix(in srgb, #f87171 35%, transparent);
}
.actividad-action-chip.tone-waitlist {
  background: color-mix(in srgb, #38bdf8 20%, transparent);
  color: #bae6fd;
  border-color: color-mix(in srgb, #38bdf8 35%, transparent);
}
.actividad-action-chip.tone-session_created,
.actividad-action-chip.tone-session_edited {
  background: color-mix(in srgb, #a78bfa 20%, transparent);
  color: #ddd6fe;
  border-color: color-mix(in srgb, #a78bfa 35%, transparent);
}
.actividad-loc-chip.is-online {
  background: rgba(15, 23, 42, 0.75);
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.35);
}
.actividad-loc-chip.is-presencial {
  background: color-mix(in srgb, #10b981 18%, transparent);
  color: #bbf7d0;
  border-color: color-mix(in srgb, #10b981 32%, transparent);
}
.actividad-copy {
  margin: 0;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
  font-size: 0.92rem;
  line-height: 1.45;
}
.actividad-actor { color: var(--text); font-weight: 720; }
.actividad-session {
  display: inline-block;
  padding: 1px 8px;
  margin: 0 2px;
  border-radius: 8px;
  font-weight: 700;
  color: #fff;
  background: color-mix(in srgb, var(--act-color, #F59E0B) 55%, #111);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--act-color, #F59E0B) 55%, transparent);
}
.actividad-when { color: var(--muted); font-weight: 500; }
.actividad-bene { color: var(--text); font-weight: 680; }
.agenda-actividad-empty {
  margin: 28px auto 12px;
  text-align: center;
  max-width: 28rem;
  padding: 28px 18px;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--sys-border) 90%, transparent);
  background: color-mix(in srgb, var(--sys-surface) 55%, transparent);
  position: relative;
  z-index: 1;
}
.agenda-actividad-drawer-root:not(.hidden) {
  display: block;
}
.agenda-actividad-drawer-root.hidden {
  display: none !important;
}
.agenda-actividad-drawer {
  width: min(420px, 100vw);
}
.agenda-actividad-drawer-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.actividad-filter-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.actividad-filter-section:last-child { border-bottom: 0; padding-bottom: 0; }
.actividad-filter-h {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.actividad-radio-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.actividad-radio,
.actividad-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
}
.actividad-radio input,
.actividad-check input {
  accent-color: var(--primary, #F59E0B);
}
.actividad-audience-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface) 70%, #000);
  border: 1px solid var(--hairline);
  width: fit-content;
}
.actividad-audience-tabs .centro-subnav-btn {
  padding: 6px 12px;
  font-size: 0.82rem;
}
.actividad-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 168px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--sys-surface) 65%, transparent);
}
.actividad-check-empty { padding: 6px 2px; }
.actividad-type-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}
.agenda-actividad-drawer-foot {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.agenda-actividad-drawer-foot .ghost,
.agenda-actividad-drawer-foot .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.actividad-drawer-open { overflow: hidden; }
@media (max-width: 720px) {
  .actividad-row { grid-template-columns: 46px minmax(0, 1fr); padding: 10px 12px; }
  .agenda-actividad-range { width: 100%; justify-content: space-between; }
}

/* —— Agenda › Horario de citas —— */
.agenda-horario-workspace {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: min(62vh, 640px);
}
.agenda-horario-toolbar {
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.agenda-horario-lede {
  margin: 0;
  max-width: 52rem;
  line-height: 1.45;
  color: var(--muted);
}
.agenda-horario-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.horario-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--sys-border) 70%, transparent);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--hw-accent, var(--primary)) 14%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--sys-surface) 92%, #000), color-mix(in srgb, var(--sys-surface) 78%, #0a0a0a));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--hw-accent, var(--primary)) 12%, transparent),
    0 18px 40px -28px rgba(0, 0, 0, 0.75);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.horario-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--hw-accent, var(--primary)) 45%, var(--sys-border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--hw-accent, var(--primary)) 22%, transparent),
    0 22px 48px -24px rgba(0, 0, 0, 0.85);
}
.horario-card.is-inactive {
  opacity: 0.62;
  filter: saturate(0.7);
}
.horario-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.horario-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.horario-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 720;
  letter-spacing: -0.01em;
}
.ced-dot.is-off {
  background: color-mix(in srgb, var(--muted) 70%, transparent);
  box-shadow: none;
}
.horario-card-actions {
  position: relative;
  flex-shrink: 0;
}
.horario-gear {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 1rem;
}
.horario-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 168px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--sys-border) 80%, transparent);
  background: color-mix(in srgb, var(--sys-surface) 96%, #000);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.horario-menu button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
}
.horario-menu button:hover {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}
.horario-menu button.danger {
  color: #f87171;
}
.horario-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.horario-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.horario-pill.is-type {
  background: color-mix(in srgb, var(--pill, var(--primary)) 28%, transparent);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--pill, var(--primary)) 50%, transparent);
}
.horario-pill.is-mode {
  background: color-mix(in srgb, #94a3b8 18%, transparent);
  color: color-mix(in srgb, var(--text) 88%, #94a3b8);
  border: 1px solid color-mix(in srgb, #94a3b8 28%, transparent);
}
.horario-pill.is-off {
  background: color-mix(in srgb, #64748b 22%, transparent);
  color: var(--muted);
}
.horario-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  color: var(--muted);
  font-size: 0.86rem;
}
.horario-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.horario-card-meta .nav-ico {
  width: 15px;
  height: 15px;
  opacity: 0.85;
}
.horario-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--sys-border) 55%, transparent);
}
.horario-org {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 600;
}
.horario-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 750;
  color: #fff;
  background: linear-gradient(135deg, var(--primary, #f59e0b), #9a3412);
  flex-shrink: 0;
}
.horario-toggle-btn {
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--sys-border) 80%, transparent) !important;
}
.agenda-horario-empty {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 36px 28px;
  border-radius: 18px;
  border: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--sys-border));
  background:
    radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 55%),
    color-mix(in srgb, var(--sys-surface) 70%, transparent);
}
/* display:flex beats UA [hidden]{display:none} — keep empty hidden when list has cards */
.agenda-horario-empty[hidden] {
  display: none !important;
}
.agenda-horario-empty h4 {
  margin: 0;
  position: relative;
  z-index: 1;
}
.agenda-horario-empty .hint,
.agenda-horario-empty .btn-primary {
  position: relative;
  z-index: 1;
}
.agenda-horario-empty-glow {
  position: absolute;
  inset: auto -20% -40% 40%;
  height: 180px;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 28%, transparent), transparent 70%);
  pointer-events: none;
}

.horario-wizard-dialog .horario-wizard-header {
  align-items: flex-start;
}
.horario-wizard-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.horario-live-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.horario-sum-card {
  flex: 1 1 160px;
  min-width: 140px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--sys-border) 70%, transparent);
  background: color-mix(in srgb, var(--sys-surface) 70%, transparent);
}
.horario-sum-card.is-on {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--sys-border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--sys-surface) 80%, transparent);
}
.horario-sum-card.is-dim {
  opacity: 0.78;
}
.horario-sum-card .nav-ico {
  width: 14px;
  height: 14px;
}
.horario-covers .csw-cover.tone-5 {
  background: linear-gradient(135deg, #f59e0b, #7c2d12 55%, #1e293b);
}
.horario-radio-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.horario-radio-row.is-dim,
.horario-range-wrap.is-dim {
  opacity: 0.45;
  pointer-events: none;
}
.horario-radio-row.is-active {
  opacity: 1;
}
.horario-range-wrap {
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--sys-border) 65%, transparent);
}
.horario-custom-dur {
  display: flex;
  gap: 8px;
  align-items: center;
}
.horario-custom-dur input {
  width: 7rem;
}
.horario-weekly {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.horario-day-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--sys-border) 55%, transparent);
  background: color-mix(in srgb, var(--sys-surface) 55%, transparent);
}
.horario-day-row.is-off {
  opacity: 0.55;
}
.horario-day-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  padding-top: 6px;
}
.horario-day-ranges {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.horario-range-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.horario-range-row input[type="time"] {
  min-width: 7.5rem;
}
.horario-range-spacer {
  width: 34px;
}
.horario-margin-extra {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.horario-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.horario-detail-dialog .modal-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.horario-detail-hero {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--hw-accent, var(--primary)) 30%, var(--sys-border));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--hw-accent, var(--primary)) 16%, transparent), transparent 50%),
    color-mix(in srgb, var(--sys-surface) 80%, transparent);
}
.horario-detail-meta {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}
.horario-detail-meta li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.horario-detail-meta .nav-ico {
  width: 15px;
  height: 15px;
}
.horario-desc-details {
  margin-top: 12px;
}
.horario-desc-details summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 650;
}
.horario-detail-section h4 {
  margin: 0 0 8px;
  font-size: 0.92rem;
}
.horario-org-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--sys-border) 70%, transparent);
  background: color-mix(in srgb, var(--sys-surface) 70%, transparent);
}
.horario-detail-avail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.horario-detail-avail-head h4 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.horario-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.35rem;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.75rem;
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
}
.horario-detail-avail-head input[type="search"] {
  min-width: min(100%, 220px);
}
.horario-detail-clients {
  max-height: 220px;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--sys-border) 65%, transparent);
  padding: 6px;
}
.horario-detail-client {
  padding: 8px 10px;
  border-radius: 8px;
}
.horario-detail-client:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
@media (max-width: 720px) {
  .horario-day-row {
    grid-template-columns: 1fr;
  }
  .agenda-horario-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Negocio · Phase 1 — Pulso / Cobros / Oferta
   ═══════════════════════════════════════════════════════════════════════ */

.negocio-shell {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 140px);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--sys-surface) 88%, #000);
}

.negocio-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 10px;
  border-right: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface) 70%, #0a0a0a);
}

.negocio-rail-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  padding: 12px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.negocio-rail-item:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.negocio-rail-item.is-active {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--hairline));
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--primary);
}

.negocio-rail-item.is-active strong {
  color: var(--primary);
}

.negocio-rail-ico {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

.negocio-rail-ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.negocio-rail-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.negocio-rail-copy strong {
  font-size: 0.86rem;
  font-weight: 650;
}

.negocio-rail-copy em {
  font-style: normal;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--muted);
}

.negocio-main {
  padding: 16px 18px 22px;
  overflow: auto;
  min-width: 0;
}

.negocio-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.negocio-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sys-surface) 60%, #000);
  border: 1px solid var(--hairline);
}

.negocio-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.negocio-tab.is-active {
  color: #fff;
  background: color-mix(in srgb, var(--primary) 85%, #111);
}

.negocio-range-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.negocio-select {
  appearance: none;
  background: color-mix(in srgb, var(--sys-surface) 70%, #000);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.8rem;
}

.negocio-range-dates {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.negocio-range-picker {
  position: relative;
}

.negocio-range-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface) 70%, #000);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.negocio-range-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--hairline));
}

.negocio-range-preset-lab {
  font-weight: 650;
}

.negocio-range-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  width: min(360px, calc(100vw - 24px));
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface) 92%, #000);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.negocio-range-pop[hidden] {
  display: none !important;
}

.negocio-range-presets {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.negocio-range-presets button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.negocio-range-presets button:hover,
.negocio-range-presets button.is-on {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: #fff;
}

.negocio-range-cal {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
  user-select: none;
  touch-action: none;
}

.negocio-range-cal[hidden] {
  display: none !important;
}

.negocio-range-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.82rem;
}

.negocio-range-cal-nav {
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--primary);
  cursor: pointer;
}

.negocio-range-cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--muted);
}

.negocio-range-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.negocio-range-day {
  appearance: none;
  border: 0;
  min-height: 32px;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.negocio-range-day.is-out {
  color: color-mix(in srgb, var(--muted) 55%, transparent);
}

.negocio-range-day.is-in {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 0;
}

.negocio-range-day.is-start,
.negocio-range-day.is-end {
  background: var(--primary);
  color: var(--tenant-primary-contrast, #111);
  font-weight: 700;
  border-radius: 999px;
}

.negocio-range-cal-hint {
  margin: 8px 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.negocio-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.negocio-kpi {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 12px 11px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface) 75%, #000);
}

.negocio-kpi.is-warn strong {
  color: #fbbf24;
}

.negocio-kpi.is-pending {
  opacity: 0.92;
}

.negocio-kpi-ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
  flex: 0 0 auto;
}

.negocio-kpi-ico svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.negocio-kpi-label {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: 2px;
}

.negocio-kpi strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.negocio-kpi-delta {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 0.68rem;
  color: var(--muted);
}

.negocio-kpi-delta.is-up {
  color: #4ade80;
}

.negocio-kpi-delta.is-warn {
  color: #fbbf24;
}

.negocio-kpi-delta.is-pending {
  color: color-mix(in srgb, var(--primary) 80%, #fff);
}

.negocio-fin-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
}

.negocio-card {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px;
  background: color-mix(in srgb, var(--sys-surface) 72%, #000);
  min-width: 0;
}

.negocio-card-wide {
  grid-column: 1 / -1;
}

.negocio-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 14px;
  margin-bottom: 10px;
  flex-wrap: nowrap;
}

.negocio-card-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.negocio-card-head h4 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.negocio-card-head .hint {
  margin: 0;
  max-width: 68ch;
  line-height: 1.4;
  color: var(--muted);
  font-size: 0.78rem;
}

.negocio-svg {
  width: 100%;
  height: auto;
  display: block;
}

.negocio-svg .ng-grid {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
}

.negocio-svg .ng-axis {
  fill: var(--muted);
  font-size: 10px;
}

.negocio-svg .ng-line {
  stroke: var(--primary);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.negocio-donut-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.negocio-donut {
  width: 148px;
  height: 148px;
  flex: 0 0 auto;
}

.negocio-donut .ng-donut-title {
  fill: #fff;
  font-size: 12px;
  font-weight: 700;
}

.negocio-donut .ng-donut-sub {
  fill: var(--muted);
  font-size: 10px;
}

.negocio-donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 160px;
}

.negocio-donut-legend li {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 0.8rem;
}

.negocio-donut-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}

.negocio-donut-legend strong {
  font-variant-numeric: tabular-nums;
}

.negocio-legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 8px;
  font-size: 0.72rem;
  color: var(--muted);
}

.negocio-legend-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.negocio-legend-row i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

.negocio-hbar-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.negocio-hbar-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 8px;
  align-items: center;
}

.negocio-hbar-label {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.negocio-hbar-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.negocio-hbar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 70%, #111), var(--primary));
}

.negocio-hbar-val {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.negocio-demo-note {
  margin: 14px 0 0;
}

.negocio-btn-pending {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.72;
  cursor: not-allowed;
}

.negocio-chart-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  align-self: flex-start;
  margin: 0;
  width: auto;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--hairline));
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: color-mix(in srgb, var(--primary) 88%, #fff);
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0.88;
  cursor: not-allowed;
}

.negocio-chart-cta:disabled {
  opacity: 0.88;
  cursor: not-allowed;
}

.negocio-badge-demo {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
}

#negocio-finanzas-root,
#negocio-clientes-root,
#negocio-servicios-root {
  position: relative;
  min-height: 220px;
}

#negocio-finanzas-root.is-loading,
#negocio-clientes-root.is-loading,
#negocio-servicios-root.is-loading {
  pointer-events: none;
}

@keyframes ngSpin {
  to { transform: rotate(360deg); }
}

.negocio-spin {
  width: 20px;
  height: 20px;
  border: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: ngSpin 0.7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

.negocio-pane-loader {
  padding: 28px 10px 18px;
  text-align: center;
}

.negocio-pane-loader p {
  margin: 10px 0 18px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 650;
}

.negocio-skel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.negocio-skel {
  display: block;
  height: 72px;
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--sys-surface) 80%, #000) 0%,
    color-mix(in srgb, var(--primary) 14%, #1a1a1a) 50%,
    color-mix(in srgb, var(--sys-surface) 80%, #000) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}

.negocio-pane-refresh {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface) 88%, #000);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 650;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.ng-pane-in {
  animation: fadeIn 0.22s ease-out;
}

.negocio-chart-box {
  position: relative;
}

.negocio-chart-tip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  background: color-mix(in srgb, #111 88%, var(--primary));
  border: 1px solid var(--hairline);
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, calc(-100% - 10px));
}

.negocio-svg .ng-cursor {
  stroke: color-mix(in srgb, var(--primary) 55%, #fff);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  pointer-events: none;
}

.negocio-svg .ng-dot {
  fill: var(--primary);
  stroke: #111;
  stroke-width: 1.2;
  opacity: 0;
  pointer-events: none;
}

.negocio-svg .ng-dot.is-on {
  opacity: 1;
}

.negocio-svg .ng-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ng-draw 780ms var(--ease-out, ease-out) forwards;
}

.negocio-svg .ng-area {
  opacity: 0;
  animation: ng-fade 520ms 180ms var(--ease-out, ease-out) forwards;
}

.negocio-svg .ng-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: ng-rise 540ms var(--ease-out, ease-out) both;
}

.negocio-donut .ng-donut-seg {
  animation: ng-sweep 720ms var(--ease-out, ease-out) both;
}

.negocio-hbar-track span {
  transform-origin: left center;
  animation: ng-growx 500ms var(--ease-out, ease-out) both;
}

.negocio-hbar-row.is-on .negocio-hbar-label,
.negocio-hbar-row.is-on .negocio-hbar-val {
  color: #fff;
}

@keyframes ng-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes ng-fade {
  to { opacity: 1; }
}

@keyframes ng-rise {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes ng-sweep {
  from { stroke-dashoffset: 340; }
}

@keyframes ng-growx {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .negocio-svg .ng-line,
  .negocio-svg .ng-area,
  .negocio-svg .ng-bar,
  .negocio-donut .ng-donut-seg,
  .negocio-hbar-track span {
    animation: none;
  }
  .negocio-svg .ng-line {
    stroke-dashoffset: 0;
  }
}

.negocio-badge-pending {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: color-mix(in srgb, var(--primary) 90%, #fff);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
}

.negocio-chip-soon {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--muted);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.03);
}

.negocio-soon {
  padding: 28px 8px 12px;
}

.negocio-soon-badge {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.negocio-soon h3 {
  margin: 0 0 6px;
}

.negocio-soon > p {
  margin: 0 0 16px;
  color: var(--muted);
  max-width: 56ch;
}

.negocio-informes-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.negocio-informes-head h3 {
  margin: 0 0 4px;
}

.negocio-informes-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  max-width: 56ch;
}

.negocio-informes-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.negocio-fmt-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface) 70%, #000);
}

.negocio-fmt-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 650;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.negocio-fmt-switch button:hover {
  color: var(--text);
}

.negocio-fmt-switch button.is-on {
  background: var(--primary);
  color: #111;
}

.negocio-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.negocio-report-card {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px;
  background: color-mix(in srgb, var(--sys-surface) 72%, #000);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 198px;
}

.negocio-dl-wait {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--sys-surface) 86%, #000);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 650;
  text-align: center;
}

.negocio-report-ico {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.negocio-report-ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.negocio-report-card h4 {
  margin: 0;
  font-size: 0.9rem;
}

.negocio-report-card p {
  margin: 0;
  flex: 1;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}

.negocio-landing {
  padding: 8px 2px 18px;
}

.negocio-landing-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.negocio-kicker {
  margin: 0 0 4px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 700;
}

.negocio-landing-head h3 {
  margin: 0 0 6px;
}

.negocio-landing-head p {
  margin: 0;
  color: var(--muted);
  max-width: 58ch;
}

.negocio-landing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.negocio-landing-card {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 16px;
  background: color-mix(in srgb, var(--sys-surface) 75%, #000);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.negocio-landing-card h4 {
  margin: 0;
}

.negocio-landing-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  flex: 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1100px) {
  .negocio-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .negocio-fin-grid,
  .negocio-landing-grid {
    grid-template-columns: 1fr;
  }
  .negocio-report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .negocio-card-wide {
    grid-column: auto;
  }
}

@media (max-width: 860px) {
  .negocio-report-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .negocio-shell {
    grid-template-columns: 1fr;
  }
  .negocio-rail {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }
  .negocio-rail-item {
    min-width: 220px;
  }
  .negocio-rail-item.is-active {
    box-shadow: inset 0 -3px 0 var(--primary);
  }
}

/* ── Pulso › Tablero › Clientes ── */
#negocio-clientes-root.is-loading {
  pointer-events: none;
}

.cli-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.cli-toolbar-dates {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.cli-range-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface) 70%, #000);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.cli-range-btn.is-open,
.cli-range-btn.is-custom {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--hairline));
}

.cli-cal-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 8;
  width: min(320px, 92vw);
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, #111 92%, var(--sys-surface));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.cli-status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
  align-items: stretch;
}

.cli-status-card {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px 14px 14px;
  background: color-mix(in srgb, var(--sys-surface) 72%, #000);
  min-width: 0;
  min-height: 148px;
}

.cli-status-card:hover {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--hairline));
}

.cli-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.cli-status-head h4 {
  margin: 0;
  font-size: 0.86rem;
}

.cli-status-badge {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: #fff;
}

.cli-status-card.is-risk .cli-status-badge {
  background: color-mix(in srgb, #f59e0b 28%, transparent);
  color: #fbbf24;
}

.cli-status-card.is-done .cli-status-badge {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.cli-status-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cli-status-donut {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  overflow: visible;
}

.cli-status-donut .ng-donut-title {
  fill: #fff;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cli-status-donut .ng-donut-sub {
  fill: var(--muted);
  font-size: 7px;
}

.cli-prog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cli-prog-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: start;
}

.cli-prog-row span {
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--muted);
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}

.cli-prog-row strong {
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.cli-prog-track {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.cli-prog-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transform-origin: left center;
  animation: ng-growx 500ms var(--ease-out, ease-out) both;
}

.cli-funnel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  min-height: 140px;
}

.cli-funnel-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.cli-funnel-bar {
  width: 100%;
  max-width: 48px;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 80%, #fff), var(--primary));
  transform-origin: center bottom;
  animation: ng-rise 540ms var(--ease-out, ease-out) both;
}

.cli-funnel-col strong {
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.cli-funnel-col em {
  font-style: normal;
  font-size: 0.68rem;
  color: var(--muted);
  text-align: center;
}

.cli-caption {
  margin: 8px 0 0;
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.4;
  max-width: 72ch;
}

@media (prefers-reduced-motion: reduce) {
  .cli-prog-track i,
  .cli-funnel-bar {
    animation: none;
  }
}

@media (max-width: 1360px) {
  .cli-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .cli-status-grid,
  .cli-funnel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .cli-status-grid,
  .cli-funnel {
    grid-template-columns: 1fr;
  }
}

/* ── Pulso › Tablero › Servicios ── */
#negocio-servicios-root.is-loading {
  pointer-events: none;
}

.svc-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.negocio-chart-cta.is-live {
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
}

.negocio-chart-cta.is-live:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--primary) 26%, transparent);
}

.svc-hbar-fill {
  transform-box: fill-box;
  transform-origin: left center;
  animation: ng-growx 560ms var(--ease-out, ease-out) both;
}

.svc-dual-line {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.svc-mini-lab {
  margin: 0 0 6px;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 650;
}

.svc-rate-avg {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.svc-rate-avg strong {
  font-size: 1rem;
}

.svc-rate-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.svc-rate-row {
  display: grid;
  grid-template-columns: 10px minmax(72px, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
}

.svc-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: block;
}

.svc-rate-name {
  font-size: 0.78rem;
  color: var(--muted);
}

.svc-stars {
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.18);
  font-size: 0.85rem;
  line-height: 1;
}

.svc-star.is-on,
.svc-stars.is-lg .svc-star.is-on {
  color: #f5c451;
}

.svc-stars.is-lg {
  font-size: 1.05rem;
}

.svc-rate-row strong {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.svc-rate-row em {
  font-style: normal;
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .svc-hbar-fill {
    animation: none;
  }
}

@media (max-width: 1100px) {
  .svc-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .svc-dual-line {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .svc-kpi-grid {
    grid-template-columns: 1fr;
  }
  .svc-rate-row {
    grid-template-columns: 10px 1fr auto;
    grid-template-rows: auto auto;
  }
  .svc-rate-row em {
    grid-column: 2 / -1;
  }
}

/* ── Cobros / Oferta ── */
.cobros-panel-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.cobros-pane-title {
  margin: 0 0 4px;
  font-size: 1.15rem;
}
.cobros-pane-sub {
  margin: 0;
}
.cobros-kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.cobros-kpi {
  padding: 18px 18px 16px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface) 78%, #000);
}
.cobros-kpi .cobros-kpi-kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
}
.cobros-kpi strong {
  display: block;
  font-size: 1.7rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cobros-kpi-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 650;
}
.cobros-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cobros-toolbar .btn-primary {
  flex: 0 0 auto;
  width: auto;
  margin-top: 0;
  margin-left: auto;
  white-space: nowrap;
}
.cobros-search {
  flex: 1 1 220px;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 38px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface) 70%, #000);
}
.cobros-search svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  stroke: var(--muted);
  fill: none;
  stroke-width: 1.7;
}
.cobros-search input {
  flex: 1;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  min-width: 0;
}
.cobros-search input:focus {
  outline: none;
}
.cobros-filter-wrap {
  position: relative;
}
.cobros-filter-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 8;
  min-width: 200px;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--sys-surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.cobros-filter-pop label {
  display: block;
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: var(--muted);
}
.cobros-filter-pop select {
  width: 100%;
}
.cobros-table-wrap {
  overflow: auto;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: color-mix(in srgb, var(--sys-surface) 72%, #000);
}
.cobros-table-wrap .data-table {
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.cobros-table-wrap .data-table thead th {
  top: 0;
}
.cobros-table {
  margin: 0;
  border: 0;
  border-radius: 0;
}
.cobros-table thead th {
  cursor: pointer;
  user-select: none;
  text-align: left;
  vertical-align: middle;
}
.cobros-table td {
  text-align: left;
}
.cobros-table td.num {
  text-align: right;
}
.cobros-table td.cobros-dash,
.cobros-table td.cobros-actions {
  text-align: left;
}
.cobros-table tbody tr.cobros-empty-row td,
.cobros-table tbody tr:has(.empty-block) td {
  height: auto;
  padding: 0;
  border-bottom: 0;
  vertical-align: top;
}
.cobros-table .cobros-actions .ghost.sm {
  width: auto;
  margin: 0;
  padding: 4px 10px;
  font-size: 0.75rem;
}
.cobros-table .empty-block {
  border: 0;
  background: transparent;
  padding: 36px 20px 40px;
  min-height: 168px;
  box-sizing: border-box;
  justify-content: center;
}
.cobros-table .empty-block .empty-art {
  flex: 0 0 auto;
  margin: 0 0 4px;
}
.cobros-table-wrap > .cobros-note {
  margin: 0;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--hairline);
}
.cobros-table thead th .sort {
  opacity: 0.45;
  font-size: 0.65rem;
  margin-left: 4px;
}
.cobros-table thead th.is-sort .sort {
  opacity: 1;
  color: var(--primary);
}
.cobros-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 650;
  background: color-mix(in srgb, var(--sys-surface-2) 80%, #000);
}
.cobros-status.is-ok {
  color: #4ade80;
  background: color-mix(in srgb, #4ade80 14%, transparent);
}
.cobros-status.is-warn {
  color: #fbbf24;
  background: color-mix(in srgb, #fbbf24 14%, transparent);
}
.cobros-status.is-bad {
  color: #f87171;
  background: color-mix(in srgb, #f87171 14%, transparent);
}
.cobros-note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.cobros-gateway-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.cobros-form-grid {
  display: grid;
  gap: 12px;
}
.cobros-form-grid label {
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted);
}
.oferta-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.oferta-head h3 {
  margin: 0 0 4px;
}
.oferta-head p {
  margin: 0;
  color: var(--muted);
  max-width: 56ch;
}
.oferta-list {
  display: grid;
  gap: 8px;
}
.oferta-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-surface) 75%, #000);
}
.oferta-row strong {
  display: block;
}
.oferta-row .hint {
  margin: 2px 0 0;
}
@media (max-width: 1100px) {
  .cobros-kpi-row,
  .cobros-gateway-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .cobros-kpi-row,
  .cobros-gateway-grid,
  .oferta-row {
    grid-template-columns: 1fr;
  }
}

.oferta-wide-dialog {
  width: min(920px, calc(100vw - 32px));
  max-width: 920px;
}
.oferta-prod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.oferta-prod-col {
  display: grid;
  gap: 12px;
  align-content: start;
}
.oferta-prod-col label,
.oferta-prod-grid > .error {
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted);
}
.oferta-prod-grid > .error {
  grid-column: 1 / -1;
}
.oferta-prod-col textarea,
.oferta-prod-col input,
.oferta-prod-col select {
  width: 100%;
}
.oferta-price-row {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 10px;
}
.oferta-field-lab {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: var(--muted);
}
.oferta-cover-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.oferta-cover-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 2px solid transparent;
  overflow: hidden;
  padding: 0;
  background: var(--sys-surface-2);
  cursor: pointer;
}
.oferta-cover-thumb.is-on {
  border-color: var(--primary);
}
.oferta-cover-thumb img,
.oferta-cover-thumb svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.oferta-cover-add {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 1px dashed var(--hairline);
  background: transparent;
  color: var(--muted);
  font-size: 1.4rem;
  cursor: pointer;
}
.oferta-vis-box {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.oferta-vis-box legend {
  padding: 0 6px;
  font-size: 0.78rem;
}
.oferta-radio,
.oferta-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-size: 0.86rem;
}
.oferta-check-inline {
  flex-wrap: wrap;
}
.oferta-check-inline input[type="number"] {
  width: 64px;
}
.oferta-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.oferta-bonus-mini {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.oferta-bonus-mini li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sys-surface-2) 80%, #000);
  font-size: 0.82rem;
}
.oferta-bono-preview {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px;
  background: color-mix(in srgb, var(--sys-surface) 80%, #000);
}
.oferta-bono-preview strong {
  display: block;
  margin-bottom: 10px;
}
.oferta-bono-bar {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 55%, #222);
  margin-bottom: 12px;
}
.oferta-bono-preview ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--muted);
}
.oferta-autos-list {
  display: grid;
  gap: 10px;
}
.linkish {
  border: 0;
  background: none;
  color: var(--primary);
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
}
.oferta-empty-art {
  display: grid;
  gap: 6px;
  width: 120px;
  margin: 0 auto 12px;
}
.oferta-empty-art i {
  display: block;
  height: 14px;
  border-radius: 7px;
  background: color-mix(in srgb, #fff 16%, transparent);
}
.oferta-empty-art i:nth-child(1) { width: 100%; }
.oferta-empty-art i:nth-child(2) { width: 86%; }
.oferta-empty-art i:nth-child(3) { width: 72%; }
.oferta-kebab {
  position: relative;
}
.oferta-kebab-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 6;
  min-width: 140px;
  padding: 6px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--sys-surface);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.oferta-kebab-pop button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  color: inherit;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
}
.oferta-kebab-pop button:hover {
  background: var(--sys-surface-2);
}
@media (max-width: 800px) {
  .oferta-prod-grid,
  .oferta-price-row {
    grid-template-columns: 1fr;
  }
}

/* Branding module */
.branding-shell {
  padding: 8px 4px 28px;
  max-width: 1100px;
}
.branding-loader {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.88rem;
  padding: 10px 2px 16px;
}
.branding-loader[hidden] { display: none; }
.branding-spin {
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: ngSpin 0.7s linear infinite;
  flex-shrink: 0;
}
.branding-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  gap: 16px;
  align-items: start;
}
.branding-card {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--sys-surface, #171f1c);
  padding: 18px 18px 16px;
}
.branding-planes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.branding-plan-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 12px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-bg, #0e1412) 55%, transparent);
}
.branding-plan-kind {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.branding-plan-copy strong { display: block; font-size: 0.95rem; }
.branding-plan-copy .hint { margin: 2px 0 0; }
.branding-plan-price {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--primary);
}
.branding-card-head h3,
.branding-card > h3,
.branding-card > h4 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}
.branding-card-head .hint,
.branding-card > .hint {
  margin: 0 0 14px;
}
.branding-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 0.8rem;
  color: var(--muted);
}
.branding-field input[type="text"],
.branding-field input[type="url"] {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--sys-surface-2, #1e2824);
  color: var(--text);
  padding: 9px 11px;
  font: inherit;
  font-size: 0.92rem;
}
.branding-color-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.branding-color-pair {
  display: flex;
  align-items: center;
  gap: 8px;
}
.branding-color-pair input[type="color"] {
  width: 42px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.branding-color-pair input[type="text"] {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--sys-surface-2, #1e2824);
  color: var(--text);
  padding: 8px 9px;
  font: inherit;
  font-size: 0.85rem;
}
.branding-save { margin-top: 6px; }
.branding-ident-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}
.branding-ident-head h3 { margin: 0 0 4px; font-size: 1.05rem; }
.branding-ident-head .hint { margin: 0; }
.branding-logo-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px dashed var(--hairline);
  border-radius: 14px;
  background: color-mix(in srgb, var(--sys-surface, #16201c) 70%, transparent);
}
.branding-logo-row.is-drop {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.branding-logo-box {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-bg, #0e1412) 80%, transparent);
}
.branding-logo-current {
  max-width: 76px;
  max-height: 76px;
  object-fit: contain;
  background: transparent;
}
.branding-logo-meta { min-width: 0; flex: 1; }
.branding-logo-meta .hint { margin: 8px 0 0; }
.branding-logo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm, 10px);
  cursor: pointer;
  font-size: 0.88rem;
}
.branding-logo-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.branding-logo-url-fold { margin-top: 10px; }
.branding-logo-url-fold summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.8rem;
  list-style: none;
}
.branding-logo-url-fold summary::-webkit-details-marker { display: none; }
.branding-logo-url-fold[open] summary { margin-bottom: 8px; }
.branding-logo-url-fold .branding-field { margin-bottom: 0; }
.branding-preview-card { position: sticky; top: 12px; }
.branding-chip {
  --branding-primary: var(--primary);
  --branding-secondary: #1a1a1a;
  --branding-bg: #0e1412;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--branding-bg);
  border: 1px solid color-mix(in srgb, var(--branding-primary) 35%, var(--hairline));
}
.branding-logo,
.branding-phone-logo,
.branding-login-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}
.branding-logo-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 44px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px dashed var(--hairline);
  color: var(--muted);
  font-size: 0.72rem;
}
.branding-logo-empty[hidden] { display: none; }
.branding-chip-copy { flex: 1; min-width: 0; }
.branding-chip-copy strong { display: block; color: #fff; }
.branding-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--branding-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--branding-primary) 35%, transparent);
  flex-shrink: 0;
}
.branding-swatch-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.branding-mini-swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--hairline);
}
.branding-sections { margin-top: 16px; }
.branding-portal-mini {
  --branding-accent: var(--primary);
  display: flex;
  min-height: 150px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: #101412;
}
.branding-portal-rail {
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  background: #0b0e0c;
}
.branding-portal-rail span {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: #2a332f;
}
.branding-portal-rail .branding-portal-dot,
.branding-portal-rail .is-on {
  background: var(--branding-accent);
}
.branding-portal-main {
  flex: 1;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.branding-portal-crumb {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.branding-portal-btn,
.branding-phone-cta,
.branding-login-cta {
  border: 0;
  border-radius: 9px;
  padding: 8px 14px;
  background: var(--branding-accent, var(--branding-app, var(--branding-cta, var(--primary))));
  color: #fff;
  font: inherit;
  font-weight: 650;
  width: max-content;
  cursor: default;
}
.branding-phone {
  --branding-app: var(--primary);
  width: 180px;
  margin: 0 auto;
  border: 2px solid #2a2f2c;
  border-radius: 22px;
  background: #0c0f0d;
  padding: 10px 8px 14px;
}
.branding-phone-notch {
  width: 56px;
  height: 8px;
  border-radius: 8px;
  background: #222;
  margin: 0 auto 12px;
}
.branding-phone-screen {
  min-height: 180px;
  border-radius: 14px;
  background: #111714;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 10px;
  text-align: center;
}
.branding-phone-cta { background: var(--branding-app); }
.branding-login-mini {
  --branding-cta: var(--primary);
  min-height: 170px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: #0e1210;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  text-align: center;
}
.branding-login-cta { background: var(--branding-cta); }
@media (max-width: 860px) {
  .branding-grid,
  .branding-color-row {
    grid-template-columns: 1fr;
  }
  .branding-preview-card { position: static; }
}

/* ── Asistente global + campana agenda (navbar) ── */
.topbar-notif-wrap { position: relative; }
.topbar-notif-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--err);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--sys-bg);
}
.topbar-notif-badge.hidden { display: none; }
.topbar-btn.has-agenda-pulse .nav-ico {
  transform-origin: top center;
  animation: topbar-bell-shake 2.8s ease-in-out infinite;
}
@keyframes topbar-bell-shake {
  0%, 82%, 100% { transform: rotate(0); }
  86% { transform: rotate(-11deg); }
  90% { transform: rotate(9deg); }
  94% { transform: rotate(-6deg); }
  97% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-btn.has-agenda-pulse .nav-ico { animation: none; }
}
.topbar-notif-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-sticky);
  width: min(340px, 86vw);
  padding: 10px 10px 8px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, var(--sys-border));
  background: var(--sys-surface);
  box-shadow: var(--elev-2);
}
.topbar-notif-pop[hidden] { display: none !important; }
.topbar-notif-pop-title {
  margin: 0 6px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.topbar-notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow: auto;
}
.topbar-notif-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 8px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.topbar-notif-item:hover { background: var(--primary-soft); }
.topbar-notif-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary);
}
.topbar-notif-time {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
}
.topbar-notif-main { min-width: 0; }
.topbar-notif-main strong {
  display: block;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-notif-main span {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
}
.topbar-notif-st {
  font-size: 0.66rem;
  color: var(--muted);
  white-space: nowrap;
}
.topbar-notif-empty {
  margin: 8px;
  color: var(--muted);
  font-size: 0.82rem;
}

#tab-ai.active { display: flex; }
.ai-shell {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--header-h) - 48px);
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 0 16px;
}
.ai-shell-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.ai-shell-brand {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.ai-shell-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--primary);
  color: var(--tenant-primary-contrast, #fff);
  flex: 0 0 auto;
}
.ai-shell-mark .nav-ico { stroke-width: 2; }
.ai-shell-head h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.ai-shell-tools { display: flex; gap: 8px; flex-shrink: 0; }
.ai-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-bottom: 12px;
}
.ai-thread:empty { display: none; }
.ai-msg {
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
.ai-msg.is-user {
  align-self: flex-end;
  background: var(--primary);
  color: var(--tenant-primary-contrast, #fff);
}
.ai-msg.is-assistant {
  align-self: flex-start;
  background: var(--sys-surface-2);
  border: 1px solid var(--hairline);
}
.ai-msg.is-thinking { color: var(--muted); }
.ai-empty { padding: 8px 0 20px; }
.ai-shell.has-thread .ai-empty { display: none; }
.ai-prompt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ai-prompt-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  padding: 14px 14px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, var(--sys-border));
  background: color-mix(in srgb, var(--sys-surface-2) 70%, transparent);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ai-prompt-card:hover {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--sys-border));
  background: var(--primary-soft);
}
.ai-prompt-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary);
}
.ai-prompt-card strong { font-size: 0.86rem; }
.ai-prompt-card span { font-size: 0.75rem; color: var(--muted); }
.ai-empty-note { margin: 14px 0 8px; }
.ai-empty-actions { display: flex; gap: 8px; }
.ai-compose {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 16%, var(--sys-border));
  background: var(--sys-surface);
}
.ai-compose input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  padding: 8px 0;
}
.ai-compose input:focus { outline: none; }
.ai-send {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--tenant-primary-contrast, #fff);
  cursor: pointer;
}
.ai-send:disabled { opacity: 0.45; cursor: default; }
.ai-send:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary);
}
.ai-disclaimer { text-align: center; margin: 8px 0 0; }
.ai-nav-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.ai-nav-link:hover { color: color-mix(in srgb, var(--primary) 80%, #fff); }
.ai-nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary);
  border-radius: 3px;
}

.ai-news-dialog {
  width: min(440px, 92vw);
  padding: 0;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, var(--sys-border));
  background: var(--sys-surface);
}
.ai-news-head {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 0;
}
.ai-news-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--primary);
  color: var(--tenant-primary-contrast, #fff);
}
.ai-news-mark .nav-ico { width: 16px; height: 16px; stroke-width: 2; }
.ai-news-head h3 { margin: 0; font-size: 1rem; }
.ai-news-x { min-width: 36px; }
.ai-news-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 22px 8px;
  gap: 8px;
}
.ai-news-icon-wrap {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 18%, var(--sys-surface-2));
  color: var(--primary);
  margin-bottom: 6px;
}
.ai-news-icon-wrap .nav-ico { width: 36px; height: 36px; stroke-width: 1.8; }
.ai-news-body h4 { margin: 0; font-size: 1.15rem; }
.ai-news-body p {
  margin: 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}
.ai-news-dots {
  display: flex;
  gap: 6px;
  margin: 10px 0 4px;
}
.ai-news-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 55%, transparent);
  cursor: pointer;
}
.ai-news-dot.is-on { background: var(--primary); }
.ai-news-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.ai-news-chip {
  border: 1px solid var(--hairline);
  background: var(--sys-surface-2);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}
.ai-news-chip:hover { border-color: var(--primary); color: var(--primary); }
.ai-news-foot {
  display: flex;
  justify-content: space-between;
  padding: 4px 10px 12px;
}
.ai-news-foot .ghost[disabled] { opacity: 0.35; cursor: default; }
.ai-profile-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-profile-body label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
}
.ai-profile-body input,
.ai-profile-body textarea {
  font: inherit;
  font-weight: 400;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--sys-border);
  background: var(--sys-bg);
  color: var(--text);
}
.ai-profile-body input:focus,
.ai-profile-body textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
@media (max-width: 720px) {
  .ai-prompt-grid { grid-template-columns: 1fr; }
  .ai-shell-head { flex-direction: column; }
}

/* —— Ficha cliente (hub modal) —— */
.client-ficha-root {
  position: relative;
  min-height: 100%;
  padding-bottom: 64px;
}
.cf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.cf-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--hairline, rgba(255, 255, 255, 0.08));
  padding-bottom: 0;
}
.cf-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 8px 12px 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.cf-tab:hover {
  color: var(--text);
}
.cf-tab.is-active {
  color: var(--primary, #e85d4c);
  border-bottom-color: var(--primary, #e85d4c);
}
.cf-obs-btn,
.mc-hub-obs-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  vertical-align: middle;
}
.cf-obs-btn .nav-ico,
.mc-hub-obs-btn .nav-ico {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 16px;
  margin: 0;
}
.cf-obs-btn span,
.mc-hub-obs-btn span {
  display: inline-block;
  line-height: 1;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
.cf-pane[hidden] {
  display: none !important;
}
.cf-empty {
  max-width: 420px;
  padding: 20px 4px;
}
.cf-empty h4 {
  margin: 0 0 8px;
  font-size: 1rem;
}
.cf-empty p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.cf-block {
  margin-bottom: 22px;
}
.cf-block h4 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}
.cf-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.cf-block-head h4 {
  margin: 0;
}
.cf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 28px;
  margin: 12px 0 0;
}
.cf-kv {
  display: grid;
  grid-template-columns: minmax(110px, 38%) 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline, rgba(255, 255, 255, 0.06));
}
.cf-kv dt {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}
.cf-kv dd {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
  word-break: break-word;
}
.cf-kv dd.is-empty {
  color: var(--muted);
}
.cf-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cf-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--cf-pill, var(--primary)) 22%, transparent);
  color: var(--cf-pill, var(--primary));
  border: 1px solid color-mix(in srgb, var(--cf-pill, var(--primary)) 40%, transparent);
}
.cf-chat-value {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}
.cf-pro-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cf-pro-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline, rgba(255, 255, 255, 0.06));
}
.cf-pro-role {
  min-width: 120px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}
.cf-edit-fab {
  position: sticky;
  float: right;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--primary, #e85d4c);
  color: #1a100e;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--primary, #e85d4c) 35%, transparent);
}
.cf-edit-fab:hover {
  filter: brightness(1.06);
}
.cf-edit-fab:active {
  transform: translateY(1px);
}
.cf-edit-fab .nav-ico {
  width: 16px;
  height: 16px;
}
.cf-edit-fab[hidden] {
  display: none !important;
}
.cf-edit-dialog,
.cf-note-dialog,
.cf-assign-dialog,
.cf-chat-dialog {
  --modal-w: min(640px, calc(100vw - 28px));
}
.cf-edit-dialog {
  --modal-w: min(720px, calc(100vw - 28px));
}
.cf-edit-dialog .modal-footer .btn-primary:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.55);
  pointer-events: none;
  background: #5c5c5c;
  color: #c4c4c4;
  box-shadow: none;
}
.cf-edit-tags-empty {
  color: var(--muted);
  font-size: 0.82rem;
}
.cf-note-dialog {
  --modal-w: min(680px, calc(100vw - 28px));
}
.cf-edit-body,
.cf-note-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cf-edit-section h4 {
  margin: 0 0 10px;
  font-size: 0.88rem;
}
.cf-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cf-edit-span {
  grid-column: 1 / -1;
}
.cf-note-body textarea,
.cf-edit-body textarea {
  width: 100%;
  resize: vertical;
  min-height: 88px;
}
.cf-note-attach {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.cf-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.86rem;
}
.cf-obs-filter-wrap,
.cf-obs-new-wrap {
  position: relative;
}
.cf-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 8;
  min-width: 180px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.1));
  background: var(--sys-surface-2, #1e2824);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}
.cf-menu[hidden] {
  display: none !important;
}
.cf-menu button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
.cf-menu button:hover {
  background: color-mix(in srgb, var(--primary, #e85d4c) 16%, transparent);
}
.cf-kebab-menu {
  position: absolute;
}
.cf-obs-pager {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mc-hub-obs-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
@media (max-width: 720px) {
  .cf-grid,
  .cf-edit-grid {
    grid-template-columns: 1fr;
  }
  .cf-kv {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* —— Ficha › Formularios —— */
.cf-forms {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
}
.cf-forms-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.cf-forms-search,
.cf-forms-assign-search {
  flex: 1 1 auto;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  min-height: 38px;
  box-sizing: border-box;
}
.cf-forms-search .nav-ico,
.cf-forms-assign-search .nav-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  transform: none;
}
.cf-forms-search input,
.cf-forms-assign-search input {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 4px 8px 0;
  font-size: 0.84rem;
}
.cf-forms-filter-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  line-height: 1;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
  border-radius: 9px;
  background: transparent;
  white-space: nowrap;
}
.cf-forms-filter-btn .nav-ico {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 16px;
}
.cf-forms-filter-btn span {
  line-height: 1;
}
.cf-forms-assign-btn {
  margin-left: auto;
  margin-top: 0;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 8px 14px;
  font-size: 0.84rem;
  line-height: 1;
  border-radius: 9px;
  height: 38px;
}
.cf-forms-assign-btn .nav-ico {
  width: 15px;
  height: 15px;
  display: block;
  flex: 0 0 15px;
}
.cf-forms-assign-btn span {
  line-height: 1;
}
.cf-forms-table-wrap {
  overflow-x: auto;
}
.cf-forms-col-check,
.cf-forms-check-col {
  width: 36px;
}
.cf-forms-col-estado {
  width: 120px;
}
.cf-forms-col-envio,
.cf-forms-col-resp {
  width: 128px;
}
.cf-forms-col-actions {
  width: 168px;
}
.cf-forms-col-del,
.cf-forms-del-head {
  width: 72px;
  text-align: center;
}
.cf-forms-table .cf-forms-name {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 650;
  color: var(--primary, #e85d4c);
  cursor: pointer;
  text-align: left;
}
.cf-forms-table .cf-forms-name:hover {
  text-decoration: underline;
}
.cf-forms-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.cf-forms-pill.is-pendiente {
  color: #1a100e;
  background: color-mix(in srgb, var(--primary, #e85d4c) 82%, #f4c9a8);
}
.cf-forms-pill.is-completado {
  color: #d8efe4;
  background: color-mix(in srgb, #2f8f63 38%, #1a2420);
  border: 1px solid color-mix(in srgb, #3dba7e 40%, transparent);
}
.cf-forms-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.cf-forms-edit .nav-ico {
  width: 14px;
  height: 14px;
}
.cf-forms-del {
  appearance: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: #c2413c;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cf-forms-del:hover {
  filter: brightness(1.08);
}
.cf-forms-del:active {
  transform: translateY(1px);
}
.cf-forms-del .nav-ico {
  width: 15px;
  height: 15px;
  stroke: #fff;
}
.cf-forms-empty {
  padding: 28px 8px 18px;
  text-align: left;
}
.cf-forms-empty h4 {
  margin: 0 0 6px;
  font-size: 0.98rem;
}
.cf-forms-empty p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  max-width: 42ch;
}
.cf-forms-filter-dialog {
  --modal-w: min(400px, calc(100vw - 20px));
  margin: 0 0 0 auto !important;
  height: 100vh;
  max-height: 100vh;
  border-radius: 16px 0 0 16px;
}
.cf-forms-filter-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cf-forms-filter-section h4 {
  margin: 0 0 10px;
  font-size: 0.84rem;
  font-weight: 700;
}
.cf-forms-radio-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cf-forms-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  cursor: pointer;
}
.cf-forms-radio {
  margin: 0;
  font-weight: 500;
  color: var(--text);
}
.cf-forms-radio input {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  flex: 0 0 16px;
  accent-color: var(--primary, #e85d4c);
  box-shadow: none;
}
.cf-forms-date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cf-forms-filter-reset {
  align-self: flex-start;
}
.cf-forms-assign-dialog {
  --modal-w: min(520px, calc(100vw - 28px));
}
.cf-forms-assign-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cf-forms-assign-search {
  display: flex;
  margin: 8px 0 10px;
}
.cf-forms-assign-body .field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 0;
}
.cf-forms-assign-list {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cf-forms-assign-opt {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
}
.cf-forms-assign-opt:hover,
.cf-forms-assign-opt:has(input:checked) {
  background: color-mix(in srgb, var(--primary, #e85d4c) 14%, transparent);
}
.cf-forms-assign-opt input[type="radio"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  padding: 0;
  margin: 0;
  flex: 0 0 16px;
  accent-color: var(--primary, #e85d4c);
  box-shadow: none;
}
.cf-forms-assign-opt span {
  flex: 0 1 auto;
  min-width: 0;
}
.cf-forms-assign-dialog .modal-footer .btn-primary:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.55);
  pointer-events: none;
  background: #5c5c5c;
  color: #c4c4c4;
  box-shadow: none;
}
@media (max-width: 720px) {
  .cf-forms-assign-btn {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
  .cf-forms-date-row {
    grid-template-columns: 1fr;
  }
}

/* —— Ficha › Historial —— */
.cf-hist {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cf-hist-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.cf-hist-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.cf-hist-card {
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 16px 16px 12px;
  background: var(--sys-surface, #161c1a);
  min-width: 0;
}
.cf-hist-card h4 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}
.cf-hist-dl {
  margin: 0;
}
.cf-hist-dl .cf-kv {
  grid-template-columns: minmax(120px, 42%) 1fr;
}
.cf-hist-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  border-radius: 50%;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.22));
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--muted);
  cursor: help;
  vertical-align: middle;
  line-height: 1;
}
.cf-hist-card-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.cf-hist-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 9px;
}
.cf-hist-edit .nav-ico {
  width: 14px;
  height: 14px;
  display: block;
}
.cf-hist-edit span {
  line-height: 1;
}
.cf-hist-dialog {
  --modal-w: min(640px, calc(100vw - 28px));
}
.cf-hist-allergy-dialog {
  --modal-w: min(480px, calc(100vw - 28px));
}
.cf-hist-form-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cf-hist-form-body h4 {
  margin: 0;
  font-size: 0.88rem;
}
.cf-hist-form-body textarea {
  width: 100%;
  resize: vertical;
  min-height: 72px;
}
.cf-hist-allergy-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cf-hist-allergy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.cf-hist-link {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--primary, #e85d4c);
  cursor: pointer;
  line-height: 1;
}
.cf-hist-link:hover {
  text-decoration: underline;
}
.cf-hist-allergy-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 360px;
  overflow-y: auto;
}
.cf-hist-allergy-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text);
}
.cf-hist-allergy-opt:hover,
.cf-hist-allergy-opt:has(input:checked) {
  background: color-mix(in srgb, var(--primary, #e85d4c) 12%, transparent);
}
.cf-hist-allergy-opt input[type="checkbox"] {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  flex: 0 0 16px;
  accent-color: var(--primary, #e85d4c);
  box-shadow: none;
}
.cf-hist-allergy-ico {
  width: 1.25em;
  text-align: center;
  flex: 0 0 auto;
}
.cf-hist-dialog .modal-footer .btn-primary:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.55);
  pointer-events: none;
  background: #5c5c5c;
  color: #c4c4c4;
  box-shadow: none;
}
.cf-hist-energy-preview input[readonly] {
  opacity: 0.92;
  cursor: default;
}
#cf-hist-factor {
  width: 100%;
  max-height: none;
}
@media (max-width: 720px) {
  .cf-hist-cards {
    grid-template-columns: 1fr;
  }
}

/* —— Ficha › Negocio (facturación manual CO) —— */
.cf-neg {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
}
.cf-neg-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.cf-neg-search {
  flex: 1 1 auto;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  min-height: 38px;
  height: 38px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cf-neg-search .nav-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  transform: none !important;
  scale: 1 !important;
}
.cf-neg-search input {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 8px 4px 8px 0;
  font-size: 0.84rem;
}
.cf-neg-select {
  height: 38px;
  border-radius: 9px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
  background: color-mix(in srgb, #111 70%, transparent);
  color: inherit;
  padding: 0 10px;
  font: inherit;
  font-size: 0.84rem;
}
.cf-neg-dates {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
}
.cf-neg-dates input[type="date"] {
  height: 38px;
  border-radius: 9px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
  background: color-mix(in srgb, #111 70%, transparent);
  color: inherit;
  padding: 0 8px;
  font: inherit;
  font-size: 0.8rem;
}
.cf-neg-filter-btn {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cf-neg-filter-btn .nav-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.cf-neg-create {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0;
  max-width: none;
  height: 38px;
  padding: 0 12px;
  white-space: nowrap;
}
.cf-neg-filter-dialog {
  --modal-w: min(400px, calc(100vw - 20px));
  margin: 0 0 0 auto !important;
  height: 100vh;
  max-height: 100vh;
  border-radius: 16px 0 0 16px;
  z-index: 1400;
}
.cf-neg-filter-dialog .modal-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cf-neg-filter-dialog .cf-neg-filter-section h4 {
  margin: 0 0 8px;
  font-size: 0.84rem;
  font-weight: 700;
}
.cf-neg-check-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cf-neg-check-col label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  cursor: pointer;
  flex-direction: row;
  color: inherit;
}
.cf-neg-check-col input {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  flex: 0 0 16px;
  accent-color: var(--primary, #e85d4c);
}
.cf-neg-amt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cf-neg-custom-dates[hidden] {
  display: none !important;
}
.cf-neg-table-wrap {
  overflow-x: auto;
}
.cf-neg-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cf-neg-actions-col {
  width: 48px;
  text-align: center;
}
.cf-neg-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.cf-neg-pill.is-pagado {
  color: #4ade80;
  border-color: color-mix(in srgb, #4ade80 45%, transparent);
  background: color-mix(in srgb, #4ade80 12%, transparent);
}
.cf-neg-pill.is-pendiente {
  color: var(--primary, #e85d4c);
  border-color: color-mix(in srgb, var(--primary, #e85d4c) 50%, transparent);
  background: color-mix(in srgb, var(--primary, #e85d4c) 12%, transparent);
}
.cf-neg-kebab {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.cf-neg-kebab:hover,
.cf-neg-kebab[aria-expanded="true"] {
  background: color-mix(in srgb, var(--primary, #e85d4c) 16%, transparent);
}
.cf-neg-table-wrap,
.cf-neg-table,
.cf-neg-actions-col {
  overflow: visible;
}
.modal-dialog.mc-client-hub-dialog.cf-neg-kebab-open {
  overflow: visible;
}
.cf-neg-kebab-menu {
  position: fixed;
  inset: unset;
  margin: 0;
  z-index: 20000;
  min-width: 228px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
  background: #1a1a1a;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  color: inherit;
}
.cf-neg-kebab-menu[hidden]:not(:popover-open) {
  display: none !important;
}
.cf-neg-kebab-menu:popover-open {
  display: block !important;
}
.cf-neg-kebab-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
.cf-neg-kebab-menu button:hover {
  background: color-mix(in srgb, var(--primary, #e85d4c) 16%, transparent);
}
.cf-neg-kebab-menu button.is-danger {
  color: #f87171;
}
.cf-neg-kebab-menu .nav-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.cf-neg-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cf-neg-empty {
  text-align: center;
  padding: 28px 12px;
  color: var(--muted, #94a39c);
}
.cf-neg-dialog {
  width: min(760px, 96vw);
  max-height: min(90vh, 860px);
  overflow: hidden;
  z-index: 1500;
}
dialog.cf-neg-dialog[open] {
  display: flex;
  flex-direction: column;
}
.cf-neg-dialog.cf-neg-wide {
  width: min(820px, 96vw);
}
.cf-neg-dialog > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.cf-neg-dialog .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.cf-neg-dialog .modal-footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
}
.cf-neg-dialog .modal-footer[hidden],
.cf-neg-dialog .modal-body[hidden],
.cf-neg-step-btns {
  display: none !important;
}
.cf-neg-dialog[data-cf-neg-step="form"] .cf-neg-step-btns[data-step="form"],
.cf-neg-dialog[data-cf-neg-step="preview"] .cf-neg-step-btns[data-step="preview"],
.cf-neg-dialog[data-cf-neg-step="view"] .cf-neg-step-btns[data-step="view"] {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}
.cf-neg-lede {
  margin: 0 0 14px;
  color: var(--muted, #94a39c);
  font-size: 0.86rem;
}
.cf-neg-grid {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 12px 14px;
}
.cf-neg-grid label,
.cf-neg-prod-grid label,
.cf-neg-pay-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted, #94a39c);
}
.cf-neg-grid input,
.cf-neg-grid textarea,
.cf-neg-grid select,
.cf-neg-prod-grid input,
.cf-neg-prod-grid select,
.cf-neg-pay-grid input,
.cf-neg-pay-grid select {
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
  background: color-mix(in srgb, #111 70%, transparent);
  color: inherit;
  padding: 0 10px;
  font: inherit;
  font-size: 0.88rem;
}
.cf-neg-grid textarea {
  height: 72px;
  padding: 8px 10px;
  resize: vertical;
}
.cf-neg-span {
  grid-column: 1 / -1;
}
.cf-neg-section {
  margin: 16px 0 8px;
  font-size: 0.92rem;
}
.cf-neg-req {
  color: #f87171;
}
#cf-neg-products {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.cf-neg-prod-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 110px 72px minmax(140px, 1fr) 36px;
  gap: 8px;
  align-items: end;
  margin: 0;
}
.cf-neg-prod-grid input,
.cf-neg-prod-grid select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 38px !important;
  line-height: 38px;
}
.cf-neg-prod-grid select {
  padding-right: 24px;
}
.cf-neg-prod-del {
  height: 38px;
  width: 38px;
  box-sizing: border-box;
}
.cf-neg-add {
  margin: 4px 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary, #e85d4c);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}
.cf-neg-pay-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(200px, 1fr) minmax(0, 1.1fr) 88px;
  gap: 12px 12px;
  align-items: end;
}
.cf-neg-pay-grid > label {
  min-width: 0;
}
.cf-neg-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
  background: color-mix(in srgb, #111 60%, transparent);
}
.cf-neg-status button {
  height: 100%;
  width: 100%;
  min-width: 0;
  padding: 0 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted, #94a39c);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.cf-neg-status button.is-on {
  background: var(--primary, #e85d4c);
  color: #fff;
}
.cf-neg-check,
#cf-neg-dialog label.cf-neg-check,
#cf-neg-dialog label.checkbox-row.cf-neg-check {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  grid-column: auto;
  margin: 4px 0 10px;
  font-size: 0.84rem;
  color: inherit;
  white-space: nowrap;
}
.cf-neg-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  flex: 0 0 16px;
  accent-color: var(--primary, #e85d4c);
}
.cf-neg-receipt {
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
  border-radius: 14px;
  padding: 22px 22px 16px;
  background: color-mix(in srgb, #101010 88%, transparent);
}
.cf-neg-receipt-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline, rgba(255, 255, 255, 0.1));
}
.cf-neg-logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: contain;
  background: #111;
  flex: 0 0 56px;
}
.cf-neg-mono {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  flex: 0 0 56px;
}
.cf-neg-receipt h3 {
  margin: 0 0 4px;
  font-size: 1.25rem;
}
.cf-neg-tagline {
  margin: 0;
  color: var(--muted, #94a39c);
  font-size: 0.82rem;
}
.cf-neg-legal {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--muted, #94a39c);
}
.cf-neg-folio {
  margin-left: auto;
  text-align: right;
  font-size: 0.82rem;
  color: var(--muted, #94a39c);
}
.cf-neg-folio strong {
  display: block;
  color: inherit;
  font-size: 0.95rem;
}
.cf-neg-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 14px 0;
  font-size: 0.82rem;
}
.cf-neg-meta dt {
  color: var(--muted, #94a39c);
  margin-bottom: 4px;
}
.cf-neg-meta dd {
  margin: 0;
  font-weight: 650;
}
.cf-neg-receipt table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.cf-neg-receipt th,
.cf-neg-receipt td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--hairline, rgba(255, 255, 255, 0.08));
  text-align: left;
}
.cf-neg-receipt td.num,
.cf-neg-receipt th.num {
  text-align: right;
}
.cf-neg-totals {
  margin: 12px 0 0 auto;
  width: min(280px, 100%);
  font-size: 0.84rem;
}
.cf-neg-totals div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.cf-neg-totals .cf-neg-total {
  font-weight: 750;
  border-top: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
  margin-top: 6px;
  padding-top: 8px;
}
.cf-neg-payline {
  margin: 14px 0 0;
  font-size: 0.84rem;
}
.cf-neg-disclaimer {
  margin: 16px 0 0;
  font-size: 0.75rem;
  color: var(--muted, #94a39c);
}
.cf-neg-dialog .btn-primary:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.55);
}
.cf-neg-sheet-dialog {
  width: min(820px, 96vw);
  max-height: min(92vh, 980px);
  overflow: hidden;
}
dialog.cf-neg-sheet-dialog[open] {
  display: flex;
  flex-direction: column;
}
.cf-neg-sheet-dialog .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: #121212;
}
.cf-neg-sheet-stage {
  display: flex;
  justify-content: center;
  padding: 16px 12px 20px;
}
.cf-neg-sheet-page {
  width: min(720px, 100%);
  min-height: 960px;
  padding: 40px 44px 32px;
  background: #f6f3ec;
  color: #1a1a1a;
  border-radius: 2px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.cf-neg-sheet-page .cf-neg-receipt {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: #1a1a1a;
}
.cf-neg-sheet-page .cf-neg-receipt h3,
.cf-neg-sheet-page .cf-neg-folio strong,
.cf-neg-sheet-page .cf-neg-meta dd {
  color: #111;
}
.cf-neg-sheet-page .cf-neg-tagline,
.cf-neg-sheet-page .cf-neg-legal,
.cf-neg-sheet-page .cf-neg-folio,
.cf-neg-sheet-page .cf-neg-meta dt,
.cf-neg-sheet-page .cf-neg-disclaimer,
.cf-neg-sheet-page .hint {
  color: #5c5852;
}
.cf-neg-sheet-page .cf-neg-receipt-head,
.cf-neg-sheet-page .cf-neg-receipt th,
.cf-neg-sheet-page .cf-neg-receipt td,
.cf-neg-sheet-page .cf-neg-totals .cf-neg-total {
  border-color: #d8d2c6;
}
.cf-neg-sheet-page .cf-neg-logo {
  background: #fff;
}
@media (max-width: 820px) {
  .cf-neg-grid,
  .cf-neg-pay-grid,
  .cf-neg-prod-grid,
  .cf-neg-meta {
    grid-template-columns: 1fr;
  }
  .cf-neg-toolbar {
    flex-wrap: wrap;
  }
}
@media print {
  body.cf-neg-printing * {
    visibility: hidden !important;
  }
  body.cf-neg-printing .cf-neg-receipt,
  body.cf-neg-printing .cf-neg-receipt * {
    visibility: visible !important;
  }
  body.cf-neg-printing .cf-neg-receipt {
    position: absolute;
    inset: 0;
    border: 0;
    background: #fff;
    color: #111;
  }
}

/* ── Biblioteca Wellness / Fisioterapia ─────────────────────────────── */
#tab-lib-wellness.tab-panel.active,
#tab-lib-fisioterapia.tab-panel.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 0;
}
.lib-wel-shell,
.lib-fis-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
}
.lib-wel-lede,
.lib-fis-lede {
  margin: 0 14px 8px;
  padding: 0;
  line-height: 1.35;
}
.lib-wel-list .lib-wel-card,
.lib-fis-list .lib-fis-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 8px 8px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sys-surface) 70%, transparent);
  cursor: pointer;
  text-align: left;
  width: calc(100% - 16px);
  color: inherit;
  font: inherit;
}
.lib-wel-list .lib-wel-card:hover,
.lib-fis-list .lib-fis-card:hover,
.lib-wel-list .lib-wel-card.is-on,
.lib-fis-list .lib-fis-card.is-on {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--hairline));
  background: color-mix(in srgb, var(--primary) 10%, var(--sys-surface));
}
.lib-wel-card strong,
.lib-fis-card strong {
  font-size: 0.92rem;
  line-height: 1.3;
}
.lib-wel-card-meta,
.lib-fis-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.lib-wel-tipo,
.lib-fis-zona {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--hairline));
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.lib-wel-form,
.lib-fis-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px 24px;
  min-height: 0;
  overflow: auto;
}
.lib-wel-form-grid,
.lib-fis-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.lib-wel-form-grid .span-2,
.lib-fis-form-grid .span-2 { grid-column: 1 / -1; }
.lib-wel-form-grid .field,
.lib-fis-form-grid .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.lib-wel-form-grid .field[hidden],
.lib-fis-form-grid .field[hidden],
#lib-wel-create-dialog .field[hidden] {
  display: none !important;
}
#lib-wel-create-dialog .field,
#lib-fis-create-dialog .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.lib-wel-form-foot .btn-primary,
.lib-fis-form-foot .btn-primary {
  width: auto;
}
.lib-wel-form-grid input,
.lib-wel-form-grid select,
.lib-wel-form-grid textarea,
.lib-fis-form-grid input,
.lib-fis-form-grid select {
  font-weight: 500;
  color: var(--text);
}
.lib-wel-form-foot,
.lib-fis-form-foot,
.lib-fis-items-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lib-fis-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lib-fis-item {
  display: grid;
  grid-template-columns: 1fr 64px 64px auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sys-surface-2) 40%, transparent);
}
.lib-fis-item strong { font-size: 0.86rem; }
.lib-fis-item input[type="number"] {
  width: 100%;
  min-width: 0;
}
.lib-wel-empty,
.lib-fis-empty {
  margin: 16px 12px;
  padding: 28px 16px;
  border: 1px dashed var(--hairline);
  border-radius: 12px;
  text-align: center;
}
@media (max-width: 820px) {
  .lib-wel-form-grid,
  .lib-fis-form-grid { grid-template-columns: 1fr; }
  .lib-fis-item { grid-template-columns: 1fr 1fr; }
}

/* Hub cliente — Progreso / Actividad */
.cf-prog {
  position: relative;
  min-height: 100%;
}
.cf-prog-subtabs {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--hairline);
}
.cf-prog-subtab {
  appearance: none;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 8px 10px 10px;
  margin-bottom: -1px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.cf-prog-subtab:hover { color: var(--text); }
.cf-prog-subtab.is-on {
  color: var(--text);
  border-bottom-color: var(--primary);
}
.cf-prog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cf-prog-range-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: min(240px, 100%);
}
.cf-prog-chev {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--sys-surface-2);
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.cf-prog-chev:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--hairline)); }
.cf-prog-chev:active { transform: scale(0.96); }
.cf-prog-range {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cf-prog-wear {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  flex: 1 1 160px;
  text-align: center;
}
.cf-prog-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sys-surface-2) 80%, var(--sys-bg));
  border: 1px solid var(--hairline);
  gap: 0;
}
.cf-prog-seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}
.cf-prog-seg-btn:hover { color: var(--text); }
.cf-prog-seg-btn.is-on {
  background: var(--primary);
  color: var(--tenant-primary-contrast, #fff);
}
.cf-prog-board {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 12px;
}
.cf-prog-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 8px;
  border-radius: 16px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface-2) 55%, transparent);
  min-height: 0;
}
.cf-prog-card.is-hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 8px 18px;
  padding: 16px 18px 10px;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 55%),
    var(--sys-surface);
}
.cf-prog-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 1 / -1;
}
.cf-prog-card-head h5 {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 750;
  flex: 1;
}
.cf-prog-card-ico,
.cf-prog-pencil {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.cf-prog-pencil {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
}
.cf-prog-pencil:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.cf-prog-cmp {
  display: flex;
  gap: 16px;
}
.cf-prog-cmp strong {
  display: block;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cf-prog-cmp span {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 2px;
}
.cf-prog-hero-viz {
  display: flex;
  align-items: center;
  gap: 12px;
  grid-row: 2 / 4;
}
.cf-prog-ring { width: 96px; height: 96px; transform: rotate(-90deg); }
.cf-prog-ring-track,
.cf-prog-ring-fill {
  fill: none;
  stroke-width: 8;
}
.cf-prog-ring-track { stroke: color-mix(in srgb, var(--primary) 16%, var(--sys-border)); }
.cf-prog-ring-fill {
  stroke: var(--primary);
  stroke-linecap: round;
}
.cf-prog-hero-num strong {
  display: block;
  font-size: 1.6rem;
  letter-spacing: -0.04em;
}
.cf-prog-hero-num span {
  color: var(--muted);
  font-size: 0.72rem;
}
.cf-prog-chart-wrap {
  min-height: 88px;
}
.cf-prog-card.is-hero .cf-prog-cmp {
  grid-column: 2;
  grid-row: 2;
}
.cf-prog-card.is-hero .cf-prog-chart-wrap {
  grid-column: 2;
  grid-row: 3;
}
.cf-prog-chart { width: 100%; height: 88px; display: block; }
.cf-prog-grid {
  stroke: color-mix(in srgb, var(--sys-border) 70%, transparent);
  stroke-width: 1;
}
.cf-prog-bar { fill: color-mix(in srgb, var(--primary) 55%, var(--sys-text)); }
.cf-prog-goal-line {
  stroke: var(--primary);
  stroke-width: 1.4;
  stroke-dasharray: 3 3;
}
.cf-prog-goal-lbl,
.cf-prog-axis {
  fill: var(--muted);
  font-size: 8px;
  font-family: inherit;
}
.cf-prog-empty {
  max-width: 420px;
  margin: 36px auto;
  text-align: center;
  color: var(--muted);
}
.cf-prog-empty .nav-ico {
  width: 28px;
  height: 28px;
  color: var(--primary);
  margin-bottom: 8px;
}
.cf-prog-empty h4 {
  margin: 0 0 6px;
  color: var(--text);
}
.cf-prog-empty p { margin: 0 0 8px; line-height: 1.45; }
.cf-prog-empty-plus { font-size: 0.8rem; color: color-mix(in srgb, var(--primary) 45%, var(--muted)); }

/* Hub cliente — Progreso / Resumen (distinto a Actividad: score + tiles, no cards de barras) */
.cf-prog-sum {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 14px 16px;
  align-items: stretch;
}
.cf-prog-sum-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px 18px;
  border-radius: 20px;
  text-align: center;
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 62%),
    color-mix(in srgb, var(--sys-surface-2) 70%, var(--sys-bg));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--hairline));
}
.cf-prog-sum-hero h4 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.cf-prog-sum-ring-wrap {
  position: relative;
  width: 124px;
  height: 124px;
}
.cf-prog-sum-ring-wrap .cf-prog-ring {
  width: 124px;
  height: 124px;
}
.cf-prog-sum-score {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cf-prog-sum-score strong {
  font-size: 1.85rem;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cf-prog-sum-score span {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 4px;
}
.cf-prog-sum-hero p {
  margin: 0;
  max-width: 220px;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--muted);
}
.cf-prog-sum-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cf-prog-sum-tile {
  padding: 12px 12px 10px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--sys-surface-2) 40%, transparent);
  min-width: 0;
}
.cf-prog-sum-tile em {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.cf-prog-sum-tile strong {
  display: block;
  font-size: 1.28rem;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-prog-sum-tile span {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.3;
}
.cf-prog-sum-trend {
  grid-column: 1 / -1;
  padding: 12px 14px 10px;
  border-radius: 16px;
  border: 1px solid var(--hairline);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 48%),
    var(--sys-surface);
}
.cf-prog-sum-trend header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.cf-prog-sum-trend h5 {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 750;
}
.cf-prog-sum-trend-lbl {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cf-prog-sum-trend-empty {
  margin: 8px 0 4px;
  font-size: 0.8rem;
  color: var(--muted);
}
.cf-prog-sum-spark {
  width: 100%;
  height: 56px;
  display: block;
}
.cf-prog-sum-spark-fill {
  fill: color-mix(in srgb, var(--primary) 18%, transparent);
}
.cf-prog-sum-spark-line {
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cf-prog-sum-spark-dot {
  fill: var(--primary);
}
@media (max-width: 920px) {
  .cf-prog-sum { grid-template-columns: 1fr; }
}
.cf-prog-sum-bar {
  margin-top: 2px;
}
.cf-prog-lift {
  margin-top: 22px;
}
.cf-prog-lift-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 0 2px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 30%, var(--hairline));
}
.cf-prog-lift-head h4 {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.cf-prog-lift-head p {
  margin: 4px 0 0;
  font-size: 0.74rem;
  color: var(--muted);
}
.cf-prog-lift-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cf-prog-lift-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px 14px 12px 18px;
  border-radius: 18px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--hairline));
  background:
    radial-gradient(90% 80% at 100% -10%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 52%),
    color-mix(in srgb, var(--sys-surface) 88%, var(--sys-bg));
}
.cf-prog-lift-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 99px;
  background: var(--primary);
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 45%, transparent);
}
.cf-prog-lift-card > header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.cf-prog-lift-card > header > div {
  flex: 1;
  min-width: 0;
}
.cf-prog-lift-card h5 {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 780;
  letter-spacing: -0.02em;
}
.cf-prog-lift-card header p {
  margin: 3px 0 0;
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.35;
}
.cf-prog-lift-ico {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.cf-prog-lift-ico .nav-ico { width: 16px; height: 16px; }
.cf-prog-lift-card.is-lpp .cf-prog-lift-lpp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cf-prog-lift-card.is-lpp .cf-prog-sum-ring-wrap {
  width: 112px;
  height: 112px;
}
.cf-prog-lift-card.is-lpp .cf-prog-sum-ring-wrap .cf-prog-ring {
  width: 112px;
  height: 112px;
}
.cf-prog-lift-track {
  width: 100%;
  height: 6px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--primary) 12%, var(--sys-surface-2));
  overflow: hidden;
}
.cf-prog-lift-track > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}
.cf-prog-lift-hero {
  margin: 2px 0 0;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cf-prog-lift-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
}
.cf-prog-lift-cmp {
  display: flex;
  gap: 18px;
}
.cf-prog-lift-cmp strong {
  display: block;
  font-size: 1.12rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cf-prog-lift-cmp span {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--muted);
}
.cf-prog-lift-spark { min-height: 56px; }
.cf-prog-lift-spark .cf-prog-sum-spark { height: 56px; }
.cf-prog-lift-picker {
  position: relative;
  margin-left: auto;
  min-width: 0;
  max-width: 220px;
}
.cf-prog-lift-card.is-pr .cf-prog-lift-picker,
.cf-prog-lift-card.is-table .cf-prog-lift-picker {
  margin-left: 0;
  max-width: none;
}
.cf-prog-lift-pick {
  appearance: none;
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--hairline));
  background: color-mix(in srgb, var(--sys-bg) 55%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
}
.cf-prog-lift-pick .nav-ico {
  width: 13px;
  height: 13px;
  color: var(--primary);
  flex: 0 0 13px;
}
.cf-prog-lift-pick span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-prog-lift-pick:hover,
.cf-prog-lift-picker.is-open .cf-prog-lift-pick {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--hairline));
  background: color-mix(in srgb, var(--primary) 10%, var(--sys-bg));
}
.cf-prog-lift-card:has(.cf-prog-lift-picker.is-open) { z-index: 6; }
.cf-prog-lift-pop {
  position: fixed;
  z-index: 12000;
  top: 0;
  left: 0;
  width: min(280px, 70vw);
  max-height: min(280px, 50vh);
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--hairline));
  background: color-mix(in srgb, var(--sys-surface) 96%, var(--sys-bg));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.cf-prog-lift-q {
  width: 100%;
  margin: 0 0 6px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--sys-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
}
.cf-prog-lift-opts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow: auto;
}
.cf-prog-lift-opt {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
}
.cf-prog-lift-opt:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.cf-prog-lift-opt.is-on {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
}
.cf-prog-lift-opt-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-prog-lift-opt-mark { font-size: 0.72rem; }
.cf-prog-lift-empty-opt {
  margin: 8px;
  font-size: 0.74rem;
  color: var(--muted);
}
.cf-prog-lift-card.is-table { grid-column: 1 / -1; }
.cf-prog-lift-table-wrap { overflow: auto; }
.cf-prog-lift-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.cf-prog-lift-table th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 8px 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 28%, var(--hairline));
}
.cf-prog-lift-table td {
  padding: 10px 8px 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cf-prog-lift-ex {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 650;
}
.cf-prog-lift-td-empty {
  color: var(--muted);
  text-align: center;
  padding: 16px 8px !important;
}
.cf-prog-lift-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--muted);
}
.cf-prog-lift-pager > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 920px) {
  .cf-prog-lift-grid { grid-template-columns: 1fr; }
  .cf-prog-lift-card.is-table { grid-column: 1; }
}
dialog.cf-prog-goal-dialog {
  --modal-w: 400px;
}
#mc-client-hub-dialog.cf-prog-goal-lock,
#mc-client-hub-dialog.cf-prog-goal-lock .mc-hub-main,
#mc-client-hub-dialog.cf-prog-goal-lock [data-mc-hub-pane="progreso"],
#mc-client-hub-dialog.cf-prog-goal-lock .cf-prog,
html.cf-prog-goal-open,
body.cf-prog-goal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}
.cf-prog-goal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.cf-prog-goal-head h3 { margin: 0; font-size: 1rem; }
.cf-prog-goal-body { display: flex; flex-direction: column; gap: 10px; }
.cf-prog-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; }
.cf-prog-field input[type="number"],
.cf-prog-field input[type="range"] { width: 100%; }
.cf-prog-slider-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}
.cf-prog-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-prog-chip {
  appearance: none;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 5px 10px;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.cf-prog-chip.is-on {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--hairline));
  background: var(--primary-soft);
  color: var(--text);
}
.cf-prog-goal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.cf-prog-goal-foot .btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 920px) {
  .cf-prog-board { grid-template-columns: 1fr 1fr; }
  .cf-prog-card.is-hero { grid-template-columns: 1fr; }
  .cf-prog-hero-viz,
  .cf-prog-card.is-hero .cf-prog-chart-wrap { grid-column: 1; grid-row: auto; }
}
@media (max-width: 640px) {
  .cf-prog-board { grid-template-columns: 1fr; }
  .cf-prog-wear { text-align: left; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-prog-chev { transition: none; }
}

/* ── Progreso → Cuerpo (evolución corporal, no clone Harbiz) ──────────── */
.cf-body {
  display: grid;
  gap: 16px;
  padding: 4px 0 12px;
}
.cf-body-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-left: 12px;
  border-left: 3px solid var(--primary);
}
.cf-body-bar-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cf-body-bar-acts .nav-ico {
  width: 14px;
  height: 14px;
}
.cf-body-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}
.cf-body-dates label {
  display: grid;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--muted);
}
.cf-body-dates input[type="date"] {
  background: color-mix(in srgb, var(--sys-surface, #1a1816) 88%, transparent);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 7px 10px;
  font: inherit;
  font-size: 0.82rem;
  color-scheme: dark;
}
.cf-body-chips {
  display: grid;
  gap: 12px;
}
.cf-body-chip-group {
  display: grid;
  gap: 6px;
}
.cf-body-chip-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cf-body-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cf-body-chip {
  appearance: none;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 11px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}
.cf-body-chip:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--hairline));
  color: var(--text);
}
.cf-body-chip.is-on {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--hairline));
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--primary);
}
.cf-body-chip.is-plus {
  border-style: dashed;
}
.cf-body-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
  gap: 12px;
  align-items: start;
}
.cf-body-chart-card,
.cf-body-stats,
.cf-body-plus,
.cf-body-reg {
  position: relative;
  padding: 14px 16px;
  border-left: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
}
.cf-body-chart-card {
  min-height: 168px;
}
.cf-body-chart-card h5,
.cf-body-stats h5,
.cf-body-plus h5,
.cf-body-reg-head h4 {
  margin: 0 0 8px;
  font-size: 0.92rem;
  letter-spacing: -0.02em;
}
.cf-body-chart-empty {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 132px;
  gap: 8px;
  color: var(--muted);
}
.cf-body-inline-link {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cf-body-inline-link:hover { color: var(--text); }
.cf-body-chart-empty .nav-ico {
  width: 26px;
  height: 26px;
  color: var(--primary);
}
.cf-body-chart-empty h5 {
  font-size: 1.05rem;
  color: var(--text);
}
.cf-body-chart-empty p { margin: 0; max-width: 280px; line-height: 1.45; }
.cf-body-spark {
  width: 100%;
  height: 200px;
  display: block;
}
.cf-body-spark-grid {
  stroke: color-mix(in srgb, var(--hairline) 80%, transparent);
  stroke-width: 1;
}
.cf-body-spark-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cf-body-spark-area {
  fill: color-mix(in srgb, var(--primary) 16%, transparent);
}
.cf-body-spark-dot {
  fill: var(--primary);
  stroke: color-mix(in srgb, #000 40%, var(--primary));
  stroke-width: 1;
}
.cf-body-spark-lbl {
  fill: var(--muted);
  font-size: 10px;
  font-family: inherit;
}
.cf-body-stats {
  display: grid;
  gap: 12px;
  align-content: start;
}
.cf-body-stat {
  display: grid;
  gap: 2px;
}
.cf-body-stat em {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cf-body-stat strong {
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--text);
}
.cf-body-goal-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.cf-body-goal-row input {
  width: 88px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--text);
  padding: 6px 8px;
  font: inherit;
  font-size: 0.85rem;
}
.cf-body-plus:empty,
.cf-body-plus[hidden] { display: none; }
.cf-body-plus {
  display: grid;
  gap: 10px;
}
.cf-body-plus-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.cf-body-plus-row select {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.8rem;
}
.cf-body-plus-vals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.cf-body-plus-vals div {
  display: grid;
  gap: 2px;
}
.cf-body-plus-vals span {
  font-size: 0.7rem;
  color: var(--muted);
}
.cf-body-plus-vals strong { font-size: 1.05rem; }
.cf-body-reg-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.cf-body-reg-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cf-body-reg-acts .nav-ico { width: 14px; height: 14px; }
.cf-body-matrix-wrap { overflow: auto; max-height: 420px; }
.cf-body-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.cf-body-matrix th,
.cf-body-matrix td {
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent);
  text-align: right;
  white-space: nowrap;
}
.cf-body-matrix th:first-child,
.cf-body-matrix td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--sys-bg, #12110f);
  z-index: 1;
  max-width: 168px;
}
.cf-body-matrix .cf-body-mname {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cf-body-matrix .cf-body-mname span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-body-info {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.cf-body-info .nav-ico { width: 14px; height: 14px; }
.cf-body-matrix-empty {
  color: var(--muted);
  padding: 18px 4px;
  font-size: 0.85rem;
}

.modal-dialog.cf-body-share-dialog { max-width: 520px; }
.cf-body-share-lead { margin: 0 0 14px; color: var(--muted); }
.cf-body-share-formats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.cf-body-share-fmt {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 8px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--text);
  border-radius: 12px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.cf-body-share-fmt:hover {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--hairline));
}
.cf-body-share-preview {
  display: block;
  border: 1.5px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.cf-body-share-preview.is-vert { width: 22px; height: 38px; }
.cf-body-share-preview.is-horiz { width: 38px; height: 22px; }
.cf-body-share-preview.is-sq { width: 28px; height: 28px; }

.cf-body-metric-opt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.modal-dialog.cf-body-reg-dialog { max-width: min(960px, 96vw); }
.cf-body-reg-body { display: grid; gap: 14px; }
.cf-body-reg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}
.cf-body-reg-meta .field { min-width: 160px; }
.cf-body-reg-hint {
  margin: 0;
  flex: 1;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--primary) 55%, var(--muted));
  min-height: 2.4em;
}
.cf-body-reg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 16px;
  align-items: start;
}
.cf-body-reg-sec { margin-bottom: 14px; }
.cf-body-reg-sec h5 {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cf-body-reg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.cf-body-reg-grid label {
  display: grid;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--muted);
}
.cf-body-reg-grid input {
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 8px;
  font: inherit;
  font-size: 0.85rem;
}
.cf-body-reg-grid label.is-focus input {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent);
}
.cf-body-side {
  display: flex;
  width: fit-content;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  margin: 0 0 10px;
  gap: 2px;
}
.cf-body-side button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.cf-body-side button.is-on {
  background: var(--primary);
  color: #1a100e;
}
.cf-body-sil-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: #141210;
}
.cf-body-sil-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.cf-body-sil-hot { position: absolute; inset: 0; }
.cf-body-hot {
  position: absolute;
  width: 18%;
  height: 8%;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.cf-body-hot::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: auto;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--primary) 70%, #fff);
  background: color-mix(in srgb, var(--primary) 35%, transparent);
}
.cf-body-hot.is-on::after {
  width: 14px;
  height: 14px;
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 28%, transparent);
}
@media (max-width: 860px) {
  .cf-body-stage,
  .cf-body-reg-layout { grid-template-columns: 1fr; }
  .cf-body-reg-grid { grid-template-columns: 1fr 1fr; }
  .cf-body-share-formats { grid-template-columns: 1fr; }
  .cf-body-plus-vals { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-body-chip,
  .cf-body-hot::after { transition: none; }
}

/* Hub cliente — Progreso / Logros (medallas FitOS, no hex Harbiz) */
.cf-achv {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 240px;
  padding-bottom: 12px;
}
.cf-achv-hint {
  margin: 0 2px 2px;
  font-size: 0.78rem;
  color: var(--muted);
}
.cf-achv-sec {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--hairline));
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 46%),
    color-mix(in srgb, var(--sys-surface-2) 78%, var(--sys-bg));
  overflow: hidden;
}
.cf-achv-head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.cf-achv-head:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.cf-achv-head-ico {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 16%, var(--sys-surface));
  color: var(--primary);
}
.cf-achv-head-ico .nav-ico { width: 16px; height: 16px; }
.cf-achv-head-title {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cf-achv-head-n {
  min-width: 1.6em;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}
.cf-achv-chev {
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: transform 180ms ease-out;
}
.cf-achv-sec.is-open .cf-achv-chev { transform: rotate(180deg); }
.cf-achv-body { padding: 0 12px 14px; }
.cf-achv-row { margin-top: 12px; }
.cf-achv-row:first-child { margin-top: 2px; }
.cf-achv-row-meta {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, 220px) auto;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 8px;
}
.cf-achv-row-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--text);
}
.cf-achv-bar {
  height: 6px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--sys-border) 70%, transparent);
  overflow: hidden;
}
.cf-achv-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 55%, #8a5a28), var(--primary));
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 45%, transparent);
}
.cf-achv-row-prog {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}
.cf-achv-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
.cf-achv-grid[data-cols="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cf-achv-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cf-achv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 168px;
  padding: 14px 8px 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--sys-border) 80%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sys-surface-2) 40%, transparent), transparent 40%),
    color-mix(in srgb, var(--sys-bg) 55%, #0a0d0c);
  color: var(--text);
  cursor: pointer;
  transition: transform 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out;
}
.cf-achv-card:hover,
.cf-achv-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--sys-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent), 0 10px 24px color-mix(in srgb, var(--primary) 18%, transparent);
  outline: none;
}
.cf-achv-medal-wrap {
  position: relative;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
}
.cf-achv-medal {
  width: 78px;
  height: 78px;
  object-fit: contain;
  border-radius: 50%;
  filter: saturate(1.05);
}
.cf-achv-card.is-bronze .cf-achv-medal {
  filter: sepia(0.45) saturate(1.35) hue-rotate(-12deg) brightness(0.96);
}
.cf-achv-card.is-silver .cf-achv-medal {
  filter: grayscale(0.28) brightness(1.12) contrast(1.08);
}
.cf-achv-card.is-locked .cf-achv-medal {
  filter: grayscale(0.72) brightness(0.52) contrast(0.95);
  opacity: 0.82;
}
.cf-achv-card.is-locked.is-bronze .cf-achv-medal {
  filter: grayscale(0.55) sepia(0.25) brightness(0.5);
}
.cf-achv-card.is-locked.is-silver .cf-achv-medal {
  filter: grayscale(0.75) brightness(0.55);
}
.cf-achv-medal-wrap.has-wings::before,
.cf-achv-medal-wrap.has-wings::after {
  content: "";
  position: absolute;
  top: 22%;
  width: 18px;
  height: 34px;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 55%, #d7c4a0), color-mix(in srgb, #8d7350 60%, #2a2420));
  opacity: 0.88;
}
.cf-achv-medal-wrap.has-wings::before {
  left: -13px;
  clip-path: polygon(100% 18%, 8% 0, 38% 48%, 0 100%, 100% 78%);
}
.cf-achv-medal-wrap.has-wings::after {
  right: -13px;
  clip-path: polygon(0 18%, 92% 0, 62% 48%, 100% 100%, 0 78%);
}
.cf-achv-card.is-locked .cf-achv-medal-wrap.has-wings::before,
.cf-achv-card.is-locked .cf-achv-medal-wrap.has-wings::after {
  opacity: 0.28;
  filter: grayscale(0.8);
}
.cf-achv-card.is-silver .cf-achv-medal-wrap.has-wings::before,
.cf-achv-card.is-silver .cf-achv-medal-wrap.has-wings::after {
  background: linear-gradient(180deg, #f2f4f6, #8d949c);
}
.cf-achv-label {
  font-size: 0.72rem;
  font-weight: 650;
  text-align: center;
  line-height: 1.25;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
.cf-achv-status {
  color: var(--muted);
  display: grid;
  place-items: center;
}
.cf-achv-status .nav-ico { width: 14px; height: 14px; }
.cf-achv-card.is-earned {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--hairline));
  background:
    radial-gradient(80% 70% at 50% 0%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 62%),
    color-mix(in srgb, var(--sys-bg) 40%, #12100e);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent),
    0 10px 28px color-mix(in srgb, var(--primary) 18%, transparent);
}
.cf-achv-card.is-earned .cf-achv-medal {
  filter: saturate(1.28) brightness(1.12);
  opacity: 1;
}
.cf-achv-card.is-earned.is-bronze .cf-achv-medal {
  filter: sepia(0.32) saturate(1.5) hue-rotate(-10deg) brightness(1.1);
}
.cf-achv-card.is-earned.is-silver .cf-achv-medal {
  filter: grayscale(0.08) brightness(1.22) contrast(1.12);
}
.cf-achv-card.is-locked { opacity: 0.78; }
.cf-achv-card.is-earned .cf-achv-status { color: var(--primary); }
.cf-achv-fail {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  min-height: 220px;
  padding: 28px 16px;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--hairline));
  color: var(--muted);
}
.cf-achv-fail h4 { margin: 0; color: var(--text); }
.cf-achv-fail p { margin: 0; max-width: 320px; line-height: 1.45; }
.cf-achv-fail .nav-ico { width: 28px; height: 28px; color: var(--primary); }
.cf-achv-card.is-fresh .cf-achv-medal-wrap::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: linear-gradient(120deg, transparent 20%, color-mix(in srgb, var(--primary) 55%, #fff) 48%, transparent 72%);
  opacity: 0;
  animation: cf-achv-shimmer 1.4s ease-out 1;
  pointer-events: none;
}
.cf-achv-card.is-earned .cf-achv-medal-wrap {
  animation: cf-achv-float 2.8s ease-in-out infinite;
}
@keyframes cf-achv-shimmer {
  0% { opacity: 0; transform: translateX(-40%) rotate(12deg); }
  30% { opacity: 0.7; }
  100% { opacity: 0; transform: translateX(40%) rotate(12deg); }
}
@keyframes cf-achv-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.cf-achv-pop {
  position: absolute;
  z-index: 8;
  width: min(240px, 86%);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--hairline));
  background: color-mix(in srgb, var(--sys-surface) 92%, #000);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.cf-achv-pop-name {
  margin: 0 0 4px;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.cf-achv-pop-line {
  margin: 0 0 2px;
  font-size: 0.78rem;
  color: var(--muted);
}
.cf-achv-pop-state {
  margin: 6px 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}
.cf-achv-pop-state.is-on { color: var(--primary); }
@media (max-width: 980px) {
  .cf-achv-grid[data-cols="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cf-achv-row-meta { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cf-achv-grid[data-cols="6"],
  .cf-achv-grid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .cf-achv-card,
  .cf-achv-chev,
  .cf-achv-card.is-earned .cf-achv-medal-wrap,
  .cf-achv-card.is-fresh .cf-achv-medal-wrap::after {
    transition: none;
    animation: none;
  }
}

/* Hub cliente — Progreso / Fotos (sets por fecha, no lista Harbiz) */
.cf-photos {
  display: grid;
  gap: 16px;
}
.cf-photos-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
}
.cf-photos-hint {
  margin: 0;
  flex: 1 1 220px;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--hairline));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 14%, transparent), transparent 62%),
    color-mix(in srgb, var(--sys-surface-2) 70%, transparent);
}
.cf-photos-hint.is-ready {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 50%, var(--hairline));
}
.cf-photos-years {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cf-photos-year {
  appearance: none;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.cf-photos-year.is-on {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--hairline));
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 22%, transparent);
}
.cf-photos-acts {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.cf-photos-acts #cf-photos-add[hidden] { display: none; }
.cf-photos-acts .nav-ico { width: 14px; height: 14px; }
.cf-photos-acts button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.cf-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 14px;
}
.cf-photos-card {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--hairline));
  background:
    radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 58%),
    color-mix(in srgb, var(--sys-surface-2) 76%, var(--sys-bg));
  overflow: hidden;
  animation: cf-photos-enter 0.38s ease-out both;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.cf-photos-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 35%, transparent);
  opacity: 0.35;
}
.cf-photos-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 52%, var(--hairline));
  box-shadow: 0 14px 36px color-mix(in srgb, var(--primary) 18%, transparent);
}
.cf-photos-card.is-on {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--hairline));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent),
    0 16px 40px color-mix(in srgb, var(--primary) 16%, transparent);
}
.cf-photos-card.is-on::before {
  opacity: 1;
  background: var(--primary);
  box-shadow: 0 0 14px var(--primary);
  animation: cf-photos-rail 1.6s ease-in-out infinite;
}
.cf-photos-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cf-photos-card-head label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
}
.cf-photos-card-head input { accent-color: var(--primary); }
.cf-photos-del {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.cf-photos-del:hover { color: #f87171; background: color-mix(in srgb, #f87171 12%, transparent); }
.cf-photos-del .nav-ico { width: 15px; height: 15px; }
.cf-photos-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.cf-photos-thumb {
  appearance: none;
  border: 0;
  padding: 0;
  background: #0c0b0a;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3 / 4;
  position: relative;
}
.cf-photos-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cf-photos-thumb span {
  position: absolute;
  left: 4px;
  bottom: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(8, 7, 6, 0.62);
  padding: 2px 6px;
  border-radius: 999px;
}
.cf-photos-empty {
  grid-column: 1 / -1;
  position: relative;
  text-align: center;
  padding: 48px 20px 40px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--primary) 38%, var(--hairline));
  background:
    radial-gradient(70% 80% at 50% 0%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 58%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 22px,
      color-mix(in srgb, var(--primary) 6%, transparent) 23px
    ),
    color-mix(in srgb, var(--sys-surface-2) 55%, var(--sys-bg));
}
.cf-photos-empty .nav-ico {
  width: 36px;
  height: 36px;
  color: var(--primary);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--primary) 55%, transparent));
  margin-bottom: 8px;
}
.cf-photos-empty h4 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}
.cf-photos-empty p {
  margin: 0 auto 18px;
  max-width: 360px;
  color: var(--muted);
  line-height: 1.45;
}
.cf-photos-empty-cta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #1a100e;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent),
    0 10px 28px color-mix(in srgb, var(--primary) 28%, transparent);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.cf-photos-empty-cta .nav-ico { width: 18px; height: 18px; }
.cf-photos-empty-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent),
    0 14px 32px color-mix(in srgb, var(--primary) 36%, transparent);
}
.modal-dialog.cf-photos-add-dialog { max-width: 560px; }
.cf-photos-add-date {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin-bottom: 14px;
}
.cf-photos-add-date .field { flex: 1 1 160px; }
.cf-photos-slots {
  display: grid;
  gap: 10px;
}
.cf-photos-slot {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--primary) 42%, var(--hairline));
  background: color-mix(in srgb, var(--sys-bg) 70%, transparent);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.cf-photos-slot:hover,
.cf-photos-slot:focus-within {
  border-color: color-mix(in srgb, var(--primary) 72%, var(--hairline));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent),
    0 0 22px color-mix(in srgb, var(--primary) 22%, transparent);
  background: color-mix(in srgb, var(--primary) 8%, var(--sys-bg));
}
.cf-photos-slot.is-filled {
  border-style: solid;
}
.cf-photos-slot-file {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.cf-photos-slot-zone {
  position: relative;
  display: block;
  background: #0c0b0a;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px dashed color-mix(in srgb, var(--primary) 38%, var(--hairline));
}
.cf-photos-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cf-photos-slot-overlay {
  position: absolute;
  inset: auto 6px 6px;
  display: grid;
  place-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 88%, #1a100e);
  color: #1a100e;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.cf-photos-slot:hover .cf-photos-slot-overlay {
  filter: brightness(1.08);
}
.cf-photos-slot strong { display: block; margin-bottom: 4px; }
.cf-photos-slot p { margin: 0; font-size: 0.78rem; color: var(--muted); }
.modal-dialog.cf-photos-cmp-dialog { max-width: 820px; }
.cf-photos-cmp-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.cf-photos-ang {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  padding: 6px 4px 8px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.cf-photos-ang.is-on {
  color: var(--text);
  border-bottom-color: var(--primary);
}
.cf-photos-cmp-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cf-photos-cmp-col {
  display: grid;
  gap: 8px;
}
.cf-photos-cmp-col img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 14px;
  background: #0c0b0a;
  animation: cf-photos-fade 0.28s ease;
}
.cf-photos-cmp-col span {
  font-size: 0.78rem;
  color: var(--muted);
}
.cf-photos-cmp-col strong { font-size: 0.95rem; }
.modal-dialog.cf-photos-light-dialog { max-width: 720px; }
.cf-photos-light-body { padding-top: 0; }
.cf-photos-light-body img {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 12px;
  background: #0c0b0a;
}
@keyframes cf-photos-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes cf-photos-rail {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@keyframes cf-photos-fade {
  from { opacity: 0.35; }
  to { opacity: 1; }
}
@media (max-width: 720px) {
  .cf-photos-cmp-stage { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-photos-card,
  .cf-photos-card.is-on::before,
  .cf-photos-cmp-col img,
  .cf-photos-card:hover {
    animation: none;
    transition: none;
    transform: none;
  }
}

/* —— Mis clientes: banner invitados, wizard, invite forms —— */
.mc-invited-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #f59e0b 45%, var(--hairline));
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  color: var(--text);
}
.mc-invited-banner[hidden] { display: none; }
.mc-invited-banner p { margin: 0; flex: 1; font-size: 0.9rem; color: var(--text); }
.mc-invite-url {
  max-width: 360px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}
.mc-invite-url-full {
  display: block;
  white-space: normal;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--text);
  background: transparent;
  padding: 0;
}
.mc-invite-actions {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  white-space: nowrap;
}
.col-invite-actions { width: 132px; }
/* Override roster kebab col (56px) — invites need copy + edit + delete. */
.usuarios-roster-table col.col-invite-actions,
.usuarios-roster-table th.usuarios-roster-actions-col,
.usuarios-roster-table td.usuarios-roster-actions-col.mc-invite-actions {
  width: 132px !important;
  min-width: 132px !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap;
  text-align: right;
  padding-right: 8px;
}
#usuarios-panel-clientes .usuarios-roster-wrap.mc-roster-wrap {
  overflow-x: auto;
}
#usuarios-panel-clientes .usuarios-roster-wrap .mc-table-xscroll {
  overflow-x: auto;
  min-width: 0;
}
#usuarios-panel-clientes .usuarios-roster-table {
  min-width: 760px;
}
.mc-leads-soon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.mc-leads-soon button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.mc-req { color: #f87171; font-weight: 700; }
.mc-form-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}
.mc-form-stack .field,
.mc-form-grid2 .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.mc-form-stack .field > label,
.mc-form-grid2 .field > label,
.mc-form-stack .field-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.mc-form-stack input,
.mc-form-stack select,
.mc-form-grid2 input,
.mc-form-grid2 select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.mc-form-grid2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
  .mc-form-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mc-form-grid2 select {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-wiz-modal { --modal-w: 560px; }
.mc-wiz-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 20px 4px;
}
.mc-wiz-dot {
  appearance: none;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 10px;
}
.mc-wiz-dot.is-current {
  border-color: var(--accent, #e85d4c);
  color: var(--text);
}
.mc-wiz-dot.is-done { color: var(--text); }
.mc-wiz-dot:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mc-wiz-body { max-height: min(58vh, 520px); }
.mc-wiz-pane[hidden] { display: none; }
.mc-wiz-footer { gap: 8px; }
.mc-wiz-footer .btn-primary:disabled,
#invite-email-submit:disabled,
#client-invite-link-copy:disabled,
#mc-wiz-next:disabled,
#mc-wiz-submit:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}
.mc-invite-email-body,
.mc-invite-link-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mc-invite-ready h4 { margin: 0 0 4px; text-align: center; }
.mc-invite-ready .hint { text-align: center; }
#client-invite-link-dialog .mc-invite-hero { text-align: center; }
#client-invite-link-dialog .mc-form-stack { max-width: 100%; }

/* —— Ajustes de cuenta —— */
.acct-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  min-height: calc(100vh - 140px);
}
.acct-rail {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--hairline);
}
.acct-rail-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.acct-rail-btn .nav-ico { opacity: 0.7; }
.acct-rail-btn:hover { background: var(--surface-2); color: var(--text); }
.acct-rail-btn.is-on {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--text);
}
.acct-rail-btn.is-on .nav-ico { color: var(--primary); opacity: 1; }
.acct-main { min-width: 0; padding-bottom: 48px; }
.acct-pane-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding: 4px 0 10px;
  background: color-mix(in srgb, var(--bg, #0b100f) 88%, transparent);
  backdrop-filter: blur(8px);
}
.acct-pane-head h2 { margin: 0 0 6px; font-size: 1.45rem; letter-spacing: -0.03em; }
.acct-save {
  flex: 0 0 auto;
  margin: 0;
  width: auto;
  min-width: 92px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 28%, #1a2220);
  color: color-mix(in srgb, var(--text) 55%, transparent);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
}
.acct-save.is-ready {
  background: var(--primary);
  color: var(--tenant-primary-contrast, #07201c);
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}
.acct-save.is-ready:hover { filter: brightness(1.08); }
.acct-save.is-ready:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg, #0b100f), 0 0 0 4px var(--primary);
}
.acct-save:disabled { cursor: default; }
.acct-card,
.acct-fold {
  padding: 20px 22px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--hairline);
}
.acct-card { display: flex; flex-direction: column; gap: 14px; }
.acct-stack { display: flex; flex-direction: column; gap: 16px; }
.acct-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.acct-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; color: var(--muted); }
.acct-field input,
.acct-field select,
.acct-field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--sys-bg, #0e1412);
  color: var(--text);
  font: inherit;
}
.acct-check { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--text); }
.acct-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 36px;
  font-size: 0.88rem;
  color: var(--text);
}
.acct-switch input {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 20px;
  margin: 0;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: #3a4441;
  position: relative;
  cursor: pointer;
  transition: background 160ms ease;
}
.acct-switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 160ms ease;
}
.acct-switch input:checked {
  background: #7ad7ff;
}
.acct-switch input:checked::after { transform: translateX(16px); }
.acct-switch input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg, #0b100f), 0 0 0 4px #7ad7ff;
}
.acct-multi { display: flex; flex-direction: column; gap: 6px; }
.acct-pass-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.acct-photo-row { display: flex; align-items: center; gap: 14px; }
.acct-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
}
.acct-photo img { width: 100%; height: 100%; object-fit: cover; }
.acct-photo-fb { font-weight: 800; color: var(--primary); letter-spacing: 0.04em; }
.acct-tz { display: flex; flex-direction: column; gap: 8px; }
.acct-tz-label { margin: 0; font-weight: 600; }
.acct-brand-link { margin: 0; }
.acct-brand-link .linkish,
button.linkish {
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.acct-foot { min-height: 1.2em; }
.acct-lang { border: 1px dashed var(--hairline); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.acct-lang legend { padding: 0 6px; color: var(--muted); font-size: 0.8rem; }
.acct-kicker { margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.acct-sub-card h3 { margin: 0; font-size: 1.2rem; }
.acct-sub-hero {
  padding: 22px 24px;
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 55%),
    color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.acct-sub-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.acct-sub-hero h3 { margin: 4px 0 2px; font-size: 1.45rem; letter-spacing: -0.03em; }
.acct-sub-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.acct-sub-meter {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  overflow: hidden;
}
.acct-sub-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}
.acct-sub-dl { margin-top: 4px; }
.acct-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.acct-dl dt { font-size: 0.72rem; color: var(--muted); }
.acct-dl dd { margin: 4px 0 0; font-weight: 600; }
body.acct-hide-macros .nutrition-item-macros,
body.acct-hide-macros #nutrition-wizard-macros-total { display: none !important; }
body.acct-hide-print-nu #nutrition-print-pdf,
body.acct-hide-print-nu [data-nutrition-print] { display: none !important; }
.acct-plat-sum { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; }
.acct-plat-logo { width: 56px; height: 56px; object-fit: contain; background: transparent; }
.acct-code {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sys-bg, #0e1412);
  color: var(--primary);
  font-size: 0.85rem;
}
.acct-cfg-host { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.acct-fold { padding: 0; overflow: hidden; }
.acct-fold > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 650;
}
.acct-fold > summary::-webkit-details-marker { display: none; }
.acct-fold > summary .nav-ico { transition: transform 160ms ease; }
.acct-fold[open] > summary .nav-ico { transform: rotate(180deg); }
.acct-fold-hint { margin: 0 18px 8px; }
.acct-fold-body { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.acct-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acct-restore { align-self: flex-start; }
@media (max-width: 860px) {
  .acct-shell { grid-template-columns: 1fr; }
  .acct-rail { position: static; flex-direction: row; overflow-x: auto; }
  .acct-grid2, .acct-dl, .acct-metric-grid, .acct-pass-grid { grid-template-columns: 1fr; }
}

/* ═══ Home cmd-home4 — escala, scroll interno, diagnóstico arriba ═══ */
#tab-inicio.cmd-home.tab-panel.active {
  display: flex !important;
  flex-direction: column;
  gap: 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  max-height: 100% !important;
  padding-bottom: 36px !important;
}

#tab-inicio .cmd-pulse {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr);
  gap: 14px;
  flex: 0 0 auto !important;
}

#tab-inicio .cmd-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  align-content: start;
}

#tab-inicio .cmd-kpi {
  cursor: pointer;
  min-height: 58px;
  height: auto;
  align-self: start;
  padding: 8px 14px;
  gap: 2px;
}
#tab-inicio .cmd-kpi:hover,
#tab-inicio .cmd-kpi:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--sys-surface, var(--surface)));
  transform: translateY(-1px);
}

#tab-inicio .cmd-diag {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border, var(--hairline)));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 55%),
    linear-gradient(165deg, color-mix(in srgb, var(--surface) 88%, #fff 6%), var(--surface));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px color-mix(in srgb, var(--primary) 8%, transparent),
    0 18px 40px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
#tab-inicio .cmd-diag::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), transparent);
  opacity: 0.85;
}
#tab-inicio .cmd-diag-kicker {
  margin: 0 0 4px;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
#tab-inicio .cmd-diag-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok, #34d399) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok, #34d399) 32%, transparent);
  color: var(--ok, #34d399);
  font-size: 0.78rem;
  font-weight: 700;
}
#tab-inicio .cmd-diag-status[data-state="down"] {
  background: color-mix(in srgb, var(--err, #f87171) 12%, transparent);
  border-color: color-mix(in srgb, var(--err, #f87171) 32%, transparent);
  color: var(--err, #f87171);
}
#tab-inicio .cmd-diag-status[data-state="checking"],
#tab-inicio .cmd-diag-status[data-state="demo"] {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
  color: var(--primary);
}
#tab-inicio .cmd-diag-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent);
  animation: cmd-diag-pulse 1.8s ease-out infinite;
}
@keyframes cmd-diag-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent); }
  100% { box-shadow: 0 0 0 8px transparent; }
}
#tab-inicio .cmd-diag-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#tab-inicio .cmd-diag-chip,
#tab-inicio .cmd-diag-chip-slot > .cmd-diag-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border, var(--hairline)) 80%, #fff 10%);
  background: color-mix(in srgb, var(--surface) 70%, #000 8%);
  color: inherit;
  text-align: left;
  cursor: default;
}
#tab-inicio .cmd-diag-chip.is-nav {
  cursor: pointer;
}
#tab-inicio .cmd-diag-chip.is-nav:hover,
#tab-inicio .cmd-diag-chip.is-nav:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  outline: none;
}
#tab-inicio .cmd-diag-chip-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
#tab-inicio .cmd-diag-chip-value {
  font-size: 1.05rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
#tab-inicio .cmd-diag-tech {
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  padding-top: 4px;
}
#tab-inicio .cmd-diag-tech > summary {
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  padding: 6px 0;
}
#tab-inicio .cmd-diag-tech > summary::-webkit-details-marker { display: none; }
#tab-inicio .cmd-diag-tech .diag-body { padding: 4px 0 0; }
#tab-inicio .cmd-diag-tech .module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#tab-inicio .cmd-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

#tab-inicio .cmd-agenda-strip {
  min-height: 176px !important;
  align-items: stretch;
}
#tab-inicio .cmd-agenda-card {
  cursor: pointer;
  min-height: 132px !important;
}
#tab-inicio .cmd-agenda-card:hover,
#tab-inicio .cmd-agenda-card:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  outline: none;
}
#tab-inicio .cmd-agenda-strip > .cmd-empty,
#tab-inicio .cmd-agenda-empty {
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: flex-start;
  gap: 16px 20px !important;
  min-height: 176px !important;
  max-height: none !important;
  padding: 28px 28px !important;
  width: 100%;
}
#tab-inicio .cmd-empty-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 220px;
}
#tab-inicio .cmd-empty-copy strong {
  color: var(--text);
  font-size: 0.98rem;
}
#tab-inicio .cmd-empty-copy span {
  color: var(--muted);
  font-size: 0.84rem;
  white-space: normal !important;
}
#tab-inicio .cmd-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#tab-inicio .cmd-panel {
  overflow: hidden !important;
  min-height: 0 !important;
}
#tab-inicio .cmd-panel-tall,
#tab-inicio .cmd-activity-card,
#tab-inicio .cmd-risk-card,
#tab-inicio .cmd-upcoming-card {
  min-height: 0 !important;
}
#tab-inicio .cmd-ops {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
}
#tab-inicio .cmd-actions,
#tab-inicio #quick-links { display: none !important; }

#tab-inicio .cmd-scroll-list,
#tab-inicio #cmd-risk.cmd-dense-list,
#tab-inicio #cmd-gaps.cmd-dense-list {
  --cmd-row-h: 56px;
  max-height: calc(var(--cmd-row-h) * 5.4) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  flex: 0 1 auto !important;
  padding-right: 2px;
}
#tab-inicio .cmd-scroll-list li {
  min-height: var(--cmd-row-h) !important;
}

#tab-inicio .cmd-act-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(58px * 5.2);
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
}
#tab-inicio .cmd-act-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--surface) 80%, #fff 4%);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
#tab-inicio .cmd-act-row:hover,
#tab-inicio .cmd-act-row:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
  outline: none;
}
#tab-inicio .cmd-act-row time {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
}
#tab-inicio .cmd-act-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#tab-inicio .cmd-act-main strong,
#tab-inicio .cmd-act-main span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tab-inicio .cmd-act-main span { color: var(--muted); font-size: 0.74rem; }

#tab-inicio .cmd-assign {
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
}
#tab-inicio .cmd-assign:hover,
#tab-inicio .cmd-assign:focus-visible {
  background: var(--primary);
  color: #1a0f08;
  outline: none;
}

#tab-inicio .cmd-row-action[data-goto-tab],
#tab-inicio .cmd-link-btn,
#tab-inicio .cmd-btn-primary,
#tab-inicio .cmd-btn-ghost,
#tab-inicio .cmd-day-event[data-goto-tab],
#tab-inicio [data-goto-tab] {
  cursor: pointer;
}
#tab-inicio .cmd-row-action[data-goto-tab]:hover,
#tab-inicio .cmd-row-action[data-goto-tab]:focus-visible,
#tab-inicio .cmd-day-event[data-goto-tab]:hover,
#tab-inicio .cmd-day-event[data-goto-tab]:focus-visible {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  outline: none;
}
#tab-inicio .cmd-link-btn:hover,
#tab-inicio .cmd-link-btn:focus-visible {
  color: var(--primary);
  outline: none;
}

#tab-inicio .cmd-day-track {
  min-height: 0;
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}
#tab-inicio .cmd-day-rail {
  position: relative;
  padding-left: 22px;
}
#tab-inicio .cmd-day-line {
  position: absolute;
  left: 6px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--primary) 22%, var(--border));
  overflow: hidden;
}
#tab-inicio .cmd-day-fill {
  display: block;
  width: 100%;
  background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 55%, transparent));
  border-radius: inherit;
}
#tab-inicio .cmd-day-now {
  position: absolute;
  left: 6px;
  width: 12px;
  height: 12px;
  margin-left: -4.5px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);
  z-index: 2;
}
#tab-inicio .cmd-day-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#tab-inicio .cmd-day-event {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border, var(--hairline));
  background: var(--surface-2, var(--surface));
}
#tab-inicio .cmd-day-event.is-live {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}
#tab-inicio .cmd-day-dot {
  position: absolute;
  left: -21px;
  top: 16px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--primary);
  z-index: 1;
}
#tab-inicio .cmd-day-dot.is-past {
  background: var(--primary);
}
#tab-inicio .cmd-day-dot.is-live {
  width: 14px;
  height: 14px;
  left: -22.5px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 24%, transparent);
  background: var(--primary);
}
#tab-inicio .cmd-day-dot.is-future {
  opacity: 0.7;
}
#tab-inicio .cmd-day-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#tab-inicio .cmd-day-body strong { font-size: 0.82rem; }
#tab-inicio .cmd-day-body span { font-size: 0.74rem; color: var(--muted); }
#tab-inicio .cmd-day-live {
  font-size: 0.62rem !important;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary) !important;
}

#tab-inicio .cmd-aforo {
  display: flex;
  flex-direction: column;
}
#tab-inicio .cmd-aforo-body {
  display: grid !important;
  grid-template-columns: minmax(140px, 0.42fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px !important;
  flex: 1 1 auto;
  min-height: 200px;
  padding: 12px 4px 8px !important;
}
#tab-inicio .cmd-ring {
  width: min(220px, 100%) !important;
  height: auto !important;
  aspect-ratio: 1;
  justify-self: center;
}
#tab-inicio .cmd-ring-inner {
  max-width: none !important;
  width: 62% !important;
}
#tab-inicio .cmd-ring-value {
  font-size: clamp(1.6rem, 3.2vw, 2.1rem) !important;
}
#tab-inicio .cmd-ring-label {
  font-size: 0.68rem !important;
}
#tab-inicio .cmd-aforo-legend {
  gap: 8px !important;
  font-size: 0.9rem !important;
}
#tab-inicio .cmd-skeleton-block { height: 168px !important; }

#tab-inicio .cmd-empty.has-art {
  min-height: 120px !important;
  max-height: none !important;
}
#tab-inicio .cmd-upcoming-card .cmd-empty.has-art {
  min-height: 120px !important;
  padding: 20px 12px !important;
}

@media (prefers-reduced-motion: reduce) {
  #tab-inicio .cmd-diag-pulse { animation: none; }
}

@media (max-width: 1100px) {
  #tab-inicio .cmd-pulse { grid-template-columns: 1fr; }
  #tab-inicio .cmd-ops { grid-template-columns: 1fr !important; }
}
@media (max-width: 800px) {
  #tab-inicio .cmd-kpi-row { grid-template-columns: 1fr; }
  #tab-inicio .cmd-diag-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #tab-inicio .cmd-aforo-body { grid-template-columns: 1fr !important; justify-items: center; }
}


/* —— Carlitos Sep 11 portal polish —— */
.af-cardio-rx-fields { display: grid; gap: 10px; }
.af-cardio-rx-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.af-cardio-intervals-host .block-cardio-intervals-wrap {
  margin-top: 4px;
  padding: 10px;
  border: 1px solid var(--border, #333);
  border-radius: 10px;
}
.actividad-demo-banner,
.actividad-scope-banner {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
}
.actividad-demo-banner {
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
}
.actividad-scope-banner {
  opacity: 0.85;
}
@media (max-width: 820px) {
  #mc-client-hub-dialog .mc-hub-cal-cell {
    min-height: 72px;
  }
  #mc-client-hub-dialog .mc-hub-cal-grid.is-day .mc-hub-cal-cell {
    min-height: 120px;
  }
  .af-cardio-rx-row { grid-template-columns: 1fr; }
  .mc-invite-url { max-width: 42vw; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Phone shell — Galaxy S20 Ultra (~412px) / 360–430px — 2026-09-14
   Header: title row + icon row (no overlap). Rosters: real x-scroll.
   Biblioteca / módulos: stack + wrap, usable without page blowout.
   ═══════════════════════════════════════════════════════════════════════ */

/* Flex children must be allowed to shrink or overflow:auto never engages. */
.main-area,
.content,
.tab-panel,
.usuarios-panel,
.usuarios-body,
.usuarios-clientes-workspace,
.workspace,
.centro-host,
.centro-panel,
#tab-comidas,
#tab-planificador,
#tab-recuperacion,
#tab-wellness {
  min-width: 0;
  max-width: 100%;
}

/* ── Roster / table X-scroll hosts (all portal tables) ──
   Outer wrap: Y-scroll + X-clip. ONE x-scroll host (inner .mc-table-xscroll,
   or the wrap itself when no inner). Avoid dual overflow-x:auto (grew past
   viewport → html/body overflow-x:hidden clipped last cols with no scrollbar). */
#usuarios-panel-clientes .mc-roster-wrap,
#usuarios-panel-clientes .usuarios-roster-wrap.mc-roster-wrap,
#usuarios-panel-equipo .usuarios-roster-wrap.mc-roster-wrap,
#usuarios-panel-grupos .usuarios-roster-wrap.mc-roster-wrap,
#usuarios-panel-etiquetas .usuarios-roster-wrap,
#usuarios-panel-encuestas .usuarios-roster-wrap,
.usuarios-roster-wrap,
.usuarios-roster-wrap.mc-roster-wrap,
.docs-lib-table-wrap,
.forms-lib-table-wrap,
.programas-lib-table-wrap,
.cf-forms-table-wrap,
.cf-neg-table-wrap,
.mc-docs-table-wrap,
.mc-hub-obs-table-wrap,
.table-wrap {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

.usuarios-roster-wrap,
.usuarios-roster-wrap.mc-roster-wrap,
.docs-lib-table-wrap,
.forms-lib-table-wrap,
.programas-lib-table-wrap,
.cf-forms-table-wrap,
.cf-neg-table-wrap {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.mc-table-xscroll,
.usuarios-roster-wrap .mc-table-xscroll,
.docs-lib-table-xscroll,
.programas-lib-table-xscroll {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Extra end pad so last action buttons clear the clip edge */
  padding-inline-end: 20px;
  scroll-padding-inline-end: 24px;
}

/* No inner xscroll → wrap is the scroll host */
.usuarios-roster-wrap:not(:has(.mc-table-xscroll)),
.docs-lib-table-wrap:not(:has(.mc-table-xscroll)),
.forms-lib-table-wrap:not(:has(.mc-table-xscroll)),
.programas-lib-table-wrap:not(:has(.mc-table-xscroll)),
.cf-forms-table-wrap:not(:has(.mc-table-xscroll)),
.cf-neg-table-wrap:not(:has(.mc-table-xscroll)),
.mc-docs-table-wrap,
.mc-hub-obs-table-wrap,
.table-wrap {
  overflow-x: auto !important;
  overflow-y: auto !important;
  padding-inline-end: 20px;
  scroll-padding-inline-end: 24px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

#usuarios-panel-clientes .usuarios-roster-wrap.mc-roster-wrap {
  overflow-x: hidden !important;
}
#usuarios-panel-clientes .usuarios-roster-wrap .mc-table-xscroll {
  overflow-x: auto !important;
  min-width: 0;
}

@media (max-width: 720px) {
  /* Sticky Acciones at trailing edge while scrolling horizontally */
  .usuarios-roster-table thead th.usuarios-roster-actions-col,
  .usuarios-roster-table td.usuarios-roster-actions-col,
  .docs-lib-table th.usuarios-roster-actions-col,
  .docs-lib-table td.usuarios-roster-actions-col,
  .docs-lib-table td.docs-lib-actions-cell,
  .forms-lib-table th.usuarios-roster-actions-col,
  .forms-lib-table td.usuarios-roster-actions-col,
  .programas-lib-table th.usuarios-roster-actions-col,
  .programas-lib-table td.usuarios-roster-actions-col {
    position: sticky;
    right: 0;
    z-index: 3;
    background: var(--sys-surface, var(--surface));
    box-shadow: -6px 0 10px color-mix(in srgb, #000 18%, transparent);
    min-width: 72px;
    width: auto;
    max-width: none;
  }
  .usuarios-roster-table thead th.usuarios-roster-actions-col,
  .docs-lib-table thead th.usuarios-roster-actions-col,
  .forms-lib-table thead th.usuarios-roster-actions-col,
  .programas-lib-table thead th.usuarios-roster-actions-col {
    z-index: 6;
    background: var(--sys-surface-2, var(--surface));
  }
  /* Mis clientes: check + kebab sticky on leading edge */
  #mc-clients-table .mc-check-col,
  #mc-clients-table .mc-kebab-col {
    position: sticky;
    z-index: 3;
    background: var(--sys-surface, var(--surface));
  }
  #mc-clients-table thead .mc-check-col,
  #mc-clients-table thead .mc-kebab-col {
    z-index: 6;
    background: var(--sys-surface-2, var(--surface));
  }
  #mc-clients-table .mc-check-col { left: 0; }
  #mc-clients-table .mc-kebab-col {
    left: 34px;
    box-shadow: 4px 0 10px color-mix(in srgb, #000 14%, transparent);
  }
}

@media (max-width: 480px) {
  /* —— Header: single row — burger | title | icons (no wrap desborde) —— */
  .page-header {
    padding: 8px 10px;
    gap: 4px;
    min-height: 0;
    overflow: visible;
  }
  .page-header-top {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
    overflow: visible;
  }
  .sidebar-toggle {
    flex: 0 0 auto;
    align-self: center;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0;
  }
  .page-header-titles {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    align-self: center;
  }
  .page-title {
    font-size: 0.95rem;
    line-height: 1.15;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .page-breadcrumb {
    font-size: 0.58rem;
    line-height: 1.1;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-actions {
    flex: 0 1 auto;
    flex-shrink: 1;
    width: auto;
    max-width: min(58vw, 220px);
    min-width: 0;
    align-self: center;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0;
    margin: 0;
  }
  .topbar-actions::-webkit-scrollbar { display: none; height: 0; }
  .topbar-btn.icon-only,
  .topbar-search {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    flex: 0 0 auto;
    align-self: center;
  }
  .topbar-btn.icon-only .nav-ico {
    width: 16px;
    height: 16px;
  }
  .topbar-notif-wrap {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .topbar-profile {
    flex: 0 0 auto;
    margin-left: 1px;
    align-self: center;
  }
  .topbar-profile .user-chip {
    max-width: none;
    padding: 1px;
    gap: 0;
    min-width: 32px;
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
  }
  .topbar-profile .user-chip-copy,
  .topbar-profile .nav-chevron {
    display: none !important;
  }
  .topbar-profile .user-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.65rem;
  }
  .module-chrome {
    margin-top: 4px;
  }
  .module-chrome .module-subnav,
  #module-subnav.module-subnav {
    gap: 4px;
    padding-bottom: 2px;
  }
  .module-chrome .module-subnav .centro-subnav-btn {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 0.78rem;
  }

  .content {
    padding: 10px 12px 20px;
  }

  /* —— Usuarios / Mis clientes —— */
  .mc-lifecycle-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 2px;
    margin-bottom: 10px;
    scrollbar-width: none;
  }
  .mc-lifecycle-tabs::-webkit-scrollbar { display: none; }
  .mc-lifecycle-tab {
    flex: 0 0 auto;
    padding: 8px 10px;
    font-size: 0.8rem;
    white-space: nowrap;
  }
  .mc-clients-toolbar.usuarios-toolbar,
  .usuarios-panel .usuarios-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
  }
  .mc-clients-search,
  .mc-clients-toolbar .usuarios-client-search,
  .usuarios-panel .usuarios-toolbar .usuarios-client-search {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .mc-clients-toolbar .mc-columns-wrap,
  .mc-clients-toolbar .icon-btn,
  .mc-clients-toolbar .mc-add-wrap {
    flex: 0 0 auto;
  }
  .mc-clients-toolbar .btn-primary,
  .usuarios-panel .usuarios-toolbar .btn-primary {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    justify-content: center;
    white-space: nowrap;
  }
  #mc-clients-table.mc-clients-table {
    min-width: 760px;
  }
  .usuarios-roster-table {
    min-width: 640px;
  }
  #usuarios-panel-equipo .usuarios-staff-table,
  #equipo-staff-table.usuarios-staff-table {
    min-width: 720px;
  }
  .tags-table,
  .survey-templates-table,
  .usuarios-grupos-table,
  .docs-lib-table,
  .forms-lib-table,
  .session-types-table {
    min-width: 640px;
  }
  .programas-lib-table {
    min-width: 1120px;
  }

  /* —— Biblioteca / Nutrición plantillas —— */
  #tab-comidas .nut-pane.is-active.nut-planes-libpane.planner-libpane {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: auto;
    gap: 10px;
  }
  #tab-comidas .nut-planes-libpane > .libpane-side {
    border-right: 0;
    padding-right: 0;
    max-height: min(42vh, 320px);
  }
  #tab-comidas .nut-pautas-toolbar,
  #tab-comidas .nut-pautas-actions,
  #tab-comidas .nutrition-toolbar,
  #tab-comidas .nutrition-lib-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .libpane-card-meta,
  .libpane-card.is-active .libpane-card-meta,
  #tab-comidas .nut-plan-lib-card .libpane-card-meta,
  #tab-comidas .nut-plan-lib-card.is-active .hint {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .af-plantillas-add-wrap,
  #tab-comidas .nut-planes-libpane .af-plantillas-add-wrap {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--sys-bg, var(--bg)) 92%, transparent);
    padding-top: 8px;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }
  #tab-planificador.is-library .planner-libpane,
  #tab-comidas.is-library .nutrition-libpane {
    grid-template-columns: 1fr !important;
  }
  #nutrition-pane-biblioteca .libpane-kind-tabs {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* —— Centro / cobros / calendarios —— */
  .centro-subnav,
  .pagos-kpi-row {
    min-width: 0;
  }
  .pagos-kpi-row {
    grid-template-columns: 1fr 1fr;
  }
  .table-wrap {
    overflow-x: auto !important;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    padding-inline-end: 20px;
    scroll-padding-inline-end: 24px;
  }
}