@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&display=swap');._wrapper_n6n9l_1 {
  min-height: 100dvh;
  background: #0d0f14;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 32px) 28px
           calc(env(safe-area-inset-bottom, 0px) + 32px);
}

._inner_n6n9l_11 {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

._brand_n6n9l_20 {
  margin-bottom: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
._brandLogo_n6n9l_26 {
  width: 110px;
  height: 110px;
  border-radius: 24px;
  object-fit: contain;
}

._title_n6n9l_33 {
  font-size: 24px;
  font-weight: 800;
  color: #f0f2f8;
  text-align: center;
  margin: 0 0 10px;
}

._sub_n6n9l_41 {
  font-size: 14px;
  color: #7a7f94;
  text-align: center;
  line-height: 1.5;
  margin: 0 0 32px;
}

._inputWrap_n6n9l_49 {
  width: 100%;
  margin-bottom: 12px;
}

._input_n6n9l_49 {
  width: 100%;
  background: #1e2230;
  border: 1.5px solid #2a2f42;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 16px;
  color: #f0f2f8;
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}
._input_n6n9l_49::placeholder { color: #4a5068; }
._input_n6n9l_49:focus { border-color: #8b5cf6; }

._error_n6n9l_69 {
  font-size: 13px;
  color: #e8312a;
  text-align: center;
  margin: 0 0 16px;
}

._btn_n6n9l_76 {
  width: 100%;
  background: #8b5cf6;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  transition: opacity 0.15s, transform 0.13s;
  margin-top: 4px;
  -webkit-tap-highlight-color: transparent;
}
._btn_n6n9l_76:active  { transform: scale(0.97); opacity: 0.9; }
._btn_n6n9l_76:disabled { opacity: 0.6; }

._btnGreen_n6n9l_97 {
  width: 100%;
  background: #22c55e;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  transition: opacity 0.15s, transform 0.13s;
  margin-top: 4px;
  -webkit-tap-highlight-color: transparent;
}
._btnGreen_n6n9l_97:active { transform: scale(0.97); opacity: 0.9; }

._btnText_n6n9l_117 {
  background: none;
  border: none;
  color: #7a7f94;
  font-size: 14px;
  cursor: pointer;
  margin-top: 16px;
  padding: 8px;
  -webkit-tap-highlight-color: transparent;
}
._btnText_n6n9l_117:active { opacity: 0.7; }

._spinner_n6n9l_129 {
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: _spin_n6n9l_129 0.7s linear infinite;
}
@keyframes _spin_n6n9l_129 { to { transform: rotate(360deg); } }

._gymCard_n6n9l_139 {
  background: #1e2230;
  border: 1px solid #2a2f42;
  border-radius: 20px;
  padding: 24px 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

._gymLogoWrap_n6n9l_152 {
  width: 80px;
  height: 80px;
  background: #fff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
}

._gymLogo_n6n9l_152 {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

._gymName_n6n9l_170 {
  font-size: 18px;
  font-weight: 700;
  color: #f0f2f8;
  margin: 0;
  text-align: center;
}

._gymConnected_n6n9l_178 {
  font-size: 13px;
  color: #22c55e;
  margin: 0;
}

._hint_n6n9l_184 {
  margin-top: 20px;
  font-size: 12px;
  color: #4a5068;
  text-align: center;
}
/* ════════════════════════════════════════
   UI Components — shared styles
   ════════════════════════════════════════ */

/* ── Button ──────────────────────────────────────────────── */
._btn_14k87_6 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}

._btn_14k87_6:disabled { opacity: .5; cursor: not-allowed; }

._btnPrimary_14k87_25 {
  background: var(--color-accent);
  color: #0d0f14;
  border-color: var(--color-accent);
}
._btnPrimary_14k87_25:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
._btnPrimary_14k87_25:active:not(:disabled) { transform: translateY(0); }

._btnSecondary_14k87_33 {
  background: var(--color-card);
  color: var(--color-text);
  border-color: var(--color-border);
}
._btnSecondary_14k87_33:hover:not(:disabled) { border-color: var(--color-border2); background: var(--color-card2); }

._btnDanger_14k87_40 {
  background: rgba(255,107,107,.1);
  color: var(--color-danger);
  border-color: rgba(255,107,107,.25);
}
._btnDanger_14k87_40:hover:not(:disabled) { background: rgba(255,107,107,.18); }

._btnGhost_14k87_47 {
  background: transparent;
  color: var(--color-muted);
  border-color: transparent;
}
._btnGhost_14k87_47:hover:not(:disabled) { background: var(--color-card); color: var(--color-text); }

._btnSm_14k87_54 { padding: 6px 12px; font-size: 12px; }
._btnLg_14k87_55 { padding: 12px 24px; font-size: 15px; }
._btnBlock_14k87_56 { width: 100%; }

/* ── Variantes "glass" (vista móvil) ──────────────────────────
   Forma de píldora + superficie translúcida con desenfoque. Se usan
   con <Button variant="glass" | "glassAccent" | "glassOutline" />.
   Las variantes clásicas (primary/secondary/…) quedan intactas para
   el panel de escritorio. */
._btnGlass_14k87_63,
._btnGlassAccent_14k87_64,
._btnGlassOutline_14k87_65 {
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  font-size: 14.5px;
  font-weight: 600;
}
._btnGlass_14k87_63:active:not(:disabled),
._btnGlassAccent_14k87_64:active:not(:disabled),
._btnGlassOutline_14k87_65:active:not(:disabled) { transform: scale(.97); }

/* Frosted neutro */
._btnGlass_14k87_63 {
  background: var(--glass-bg-strong);
  color: var(--color-text);
  border-color: var(--glass-border);
  border-top-color: var(--glass-border-hi);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
}
._btnGlass_14k87_63:hover:not(:disabled) { background: var(--glass-bg-hover); }

/* Acento sólido en píldora (acción principal) */
._btnGlassAccent_14k87_64 {
  background: var(--color-accent);
  color: #0d0f14;
  border-color: var(--color-accent);
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(var(--color-accent-rgb), .28);
}
._btnGlassAccent_14k87_64:hover:not(:disabled) { filter: brightness(1.06); }

/* Contorno de acento (filtros, secundarios) */
._btnGlassOutline_14k87_65 {
  background: rgba(var(--color-accent-rgb), .08);
  color: var(--color-accent);
  border-color: var(--color-accent);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
}
._btnGlassOutline_14k87_65:hover:not(:disabled) { background: rgba(var(--color-accent-rgb), .14); }

/* Tamaños dentro de las variantes glass (doble clase → gana al genérico) */
._btnGlass_14k87_63._btnSm_14k87_54, ._btnGlassAccent_14k87_64._btnSm_14k87_54, ._btnGlassOutline_14k87_65._btnSm_14k87_54, ._btnGlassDanger_14k87_107._btnSm_14k87_54 {
  padding: 8px 15px;
  font-size: 12.5px;
}
._btnGlass_14k87_63._btnLg_14k87_55, ._btnGlassAccent_14k87_64._btnLg_14k87_55, ._btnGlassOutline_14k87_65._btnLg_14k87_55, ._btnGlassDanger_14k87_107._btnLg_14k87_55 {
  padding: 14px 26px;
  font-size: 15.5px;
}

/* Peligro en píldora (cerrar sesión, eliminar…) */
._btnGlassDanger_14k87_107 {
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  font-size: 14.5px;
  font-weight: 600;
  background: rgba(255, 107, 107, .10);
  color: var(--color-danger);
  border-color: rgba(255, 107, 107, .32);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
}
._btnGlassDanger_14k87_107:hover:not(:disabled) { background: rgba(255, 107, 107, .18); }
._btnGlassDanger_14k87_107:active:not(:disabled) { transform: scale(.97); }

/* Botón circular de icono (atrás, cerrar…) */
._btnGlassIcon_14k87_132 {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--glass-bg-strong);
  color: var(--color-text);
  border-color: var(--glass-border);
  border-top-color: var(--glass-border-hi);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  font-size: 18px;
}
._btnGlassIcon_14k87_132:hover:not(:disabled) { background: var(--glass-bg-hover); }
._btnGlassIcon_14k87_132:active:not(:disabled) { transform: scale(.94); }

/* ── Superficies y chips glass reutilizables ───────────────── */
._glassCard_14k87_149 {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-hi);
  border-radius: var(--radius-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

._glassChip_14k87_159 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-muted);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: var(--transition);
  white-space: nowrap;
}
._glassChipOn_14k87_174 {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), .08);
}

/* Buscador en píldora frosted */
._glassSearch_14k87_181 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-hi);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  color: var(--color-text);
  font-size: 15px;
}
._glassSearch_14k87_181 input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: inherit;
  font-family: var(--font-body);
  font-size: inherit;
}
._glassSearch_14k87_181 input::placeholder { color: var(--color-muted); }

/* Cristal solo donde tiene sentido: en pantallas grandes el panel de
   escritorio mantiene su acabado sólido actual. */
@media (prefers-reduced-transparency: reduce) {
  ._btnGlass_14k87_63, ._btnGlassOutline_14k87_65, ._btnGlassIcon_14k87_132, ._glassCard_14k87_149, ._glassSearch_14k87_181 {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--color-card);
  }
}

/* ═══════════════════════════════════════════════════════════════
   DENTRO DE LA APP DEL CLIENTE (.app-cliente)
   Todos los <Button> adoptan el acabado del mockup: píldora + cristal.
   Así no hace falta cambiar variante en cada página; el panel de
   escritorio queda intacto porque no lleva esta marca.
   ═══════════════════════════════════════════════════════════════ */
.app-cliente ._btn_14k87_6 {
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  font-size: 14.5px;
  font-weight: 600;
}
.app-cliente ._btn_14k87_6:active:not(:disabled) { transform: scale(.97); }
.app-cliente ._btnSm_14k87_54 { padding: 8px 15px;  font-size: 12.5px; }
.app-cliente ._btnLg_14k87_55 { padding: 14px 26px; font-size: 15.5px; }

/* Primario → acento sólido con sombra */
.app-cliente ._btnPrimary_14k87_25 {
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(var(--color-accent-rgb), .28);
}
.app-cliente ._btnPrimary_14k87_25:hover:not(:disabled) { transform: none; filter: brightness(1.06); }

/* Secundario → cristal frosted */
.app-cliente ._btnSecondary_14k87_33 {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border);
  border-top-color: var(--glass-border-hi);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
}
.app-cliente ._btnSecondary_14k87_33:hover:not(:disabled) {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hi);
}

/* Ghost → cristal muy sutil */
.app-cliente ._btnGhost_14k87_47:hover:not(:disabled) { background: var(--glass-bg); }

/* Peligro → píldora translúcida */
.app-cliente ._btnDanger_14k87_40 {
  background: rgba(255, 107, 107, .10);
  border-color: rgba(255, 107, 107, .32);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
}

@media (prefers-reduced-transparency: reduce) {
  .app-cliente ._btnSecondary_14k87_33,
  .app-cliente ._btnDanger_14k87_40 {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Campos de formulario: superficie de cristal y esquinas más suaves */
.app-cliente ._input_14k87_274 {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  border-radius: 14px;
  padding: 12px 15px;
  font-size: 14px;
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
}
.app-cliente ._input_14k87_274:focus {
  background: var(--glass-bg-strong);
  border-color: var(--color-accent);
}
.app-cliente ._inputIcon_14k87_287 ._input_14k87_274 { padding-left: 40px; }

@media (prefers-reduced-transparency: reduce) {
  .app-cliente ._input_14k87_274 {
    background: var(--color-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ── Badge ───────────────────────────────────────────────── */
._badge_14k87_298 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

._badgeGreen_14k87_309   { background: rgba(74,222,128,.12);  color: var(--color-success); }
._badgeOrange_14k87_310  { background: rgba(251,146,60,.12);   color: var(--color-warning); }
._badgeRed_14k87_311     { background: rgba(255,107,107,.12);  color: var(--color-danger);  }
._badgeBlue_14k87_312    { background: rgba(71,200,255,.12);   color: var(--color-info);    }
._badgeGray_14k87_313    { background: rgba(122,127,148,.12);  color: var(--color-muted);   }
._badgeYellow_14k87_314  { background: rgba(232,255,71,.12);   color: var(--color-accent);  }

/* ── Avatar ──────────────────────────────────────────────── */
._avatar_14k87_317 {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-family: var(--font-display);
  flex-shrink: 0;
  overflow: hidden;
  background: var(--color-card2);
  color: var(--color-text);
}

._avatarImg_14k87_330 { width: 100%; height: 100%; object-fit: cover; }

._avatarXs_14k87_332 { width: 24px; height: 24px; font-size: 9px;  }
._avatarSm_14k87_333 { width: 32px; height: 32px; font-size: 11px; }
._avatarMd_14k87_334 { width: 40px; height: 40px; font-size: 14px; }
._avatarLg_14k87_335 { width: 56px; height: 56px; font-size: 18px; }
._avatarXl_14k87_336 { width: 80px; height: 80px; font-size: 26px; }

/* ── Spinner ─────────────────────────────────────────────── */
._spinner_14k87_339 {
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  border-top-color: var(--color-accent);
  animation: _spin_14k87_339 .7s linear infinite;
  flex-shrink: 0;
}
@keyframes _spin_14k87_339 { to { transform: rotate(360deg); } }

._spinnerSm_14k87_348  { width: 16px; height: 16px; }
._spinnerMd_14k87_349  { width: 28px; height: 28px; }
._spinnerLg_14k87_350  { width: 48px; height: 48px; border-width: 3px; }

._spinnerCenter_14k87_352 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}

/* ── Accesibilidad — solo para lectores de pantalla ──────── */
._srOnly_14k87_360 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Card ────────────────────────────────────────────────── */
._card_14k87_373 {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

._cardSm_14k87_380 { padding: 14px 16px; }
._cardLg_14k87_381 { padding: 28px; }

/* ── Input ───────────────────────────────────────────────── */
._inputWrap_14k87_384 { display: flex; flex-direction: column; gap: 6px; }

._label_14k87_386 {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted);
  letter-spacing: .2px;
}

._input_14k87_274 {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 13px;
  font-size: 13.5px;
  color: var(--color-text);
  outline: none;
  transition: var(--transition);
  width: 100%;
  font-family: var(--font-body);
}
._input_14k87_274::placeholder { color: var(--color-muted2); }
._input_14k87_274:hover        { border-color: var(--color-border2); }
._input_14k87_274:focus        { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(232,255,71,.08); }
._input_14k87_274:disabled     { opacity: .5; cursor: not-allowed; }
._inputErr_14k87_409           { border-color: var(--color-danger) !important; box-shadow: 0 0 0 3px rgba(255,107,107,.08) !important; }
._inputIcon_14k87_287 { position: relative; }
._inputIcon_14k87_287 ._input_14k87_274   { padding-left: 36px; }
._inputIconEl_14k87_412 {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--color-muted);
  pointer-events: none;
}

._errorMsg_14k87_421 { font-size: 11.5px; color: var(--color-danger); }
._helperMsg_14k87_422 { font-size: 11.5px; color: var(--color-muted); }

/* ── Select ──────────────────────────────────────────────── */
._select_14k87_425 {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 13px;
  font-size: 13.5px;
  color: var(--color-text);
  outline: none;
  transition: var(--transition);
  width: 100%;
  font-family: var(--font-body);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a7f94' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
._select_14k87_425:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(232,255,71,.08); }

/* ── Modal ───────────────────────────────────────────────── */
._overlay_14k87_446 {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: _fadeIn_14k87_1 .15s ease;
}
@keyframes _fadeIn_14k87_1 { from { opacity: 0; } to { opacity: 1; } }

._modal_14k87_456 {
  background: var(--modal-bg);
  /* En la app del cliente --modal-bg es translúcido → panel de cristal.
     En escritorio es sólido y el desenfoque no se aprecia. */
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--color-border);
  border-top-color: var(--glass-border-hi);
  border-radius: var(--radius-xl);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: _slideUp_14k87_1 .2s ease;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
@keyframes _slideUp_14k87_1 { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

._modalSm_14k87_474  { max-width: 400px; }
._modalMd_14k87_475  { max-width: 560px; }
._modalLg_14k87_476  { max-width: 760px; }
._modalXl_14k87_477  { max-width: 960px; }

._modalHeader_14k87_479 {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

._modalTitle_14k87_486 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text);
}

._modalClose_14k87_493 {
  width: 30px; height: 30px;
  background: var(--color-bg3);
  border: none; border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
._modalClose_14k87_493:hover { background: var(--color-card2); color: var(--color-text); }

._modalBody_14k87_505 {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

._modalFooter_14k87_511 {
  padding: 14px 24px;
  border-top: 1px solid var(--color-border);
  display: flex; gap: 10px; justify-content: flex-end;
  flex-shrink: 0;
}

/* ── Table ───────────────────────────────────────────────── */
._tableWrap_14k87_519 { overflow-x: auto; }

._table_14k87_519 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

._table_14k87_519 th {
  text-align: left;
  padding: 0 12px 10px;
  font-size: 10.5px;
  color: var(--color-muted);
  font-weight: 500;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

._table_14k87_519 td {
  padding: 12px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}

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

._table_14k87_519 tbody tr {
  transition: var(--transition);
}
._table_14k87_519 tbody tr:hover { background: var(--color-bg3); }

._tableEmpty_14k87_553 {
  text-align: center;
  padding: 48px;
  color: var(--color-muted);
  font-size: 13px;
}

/* ── Toast ───────────────────────────────────────────────── */
._toastContainer_14k87_561 {
  position: fixed;
  bottom: 24px; right: 24px;
  display: flex; flex-direction: column;
  gap: 10px;
  z-index: 2000;
}

._toast_14k87_561 {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 500;
  max-width: 360px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  animation: _toastIn_14k87_584 .25s ease;
  border: 1px solid transparent;
}
@keyframes _toastIn_14k87_584 { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

._toastSuccess_14k87_582 { background: var(--color-card); border-color: rgba(74,222,128,.25);  color: var(--color-success); }
._toastError_14k87_583   { background: var(--color-card); border-color: rgba(255,107,107,.25); color: var(--color-danger);  }
._toastInfo_14k87_584    { background: var(--color-card); border-color: rgba(71,200,255,.25);  color: var(--color-info);    }
._toastWarning_14k87_585 { background: var(--color-card); border-color: rgba(251,146,60,.25);  color: var(--color-warning); }

._toastMsg_14k87_587 { flex: 1; color: var(--color-text); }
._toastCloseBtn_14k87_588 { background: none; border: none; color: var(--color-muted); cursor: pointer; font-size: 14px; padding: 0; line-height: 1; }

/* ── Modal responsive ───────────────────────────────────── */
@media (max-width: 560px) {
  ._overlay_14k87_446 {
    /* Reservamos la altura de la BottomTabs (fixed, z-index 1000) para que
       el footer del modal sheet no quede tapado por la barra inferior. */
    padding: 0 0 calc(70px + env(safe-area-inset-bottom, 0px));
    align-items: flex-end;
  }
  ._modal_14k87_456 {
    border-radius: 20px 20px 0 0;
    max-height: 88dvh;
    width: 100%;
    max-width: 100% !important;
  }
  ._modalHeader_14k87_479 { padding: 16px 18px 14px; }
  ._modalBody_14k87_505   { padding: 16px 18px; }
  ._modalFooter_14k87_511 {
    padding: 12px 18px;
    flex-direction: column-reverse;
    gap: 8px;
  }
  ._modalFooter_14k87_511 > * { width: 100%; justify-content: center; }
}

/* ── Toast responsive ───────────────────────────────────── */
@media (max-width: 600px) {
  ._toastContainer_14k87_561 {
    right: 12px;
    left: 12px;
    bottom: 80px;
  }
  ._toast_14k87_561 { max-width: 100%; }
}

/* ── Botones: touch target mínimo 44px en móvil ─────────── */
@media (max-width: 768px) {
  ._btn_14k87_6 { min-height: 44px; }
  ._btnSm_14k87_54 { min-height: 36px; }
}

/* ── Table: scroll horizontal ───────────────────────────── */
._tableWrap_14k87_519 {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: inherit;
}

/* ── Modal como ventana flotante (arrastrable) ────────────────
   El fondo deja de oscurecerse y de capturar el puntero, así el entrenador
   sigue viendo —y usando— los ejercicios ya configurados mientras rellena el
   formulario. Solo la propia ventana recibe clics. */
._overlayFlotante_14k87_641 {
  background: transparent;
  pointer-events: none;
  animation: none;
}
._overlayFlotante_14k87_641 > * { pointer-events: auto; }

._modalFlotante_14k87_648 {
  /* Sombra más marcada: sin velo detrás, es lo que despega la ventana del
     contenido y evita que se confundan los dos planos. */
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .35);
  max-height: 82vh;
}

/* Cabecera como asa de arrastre */
._modalHeaderArrastrable_14k87_656 {
  cursor: grab;
  /* Sin esto, arrastrar selecciona el texto del título */
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
._modalHeaderArrastrable_14k87_656:active { cursor: grabbing; }

/* Puntos de agarre, para que se vea que la ventana se puede mover */
._modalHeaderArrastrable_14k87_656 ._modalTitle_14k87_486::before {
  content: '⠿';
  margin-right: 10px;
  opacity: .5;
  font-size: 15px;
  letter-spacing: -1px;
}
/* ── Contenedor principal ────────────────────────────────── */
._app_4gv3r_2 {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 100dvh;
  background: var(--color-bg);
  overflow: hidden;
}

/* ── Área principal ──────────────────────────────────────── */
._main_4gv3r_11 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

._content_4gv3r_17 {
  flex: 1;
  overflow-y: auto;
  padding: 28px;
  /* Espacio extra al fondo para la barra de gestos del sistema */
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  /* Momentum scrolling en iOS */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ── Sidebar ─────────────────────────────────────────────── */
._sidebar_4gv3r_29 {
  background: var(--color-bg2);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

._sidebar_4gv3r_29::before {
  content: '';
  position: absolute;
  top: -80px; left: -80px;
  width: 240px; height: 240px;
  background: var(--color-accent);
  opacity: .025;
  border-radius: 50%;
  pointer-events: none;
}

/* Logo */
._logo_4gv3r_50 {
  padding: 24px 20px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

._logoIcon_4gv3r_59 {
  width: 32px; height: 32px;
  background: var(--color-accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800; font-size: 14px;
  color: #0d0f14;
  flex-shrink: 0;
}

._logoText_4gv3r_70 {
  font-family: var(--font-display);
  font-weight: 700; font-size: 15px;
  color: var(--color-text);
  letter-spacing: -.3px;
}

._logoSub_4gv3r_77 {
  font-size: 10px;
  color: var(--color-muted);
}

/* Nav */
._nav_4gv3r_83 {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
}

._navSection_4gv3r_89 {
  font-size: 10px;
  color: var(--color-muted2);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 16px 10px 6px;
}

._navItem_4gv3r_98 {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-muted);
  transition: var(--transition);
  margin-bottom: 1px;
  font-size: 13px;
  text-decoration: none;
  position: relative;
}

._navItem_4gv3r_98:hover { background: var(--color-bg3); color: var(--color-text); }

._navItem_4gv3r_98._active_4gv3r_115 {
  background: var(--color-accent);
  color: #0d0f14;
  font-weight: 500;
}

/* Los iconos son PNG monocromos aplicados como máscara: heredan el color del
   enlace (gris en reposo, acento cuando está activo). */
._navIcon_4gv3r_123 {
  font-size: 15px;
  width: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

._navBadge_4gv3r_132 {
  margin-left: auto;
  background: var(--color-danger);
  color: #fff;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 20px;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
}

._navItem_4gv3r_98._active_4gv3r_115 ._navBadge_4gv3r_132 {
  background: rgba(13,15,20,.2);
  color: #0d0f14;
}

/* Footer sidebar */
._sidebarFooter_4gv3r_150 {
  padding: 14px 16px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

._userCard_4gv3r_156 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

._userCard_4gv3r_156:hover { background: var(--color-bg3); }

._userInfo_4gv3r_169 { flex: 1; min-width: 0; }

._userName_4gv3r_171 {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._userRole_4gv3r_180 {
  font-size: 10px;
  color: var(--color-muted);
  text-transform: capitalize;
}

/* ── Topbar ──────────────────────────────────────────────── */
._topbar_4gv3r_187 {
  padding: 0 28px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  flex-shrink: 0;
}

._topbarLeft_4gv3r_198 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._topbarLeft_4gv3r_198 h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.4px;
  color: var(--color-text);
}

._topbarLeft_4gv3r_198 p {
  font-size: 11.5px;
  color: var(--color-muted);
  margin-top: 1px;
}

/* Logo gimnasio en topbar — solo móvil */
._topbarLogo_4gv3r_219 {
  display: none;
  width: 32px; height: 32px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: transparent;
  align-items: center; justify-content: center;
}
._topbarLogoImg_4gv3r_228 { width: 100%; height: 100%; object-fit: cover; }
._topbarLogoLetra_4gv3r_229 {
  font-size: 16px; font-weight: 800;
  color: #0d0f14;
  font-family: var(--font-display);
}
@media (max-width: 900px) {
  ._topbarLogo_4gv3r_219 { display: flex; }
}

._topbarRight_4gv3r_238 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._iconBtn_4gv3r_244 {
  position: relative;
  width: 36px; height: 36px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: var(--transition);
  color: var(--color-muted);
  flex-shrink: 0;
}

._iconBtn_4gv3r_244:hover { border-color: var(--color-border2); color: var(--color-text); }

._notifDot_4gv3r_260 {
  position: absolute;
  top: 7px; right: 7px;
  width: 7px; height: 7px;
  background: var(--color-danger);
  border-radius: 50%;
  border: 2px solid var(--color-bg);
}

/* ── Panel de notificaciones ────────────────────────────── */
._notifWrapper_4gv3r_270 { position: relative; }

._notifPanel_4gv3r_272 {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: 480px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.25);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: _notifFadeIn_4gv3r_1 .18s ease-out;
}
@keyframes _notifFadeIn_4gv3r_1 {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

._notifHeader_4gv3r_294 {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
._notifTitle_4gv3r_300 {
  font-family: var(--font-display);
  font-weight: 700; font-size: 15px;
  color: var(--color-text);
  display: flex; align-items: center; gap: 8px;
}
._notifBadge_4gv3r_306 {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--color-danger);
  color: #fff;
  font-size: 11px; font-weight: 700;
  border-radius: 10px;
}
._notifMarkAll_4gv3r_314 {
  background: none; border: none;
  color: var(--color-accent);
  font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 4px 0;
  transition: opacity .15s;
}
._notifMarkAll_4gv3r_314:hover { opacity: .75; }

._notifList_4gv3r_323 {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}
._notifList_4gv3r_323::-webkit-scrollbar { width: 6px; }
._notifList_4gv3r_323::-webkit-scrollbar-thumb { background: var(--color-border2); border-radius: 3px; }
._notifList_4gv3r_323::-webkit-scrollbar-track { background: transparent; }

._notifEmpty_4gv3r_332 {
  padding: 36px 16px;
  text-align: center;
  color: var(--color-muted);
  font-size: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
._notifEmptyIcon_4gv3r_339 { display: flex; justify-content: center; opacity: .5; }

._notifItem_4gv3r_341 {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  padding: 12px 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  margin-bottom: 2px;
  align-items: flex-start;
  transition: background .15s, border-color .15s;
}
._notifItem_4gv3r_341 + ._notifItem_4gv3r_341 { border-top: 1px solid var(--color-border); border-radius: 0; margin-bottom: 0; }
._notifItem_4gv3r_341:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
._notifItem_4gv3r_341:last-child  { border-radius: 0 0 var(--radius-md) var(--radius-md); }

._notifItemClickable_4gv3r_356 { cursor: pointer; }
._notifItemClickable_4gv3r_356:hover { background: var(--color-bg3); }
._notifItemClickable_4gv3r_356:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

._notifItemUnread_4gv3r_360 {
  background: rgba(var(--color-accent-rgb), .05);
}
._notifItemUnread_4gv3r_360:hover { background: rgba(var(--color-accent-rgb), .09); }

._notifItemIcon_4gv3r_365 {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg3);
  border-radius: 50%;
  color: var(--color-accent);
  flex-shrink: 0;
}

._notifItemBody_4gv3r_374 {
  min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}

._notifItemTitle_4gv3r_379 {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: break-word;
}
._notifItemTitleUnread_4gv3r_387 { font-weight: 700; }
._notifItemLink_4gv3r_388 {
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

._notifItemCuerpo_4gv3r_395 {
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

._notifItemDate_4gv3r_407 {
  font-size: 10.5px;
  color: var(--color-muted2);
  margin-top: 2px;
}

._notifUnreadDot_4gv3r_413 {
  width: 8px; height: 8px;
  background: var(--color-accent);
  border-radius: 50%;
  margin-top: 10px;
  flex-shrink: 0;
}

/* ── Responsive móvil ─────────────────────────────────────── */
@media (max-width: 560px) {
  ._notifPanel_4gv3r_272 {
    position: fixed;
    top: 64px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 80px);
  }
}

._dateChip_4gv3r_434 {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 11.5px;
  color: var(--color-muted);
  white-space: nowrap;
}

/* ── SearchBar ───────────────────────────────────────────── */
._searchWrapper_4gv3r_445 {
  position: relative;
  width: 220px;
  flex-shrink: 0;
}

._searchInput_4gv3r_451 {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 10px;
  height: 34px;
  transition: var(--transition);
}

._searchInput_4gv3r_451:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(232, 255, 71, 0.10);
}

._searchIcon_4gv3r_468 {
  font-size: 12px;
  color: var(--color-muted);
  flex-shrink: 0;
  line-height: 1;
}

._searchField_4gv3r_475 {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 12.5px;
  color: var(--color-text);
  font-family: var(--font-body);
  min-width: 0;
}

._searchField_4gv3r_475::placeholder {
  color: var(--color-muted);
}

._searchClear_4gv3r_490 {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  transition: var(--transition);
}

._searchClear_4gv3r_490:hover { color: var(--color-text); }

._searchDropdown_4gv3r_505 {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  z-index: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

._searchEmpty_4gv3r_518 {
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--color-muted);
  text-align: center;
}

._searchResult_4gv3r_525 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}

._searchResult_4gv3r_525:last-child { border-bottom: none; }

._searchResult_4gv3r_525:hover { background: var(--color-bg3, rgba(255,255,255,.04)); }

._searchResultAvatar_4gv3r_543 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #0d0f14;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
}

._searchResultName_4gv3r_559 {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

._searchResultSub_4gv3r_566 {
  font-size: 11px;
  color: var(--color-muted);
  margin-top: 1px;
}

/* ── Hamburger (oculto en desktop) ───────────────────────── */
._hamburger_4gv3r_573 {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: var(--transition);
}

._hamburger_4gv3r_573:hover { border-color: var(--color-border2); }

._hamburger_4gv3r_573 span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--color-muted);
  border-radius: 2px;
  transition: var(--transition);
}

/* ── Overlay backdrop (móvil) ────────────────────────────── */
._overlay_4gv3r_602 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 199;
  backdrop-filter: blur(2px);
}

/* ── Page header (reutilizable dentro de pages) ──────────── */
._pageHeader_4gv3r_611 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

._pageTitle_4gv3r_620 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.5px;
  color: var(--color-text);
}

._pageSub_4gv3r_628 {
  font-size: 13px;
  color: var(--color-muted);
  margin-top: 3px;
}

/* ── Responsive ──────────────────────────────────────────── */

/* Tablet landscape: sidebar fijo visible */
@media (min-width: 769px) and (max-width: 1024px) {
  ._app_4gv3r_2 { grid-template-columns: 220px 1fr; }
}

/* Móvil: sidebar como drawer + hamburguesa */
@media (max-width: 768px) {
  ._app_4gv3r_2 {
    grid-template-columns: 1fr;
  }

  ._hamburger_4gv3r_573 {
    display: none;
  }

  ._sidebar_4gv3r_29 {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    height: 100dvh;
    width: 260px;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    /* Safe areas: notch arriba + lateral izquierda */
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
  }

  ._sidebarOpen_4gv3r_667 {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5);
  }

  /* El footer del sidebar debe dejar espacio por encima de la barra inferior (64px) */
  ._sidebarFooter_4gv3r_150 {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
    padding-top: 16px;
  }

  ._content_4gv3r_17 {
    padding: 16px;
    /* Reserva la altura de la barra inferior flotante (66px + 14px de hueco)
       + safe-area para que no tape el contenido al final del scroll. */
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  ._topbar_4gv3r_187 {
    padding: 0 12px;
    padding-top: env(safe-area-inset-top);
    height: calc(56px + env(safe-area-inset-top));
    gap: 8px;
  }

  ._topbarLeft_4gv3r_198 h1 {
    font-size: 15px;
  }

  ._topbarLeft_4gv3r_198 p {
    display: none;
  }

  ._topbarRight_4gv3r_238 {
    gap: 6px;
  }

  ._dateChip_4gv3r_434 {
    display: none;
  }

  ._topbarSearch_4gv3r_708 {
    display: none;
  }
}

/* ── Notif panel: full-width en móvil ──────────────────── */
@media (max-width: 768px) {
  ._notifPanel_4gv3r_272 {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 64px + 8px);
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 140px);
  }
}

/* ── Topbar: reducir padding en pantallas muy pequeñas ─── */
@media (max-width: 360px) {
  ._topbar_4gv3r_187 { padding: 0 8px; padding-top: env(safe-area-inset-top); }
  ._topbarLeft_4gv3r_198 h1 { font-size: 14px; }
}

/* Lupa del buscador: SVG monocromo como máscara en vez de emoji, así hereda
   el color del texto y se ve igual en cualquier plataforma. */
._searchIcon_4gv3r_468::before {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
/* ── Bottom Tab Bar (iOS/Android estilo nativo) ──────────── */
/* Fixed al fondo del viewport, siempre visible y por encima del contenido.
   El fondo se extiende hasta abajo cubriendo la safe-area inferior (sin
   franja negra). Los contenedores scrollables reservan su altura con
   padding-bottom. */
/* Barra FLOTANTE en cristal: se separa de los bordes y deja ver el
   contenido difuminado por debajo. Mantiene los enlaces por rol. */
._tabbar_d4jf6_8 {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--glass-bar);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-hi);
  /* Muy redondeada (casi píldora), como en el mockup */
  border-radius: 34px;
  padding: 6px 4px;
  height: 66px;
  min-height: 66px;
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45), var(--glass-inset);
}

/* Si el dispositivo/usuario pide menos transparencia, opaco sólido */
@media (prefers-reduced-transparency: reduce) {
  ._tabbar_d4jf6_8 {
    background: var(--color-bg2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Cada pestaña */
._tab_d4jf6_8 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 6px 4px;
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  font-family: var(--font-body);
  text-decoration: none;
  transition: color .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
._tab_d4jf6_8:active { transform: scale(.95); }

/* Pestaña activa (usa isActive de NavLink) */
._tabActive_d4jf6_62 {
  color: var(--color-accent);
}
._tabActive_d4jf6_62 ._tabIcon_d4jf6_65 {
  transform: translateY(-1px);
}

/* Icono */
._tabIconWrapper_d4jf6_70 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
}
._tabIcon_d4jf6_65 {
  font-size: 22px;
  line-height: 1;
  transition: transform .18s ease;
  /* Centra tanto emoji como los iconos PNG enmascarados */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}

/* Label */
._tabLabel_d4jf6_89 {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
._tabActive_d4jf6_62 ._tabLabel_d4jf6_89 { font-weight: 700; }

/* Badge de notificaciones */
._tabBadge_d4jf6_101 {
  position: absolute;
  top: -2px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-bg);
  line-height: 1;
}

/* Tab central elevada (QR para cliente) */
._tabCentral_d4jf6_121 {
  position: relative;
}
._tabIconCentral_d4jf6_124 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #0d0f14;
  font-size: 30px;
  /* Más elevado sobre la barra */
  margin-top: -38px;
  box-shadow: 0 8px 24px rgba(var(--color-accent-rgb), .45), 0 2px 6px rgba(0, 0, 0, .35);
  /* Anillo oscuro para despegarlo de la barra translúcida */
  border: 4px solid var(--color-bg);
  filter: none !important;
  transition: transform .18s ease;
}
._tabCentral_d4jf6_121:active ._tabIconCentral_d4jf6_124 {
  transform: scale(.92);
}
._tabCentral_d4jf6_121 ._tabLabel_d4jf6_89 {
  margin-top: 2px;
}

/* ── Visibilidad: solo mostrar en móvil ─────────────────── */
._tabbar_d4jf6_8 {
  display: none; /* oculto por defecto */
}

@media (max-width: 900px) {
  ._tabbar_d4jf6_8 {
    display: flex;
  }
}
._wrapper_1uvkm_1 {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;

  /* Fondo ambiental: sutiles halos del color del gimnasio sobre el fondo
     oscuro. Da profundidad y hace que las superficies translúcidas de las
     vistas del cliente tengan algo que dejar entrever. */
  background:
    radial-gradient(70% 34% at 88% -4%, rgba(var(--color-accent-rgb), .13) 0%, transparent 62%),
    radial-gradient(60% 30% at 6% 34%, rgba(var(--color-accent-rgb), .06) 0%, transparent 58%),
    radial-gradient(70% 34% at 96% 104%, rgba(var(--color-accent-rgb), .08) 0%, transparent 60%),
    var(--color-bg, #0d0f14);

  /* ── Tokens en modo cristal, SOLO dentro de la app del cliente ──
     Las vistas móviles ya pintan sus tarjetas con var(--color-card) /
     var(--color-border); al redefinirlos aquí, todas pasan a ser
     superficies translúcidas sobre el fondo ambiental. El panel de
     escritorio (Layout) mantiene su acabado sólido. */
  --color-card:    rgba(255, 255, 255, .065);
  --color-card2:   rgba(255, 255, 255, .10);
  --color-bg2:     rgba(255, 255, 255, .04);
  --color-bg3:     rgba(255, 255, 255, .07);
  --color-border:  rgba(255, 255, 255, .13);
  --color-border2: rgba(255, 255, 255, .22);
  --modal-bg:      rgba(24, 27, 37, .80);
}

/* Si el sistema pide menos transparencia, volvemos a superficies sólidas */
@media (prefers-reduced-transparency: reduce) {
  ._wrapper_1uvkm_1 {
    background: var(--color-bg, #0d0f14);
    --color-card:    #1e2230;
    --color-card2:   #252a3a;
    --color-bg2:     #13161e;
    --color-bg3:     #1a1e2a;
    --color-border:  #2a2f42;
    --color-border2: #3a3f55;
    --modal-bg:      #1e2230;
  }
}

._content_1uvkm_44 {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  /* top: safe-area + 64px para el botón flotante de notificaciones.
     bottom: --bottomnav-h = alto de la barra flotante + su hueco + safe-area,
     para que el contenido scrollable termine por encima de ella. */
  padding: calc(env(safe-area-inset-top, 0px) + 64px) 16px var(--bottomnav-h, 80px);
}

/* ── Modal QR ── */
._qrOverlay_1uvkm_57 {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Flota sobre el BottomTabs */
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 8px);
  padding-left: 12px;
  padding-right: 12px;
}

._qrSheet_1uvkm_73 {
  /* Panel de cristal legible sobre el velo oscuro */
  background: var(--modal-bg, #1e2230);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--color-border, #2a2f42);
  border-top-color: var(--glass-border-hi);
  border-radius: 28px;
  padding: 12px 28px 28px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.4);
  /* Animación de entrada */
  animation: _slideUp_1uvkm_1 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes _slideUp_1uvkm_1 {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

._qrSheetClosing_1uvkm_98 {
  animation: _slideDown_1uvkm_1 0.25s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
@keyframes _slideDown_1uvkm_1 {
  from { transform: translateY(0); }
  to   { transform: translateY(110%); }
}

._qrOverlayClosing_1uvkm_106 {
  animation: _fadeOut_1uvkm_1 0.25s ease forwards;
}
@keyframes _fadeOut_1uvkm_1 {
  from { opacity: 1; }
  to   { opacity: 0; }
}

._qrHandle_1uvkm_114 {
  width: 36px;
  height: 4px;
  background: var(--color-border2, #3a3f55);
  border-radius: 2px;
  margin-bottom: 16px;
}

._qrTitle_1uvkm_122 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text, #f0f2f8);
  margin: 0 0 4px;
  text-align: center;
}

._qrSub_1uvkm_130 {
  font-size: 13px;
  color: var(--color-muted, #7a7f94);
  margin: 0 0 20px;
  text-align: center;
}

._qrBox_1uvkm_137 {
  width: 220px;
  height: 220px;
  background: #fff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

._qrImg_1uvkm_148 {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

._qrLoading_1uvkm_154 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

._spinner_1uvkm_162 {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(0,0,0,0.1);
  border-top-color: var(--color-accent, #e8ff47);
  border-radius: 50%;
  animation: _spin_1uvkm_162 0.7s linear infinite;
}

@keyframes _spin_1uvkm_162 {
  to { transform: rotate(360deg); }
}

._qrError_1uvkm_175 {
  font-size: 13px;
  color: #999;
  text-align: center;
  padding: 0 16px;
}

._qrCodigo_1uvkm_182 {
  margin: 12px 0 0;
  font-size: 13px;
  font-family: monospace;
  letter-spacing: 0.12em;
  color: var(--color-muted, #7a7f94);
}

._qrNombre_1uvkm_190 {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text, #f0f2f8);
}


/* ── Botón flotante de notificaciones ── */
._notifBtn_1uvkm_199 {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 16px;
  z-index: 200;
  width: 44px;
  height: 44px;
  /* Cristal: translúcido de verdad para que se vea el fondo detrás */
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-hi);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text, #f0f2f8);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.13s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28), var(--glass-inset);
}

._notifBtn_1uvkm_199:active {
  transform: scale(0.9);
}

/* Si el sistema pide menos transparencia, fondo sólido */
@media (prefers-reduced-transparency: reduce) {
  ._notifBtn_1uvkm_199 {
    background: var(--color-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

._notifBadge_1uvkm_236 {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  background: #e8312a;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 1.5px solid var(--color-bg, #0d0f14);
  line-height: 1;
}
/* ── Overlay ── */
._overlay_124sv_2 {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Deja espacio para el BottomTabs (64px) + safe area */
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 8px);
  padding-left: 12px;
  padding-right: 12px;
}

/* ── Bottom sheet ── */
._sheet_124sv_19 {
  /* Panel de cristal legible (no usa --color-card: dentro de la app del
     cliente es translúcido y sobre el velo quedaría ilegible). */
  background: var(--modal-bg, #1e2230);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--color-border, #2a2f42);
  border-top-color: var(--glass-border-hi);
  /* Esquinas redondeadas en todos los lados ya que flota sobre el tab bar */
  border-radius: 24px;
  width: 100%;
  max-width: 480px;
  max-height: calc(85dvh - 64px - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  animation: _slideUp_124sv_1 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: 16px;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.4);
}

@keyframes _slideUp_124sv_1 {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Handle */
._handle_124sv_45 {
  width: 36px;
  height: 4px;
  background: var(--color-border2, #3a3f55);
  border-radius: 2px;
  margin: 12px auto 0;
  flex-shrink: 0;
}

/* ── Header ── */
._header_124sv_55 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-border, #2a2f42);
}

._title_124sv_64 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text, #f0f2f8);
  display: flex;
  align-items: center;
  gap: 8px;
}

._badge_124sv_73 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  background: #e8312a;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 0 5px;
}

._markAll_124sv_87 {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent, #e8ff47);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  -webkit-tap-highlight-color: transparent;
}

/* ── Lista ── */
._list_124sv_99 {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 8px 0;
}

/* Vacío */
._empty_124sv_107 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 10px;
  color: var(--color-muted, #7a7f94);
  font-size: 14px;
}
._emptyIcon_124sv_117 { display: flex; justify-content: center; opacity: .55; }

/* ── Item ── */
._item_124sv_120 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  position: relative;
  transition: background 0.13s;
  -webkit-tap-highlight-color: transparent;
}

._item_124sv_120 + ._item_124sv_120 {
  border-top: 1px solid var(--color-border, #2a2f42);
}

._unread_124sv_134 {
  background: rgba(232, 255, 71, 0.04);
}

._clickable_124sv_138 {
  cursor: pointer;
}

._clickable_124sv_138:active {
  background: var(--color-card2, #252a3a);
}

._itemIcon_124sv_146 {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glass-bg-strong, rgba(255,255,255,.10));
  color: var(--color-accent);
}

._itemBody_124sv_158 {
  flex: 1;
  min-width: 0;
}

._itemTitle_124sv_163 {
  font-size: 14px;
  color: var(--color-text, #f0f2f8);
  margin: 0 0 3px;
  line-height: 1.3;
}

._itemTitleBold_124sv_170 {
  font-weight: 600;
}

._itemCuerpo_124sv_174 {
  font-size: 12px;
  color: var(--color-muted, #7a7f94);
  margin: 0 0 4px;
  line-height: 1.4;
  /* Truncar a 2 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

._itemTime_124sv_186 {
  font-size: 11px;
  color: var(--color-muted2, #555a70);
  margin: 0;
}

/* Punto no leído */
._dot_124sv_193 {
  width: 8px;
  height: 8px;
  background: var(--color-accent, #e8ff47);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

/* Chevron para items con ruta */
._chevron_124sv_203 {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-muted, #7a7f94);
  margin-top: 3px;
}
/* ─────────────────────────────────────────────────────────
   AUTH — Login / Registro rediseñado
   ───────────────────────────────────────────────────────── */
._wrapper_10t7b_4 {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
  overflow-x: hidden;
}

/* En móvil: SOLO el formulario a pantalla completa. El hero de marketing se
   oculta — antes iba encima y había que hacer scroll para llegar a las
   credenciales; en algunos Android el scroll fallaba y dejaba el login
   inaccesible. */
@media (max-width: 900px) {
  ._wrapper_10t7b_4 {
    grid-template-columns: 1fr;
    overflow-y: auto;
    align-content: start;
    background:
      radial-gradient(ellipse 95% 45% at 88% -8%,  rgba(var(--color-accent-rgb), .17) 0%, transparent 62%),
      radial-gradient(ellipse 85% 40% at 8% 108%,  rgba(var(--color-accent-rgb), .11) 0%, transparent 58%),
      var(--color-bg);
  }
  ._wrapper_10t7b_4 ._panel_10t7b_27 { display: none; }
  ._wrapper_10t7b_4 ._formSide_10t7b_28 {
    min-height: 100dvh;
    align-items: center;
    padding: max(24px, env(safe-area-inset-top, 24px)) 22px calc(28px + env(safe-area-inset-bottom, 0px));
  }
  /* Sin "tarjeta" flotante: el formulario vive directamente sobre el fondo,
     como una pantalla nativa (los inputs ya aportan sus propias superficies) */
  ._wrapper_10t7b_4 ._formBox_10t7b_35 { background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0 2px; }
  ._wrapper_10t7b_4 ._formLogoMobile_10t7b_36 { margin-bottom: 30px; }
  ._wrapper_10t7b_4 ._formLogoMobile_10t7b_36 ._logoIcon_10t7b_37 { width: 58px; height: 58px; font-size: 24px; border-radius: 16px; }
  ._wrapper_10t7b_4 ._formLogoMobile_10t7b_36 ._logoText_10t7b_38 { font-size: 22px; }
}

/* App nativa (Capacitor): mismas reglas SIEMPRE, aunque el WebView calcule un
   viewport ancho de escritorio y las media queries no apliquen (fix Android:
   "vista de PC ampliada" sin poder llegar al formulario). */
._wrapperNative_10t7b_44 {
  grid-template-columns: 1fr !important;
  overflow-y: auto;
  align-content: start;
  background:
    radial-gradient(ellipse 95% 45% at 88% -8%,  rgba(var(--color-accent-rgb), .17) 0%, transparent 62%),
    radial-gradient(ellipse 85% 40% at 8% 108%,  rgba(var(--color-accent-rgb), .11) 0%, transparent 58%),
    var(--color-bg) !important;
}
._wrapperNative_10t7b_44 ._panel_10t7b_27 { display: none !important; }
._wrapperNative_10t7b_44 ._formLogoMobile_10t7b_36 { display: block !important; margin-bottom: 30px; }
._wrapperNative_10t7b_44 ._formLogoMobile_10t7b_36 ._logoIcon_10t7b_37 { width: 58px; height: 58px; font-size: 24px; border-radius: 16px; }
._wrapperNative_10t7b_44 ._formLogoMobile_10t7b_36 ._logoText_10t7b_38 { font-size: 22px; }
._wrapperNative_10t7b_44 ._formSide_10t7b_28 {
  min-height: 100dvh;
  align-items: center;
  padding: max(24px, env(safe-area-inset-top, 24px)) 22px calc(28px + env(safe-area-inset-bottom, 0px));
}
._wrapperNative_10t7b_44 ._formBox_10t7b_35 {
  max-width: 440px; margin: 0 auto;
  background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0 2px;
}

/* ── Panel izquierdo — HERO visual ──────────────────────── */
._panel_10t7b_27 {
  position: relative;
  background: linear-gradient(135deg, var(--color-bg2) 0%, var(--color-bg) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 56px;
  min-width: 0;
}

@media (max-width: 1100px) {
  ._panel_10t7b_27 { padding: 40px 36px; }
}

@media (max-width: 900px) {
  ._panel_10t7b_27 {
    padding: max(48px, env(safe-area-inset-top, 48px)) 24px 40px;
    align-items: flex-start;
    justify-content: flex-start;
  }
}

._panelBg_10t7b_91 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 15% 85%, rgba(var(--color-accent-rgb), .22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 15%, rgba(var(--color-accent-rgb), .10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(var(--color-accent-rgb), .05) 0%, transparent 70%);
}

/* Blobs animados que se mueven suavemente */
._panelBg_10t7b_91::before,
._panelBg_10t7b_91::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: _blobFloat_10t7b_1 18s ease-in-out infinite;
}
._panelBg_10t7b_91::before {
  width: 360px; height: 360px;
  background: rgba(var(--color-accent-rgb), .35);
  top: -80px; left: -60px;
}
._panelBg_10t7b_91::after {
  width: 280px; height: 280px;
  background: rgba(var(--color-accent-rgb), .25);
  bottom: -60px; right: -40px;
  animation-delay: -9s;
}
@keyframes _blobFloat_10t7b_1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.08); }
  66%      { transform: translate(-30px, 20px) scale(.95); }
}

/* Foto de fondo configurada por el gimnasio (ocupa todo el hero) */
._panelFoto_10t7b_128 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Tinte del color del gimnasio sobre la foto: la misma receta que .bgTint
   del inicio de la app móvil (color primario al 55% en multiply) */
._panelTinte_10t7b_139 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--color-gym, #e8631a);
  opacity: 0.55;
  mix-blend-mode: multiply;
}

/* Velo sobre la foto: oscurece lo justo para que el texto blanco y el
   amarillo del titular se lean. Más suave que antes porque el tinte en
   multiply ya aporta parte del oscurecido. */
._panelVelo_10t7b_151 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(10, 12, 16, .62) 0%, rgba(10, 12, 16, .38) 55%, rgba(10, 12, 16, .52) 100%);
}

/* Grid de puntos sutil */
._panelGrid_10t7b_160 {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
}

._panelContent_10t7b_168 {
  position: relative;
  z-index: 2;
  max-width: 600px;
  width: 100%;
  min-width: 0;
  animation: _panelFadeIn_10t7b_1 0.5s ease;
}
@keyframes _panelFadeIn_10t7b_1 {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Logo del gimnasio (dinámico) */
._logo_10t7b_37 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 48px;
}
@media (max-width: 900px) {
  ._logo_10t7b_37 { margin-bottom: 20px; }
}

._logoIcon_10t7b_37 {
  width: 48px;
  height: 48px;
  background: var(--color-accent);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: #0d0f14;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(var(--color-accent-rgb), .35);
}
._logoIcon_10t7b_37 img { width: 100%; height: 100%; object-fit: cover; }
._logoText_10t7b_38 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-text);
  letter-spacing: -0.3px;
}

/* Badge superior */
._heroBadge_10t7b_218 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(var(--color-accent-rgb), .12);
  border: 1px solid rgba(var(--color-accent-rgb), .35);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 24px;
  letter-spacing: .3px;
}
._heroBadge_10t7b_218::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), .6);
  animation: _pulse_10t7b_1 2s infinite;
}
@keyframes _pulse_10t7b_1 {
  0%   { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), .6); }
  70%  { box-shadow: 0 0 0 8px rgba(var(--color-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0); }
}

._panelTitle_10t7b_245 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: #fff;
  /* Sobre la foto del gimnasio el texto necesita sombra propia */
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
  margin: 0 0 20px;
  word-break: break-word;
  overflow-wrap: break-word;
}
._panelTitle_10t7b_245 span {
  color: var(--color-accent);
}

@media (max-width: 1100px) {
  ._panelTitle_10t7b_245 { font-size: 38px; letter-spacing: -1px; }
}
@media (max-width: 900px) {
  ._panelTitle_10t7b_245 { font-size: 34px; letter-spacing: -0.5px; }
}

._panelSub_10t7b_269 {
  font-size: 15.5px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
  line-height: 1.6;
  margin: 0 0 36px;
  max-width: 560px;
  /* Lámina oscura tras el texto, misma receta que las píldoras de features:
     sobre la foto la sombra sola no bastaba para leer cómodo */
  width: fit-content;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(20, 23, 31, .45);
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Features como píldoras con icono */
._features_10t7b_289 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 36px;
}
._features_10t7b_289 li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
  padding: 10px 14px;
  /* Un poco más de cuerpo: sobre la foto el 3% se perdía */
  background: rgba(20, 23, 31, .38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  transition: border-color .2s, transform .2s;
}
._features_10t7b_289 li:hover {
  border-color: rgba(var(--color-accent-rgb), .5);
  transform: translateY(-2px);
}
._featIcon_10t7b_317 {
  width: 26px; height: 26px;
  background: rgba(var(--color-accent-rgb), .15);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

/* Stats inferiores */
._stats_10t7b_327 {
  display: flex;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
._statItem_10t7b_333 { display: flex; flex-direction: column; gap: 2px; }
._statValue_10t7b_334 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--color-accent);
  letter-spacing: -0.5px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
._statLabel_10t7b_342 {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
  text-transform: uppercase;
  letter-spacing: .8px;
}

/* ── Lado derecho — formulario ──────────────────────────── */
._formSide_10t7b_28 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  position: relative;
  /* Los blobs difuminados no deben generar scroll */
  overflow: hidden;
}

/* Difuminados del color del gimnasio, antes en el hero. El formulario
   (.formBox) es opaco y queda por encima: el halo se ve alrededor. */
._formGlow_10t7b_364 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 85% 85%, rgba(var(--color-accent-rgb), .18) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 15% 15%, rgba(var(--color-accent-rgb), .10) 0%, transparent 60%);
}
._formGlow_10t7b_364::before,
._formGlow_10t7b_364::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: _blobFloat_10t7b_1 18s ease-in-out infinite;
}
._formGlow_10t7b_364::before {
  width: 360px; height: 360px;
  background: rgba(var(--color-accent-rgb), .30);
  top: -80px; right: -60px;
}
._formGlow_10t7b_364::after {
  width: 280px; height: 280px;
  background: rgba(var(--color-accent-rgb), .22);
  bottom: -60px; left: -40px;
  animation-delay: -9s;
}

@media (prefers-reduced-motion: reduce) {
  ._formGlow_10t7b_364::before, ._formGlow_10t7b_364::after { animation: none; }
}
@media (max-width: 900px) {
  ._formSide_10t7b_28 { padding: 32px 16px max(48px, env(safe-area-inset-bottom, 48px)); align-items: flex-start; }
}

._formBox_10t7b_35 {
  width: 100%;
  max-width: 420px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: 0 16px 48px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.15);
  transform-origin: center;
  will-change: transform, opacity;
}
@media (max-width: 560px) {
  ._formBox_10t7b_35 { padding: 28px 22px; border-radius: 14px; }
}

/* Animación flip entre login/registro */
._formFlipOut_10t7b_415 { animation: _formFlipOut_10t7b_415 .28s ease-in forwards; }
._formFlipIn_10t7b_416  { animation: _formFlipIn_10t7b_416  .28s ease-out forwards; }
@keyframes _formFlipOut_10t7b_415 {
  0%   { opacity: 1; transform: rotateY(0); }
  100% { opacity: 0; transform: rotateY(-90deg); }
}
@keyframes _formFlipIn_10t7b_416 {
  0%   { opacity: 0; transform: rotateY(90deg); }
  100% { opacity: 1; transform: rotateY(0); }
}

/* Logo compacto visible en la cabecera del formulario en móvil */
._formLogoMobile_10t7b_36 {
  display: none;
  text-align: center;
  margin-bottom: 24px;
}
._formLogoMobile_10t7b_36 ._logo_10t7b_37 { justify-content: center; }
@media (max-width: 900px) {
  ._formLogoMobile_10t7b_36 { display: block; }
}

._formHeader_10t7b_437 {
  margin-bottom: 24px;
}
._formTitle_10t7b_440 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: -0.5px;
}
._formSub_10t7b_448 {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.5;
}

/* Tabs login / registro */
._tabs_10t7b_457 {
  display: flex;
  background: var(--color-bg3);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 24px;
  position: relative;
}
._tabBtn_10t7b_465 {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
  border-radius: 8px;
  transition: color .18s;
  font-family: var(--font-body);
  position: relative;
  z-index: 2;
}
._tabBtn_10t7b_465:hover { color: var(--color-text); }
._tabBtnActive_10t7b_481 { color: #0d0f14 !important; }
._tabIndicator_10t7b_482 {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  background: var(--color-accent);
  border-radius: 8px;
  transition: transform .26s cubic-bezier(.5, 0, .2, 1);
  z-index: 1;
  box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), .4);
}
._tabIndicatorRight_10t7b_492 { transform: translateX(100%); }

/* Alert error */
._alertError_10t7b_495 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(239, 68, 68, .1);
  border: 1px solid rgba(239, 68, 68, .3);
  border-radius: 10px;
  font-size: 13px;
  color: var(--color-danger);
  margin-bottom: 18px;
}
._alertSuccess_10t7b_507 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(74, 222, 128, .1);
  border: 1px solid rgba(74, 222, 128, .3);
  border-radius: 10px;
  font-size: 13px;
  color: var(--color-success);
  margin-bottom: 18px;
}

/* Form fields */
._form_10t7b_28 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

._field_10t7b_527 { display: flex; flex-direction: column; gap: 6px; }

._label_10t7b_529 {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .2px;
}

._input_10t7b_536 {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-bg3);
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  font-family: var(--font-body);
  transition: border-color .18s, background .18s, box-shadow .18s;
  outline: none;
  box-sizing: border-box;
}
._input_10t7b_536::placeholder { color: rgba(255, 255, 255, .45); }
._input_10t7b_536:focus {
  border-color: var(--color-accent);
  background: var(--color-card2);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), .15);
}
._input_10t7b_536:disabled { opacity: .6; cursor: not-allowed; }
._inputError_10t7b_557 { border-color: var(--color-danger) !important; }

._fieldError_10t7b_559 {
  font-size: 11.5px;
  color: var(--color-danger);
  margin-top: 2px;
}

._fieldRow_10t7b_565 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) { ._fieldRow_10t7b_565 { grid-template-columns: 1fr; } }

/* Botón principal */
._btnPrimary_10t7b_573 {
  width: 100%;
  padding: 13px 16px;
  background: var(--color-accent);
  color: #0d0f14;
  border: none;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .14s, box-shadow .14s, opacity .14s;
  margin-top: 8px;
  box-shadow: 0 4px 14px rgba(var(--color-accent-rgb), .3);
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._btnPrimary_10t7b_573:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--color-accent-rgb), .45);
}
._btnPrimary_10t7b_573:active:not(:disabled) { transform: translateY(0); }
._btnPrimary_10t7b_573:disabled { opacity: .55; cursor: not-allowed; }

/* Spinner dentro del botón */
._btnSpinner_10t7b_601 {
  width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,.25);
  border-top-color: #0d0f14;
  border-radius: 50%;
  animation: _spin_10t7b_1 .7s linear infinite;
}
@keyframes _spin_10t7b_1 { to { transform: rotate(360deg); } }

/* Enlace de acción secundaria */
._linkRow_10t7b_611 {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--color-muted);
}
._linkBtn_10t7b_617 {
  background: none;
  border: none;
  color: var(--color-accent);
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  font-family: var(--font-body);
  transition: opacity .15s;
}
._linkBtn_10t7b_617:hover { opacity: .75; }

/* Divider "o" */
._divider_10t7b_631 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  color: var(--color-muted2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
._divider_10t7b_631::before,
._divider_10t7b_631::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* Footer */
._footer_10t7b_650 {
  margin-top: 24px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
  text-align: center;
  line-height: 1.5;
}

/* ── Icono del aviso ──────────────────────────────────────────
   El símbolo lo pone el propio estilo con un PNG monocromo usado como
   máscara (hereda el color del aviso), en lugar de ir escrito como emoji
   dentro de cada mensaje. Así el texto queda limpio y el icono es
   consistente en toda la app. */
._alertDanger_10t7b_664::before,
._alertSuccess_10t7b_507::before,
._alertInfo_10t7b_666::before,
._alertWarning_10t7b_667::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
._alertDanger_10t7b_664::before {
  mask-image: url('../icons/circulo-marca-x.png');
  -webkit-mask-image: url('../icons/circulo-marca-x.png');
}
._alertSuccess_10t7b_507::before {
  mask-image: url('../icons/progreso-completo.png');
  -webkit-mask-image: url('../icons/progreso-completo.png');
}
._alertInfo_10t7b_666::before {
  mask-image: url('../icons/megafono.png');
  -webkit-mask-image: url('../icons/megafono.png');
}
._alertWarning_10t7b_667::before {
  mask-image: url('../icons/exclamacion.png');
  -webkit-mask-image: url('../icons/exclamacion.png');
}
/* ── Page shell ──────────────────────────────────────────── */
._page_nepd5_2 { display: flex; flex-direction: column; gap: 24px; }

/* ── Page header ─────────────────────────────────────────── */
._header_nepd5_5 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
._headerLeft_nepd5_12 {}
._title_nepd5_13 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.5px;
  color: var(--color-text);
}
._sub_nepd5_20 {
  font-size: 13px;
  color: var(--color-muted);
  margin-top: 3px;
}
._actions_nepd5_25 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── KPI grid ────────────────────────────────────────────── */
._kpiGrid_nepd5_28 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
@media (max-width: 768px) { ._kpiGrid_nepd5_28 { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 320px)  { ._kpiGrid_nepd5_28 { grid-template-columns: 1fr; } }
._kpiCard_nepd5_35 {
  background: linear-gradient(155deg, var(--color-card), var(--color-card2));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
._kpiCard_nepd5_35:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  border-color: var(--color-border2);
}
/* Icono en círculo tintado con el color de acento (sigue el tema configurado) */
._kpiIconBadge_nepd5_52 {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  background: rgba(var(--color-accent-rgb), .14);
  border: 1px solid rgba(var(--color-accent-rgb), .25);
  color: var(--color-accent);
  margin-bottom: 4px;
}

/* Texto con icono a la izquierda: alinea el PNG-máscara con la línea base
   del texto sin recurrir a emoji. */
._inlineIcon_nepd5_69 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
._kpiLabel_nepd5_74 {
  font-size: 11px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 500;
}
._kpiValue_nepd5_81 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}
._kpiSub_nepd5_88 { font-size: 11.5px; color: var(--color-muted); }
._kpiIcon_nepd5_52 {
  font-size: 22px;
  margin-bottom: 2px;
}

/* ── Filters bar ─────────────────────────────────────────── */
._filters_nepd5_95 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 560px) {
  ._filters_nepd5_95 { flex-direction: column; align-items: stretch; gap: 8px; }
  ._filterSelect_nepd5_103 { width: 100%; }
}
._searchWrap_nepd5_105 {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}
@media (max-width: 560px) { ._searchWrap_nepd5_105 { min-width: 0; max-width: 100%; } }
._searchIcon_nepd5_112 {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
  font-size: 14px;
  pointer-events: none;
}
._searchInput_nepd5_120 {
  width: 100%;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 9px 13px 9px 34px;
  font-size: 13.5px;
  color: var(--color-text);
  outline: none;
  transition: var(--transition);
  font-family: var(--font-body);
}
._searchInput_nepd5_120::placeholder { color: var(--color-muted2); }
._searchInput_nepd5_120:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(232,255,71,.08); }

/* Dentro de la app del cliente: buscador en píldora de cristal (mockup) */
.app-cliente ._searchInput_nepd5_120 {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  border-radius: var(--radius-pill);
  padding: 12px 18px 12px 40px;
  font-size: 14.5px;
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
}
.app-cliente ._searchIcon_nepd5_112 { left: 15px; }
.app-cliente ._searchInput_nepd5_120:focus {
  background: var(--glass-bg-strong);
  border-color: var(--color-accent);
}

._filterSelect_nepd5_103 {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 9px 32px 9px 12px;
  font-size: 13px;
  color: var(--color-text);
  outline: none;
  cursor: pointer;
  font-family: var(--font-body);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%237a7f94' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
._filterSelect_nepd5_103:focus { border-color: var(--color-accent); }

/* ── Card con tabla ──────────────────────────────────────── */
._tableCard_nepd5_169 {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ── Pagination ──────────────────────────────────────────── */
._pagination_nepd5_177 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-top: 1px solid var(--color-border);
  font-size: 12.5px;
  color: var(--color-muted);
}
._paginationBtns_nepd5_186 { display: flex; gap: 6px; }
._pageBtn_nepd5_187 {
  width: 30px; height: 30px;
  background: var(--color-bg3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
._pageBtn_nepd5_187:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
._pageBtn_nepd5_187:disabled { opacity: .4; cursor: not-allowed; }
._pageBtnActive_nepd5_200 { background: var(--color-accent); border-color: var(--color-accent); color: #0d0f14; }

/* Paginación en la app del cliente: círculos de cristal */
.app-cliente ._pageBtn_nepd5_187 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--glass-bg);
  border-color: var(--glass-border);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  font-size: 13px;
  font-weight: 600;
}
.app-cliente ._pageBtnActive_nepd5_200 {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #0d0f14;
}

/* ── Detalle / ficha ─────────────────────────────────────── */
._detailGrid_nepd5_221 {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) { ._detailGrid_nepd5_221 { grid-template-columns: 1fr; } }

._detailCard_nepd5_229 {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
._detailCardHeader_nepd5_235 {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 14px;
}
._detailCardBody_nepd5_242 { padding: 10px 14px; }

/* Cabecera de sección dentro de una card (reemplaza inline styles) */
._cardSectionHeader_nepd5_245 {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

._infoRow_nepd5_255 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
}
._infoRow_nepd5_255:last-child { border-bottom: none; }
._infoLabel_nepd5_264 { font-size: 12px; color: var(--color-muted); flex-shrink: 0; }
._infoValue_nepd5_265 { font-size: 13px; color: var(--color-text); text-align: right; }

/* ── Tabs ────────────────────────────────────────────────── */
._tabs_nepd5_268 {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
}
._tab_nepd5_169 {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--color-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
  background: none;
  border-top: none; border-left: none; border-right: none;
  font-family: var(--font-body);
  white-space: nowrap;
}
._tab_nepd5_169:hover { color: var(--color-text); }
._tabActive_nepd5_287 { color: var(--color-accent); border-bottom-color: var(--color-accent); font-weight: 500; }

/* ── Form layout ─────────────────────────────────────────── */
._form_nepd5_290 { display: flex; flex-direction: column; gap: 18px; }

/* Grid principal 2 columnas (crear/editar pages) */
._twoColGrid_nepd5_293 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) { ._twoColGrid_nepd5_293 { grid-template-columns: 1fr; gap: 16px; } }

/* Grid interior de campos (2 inputs en fila) */
._formGrid_nepd5_302 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) { ._formGrid_nepd5_302 { grid-template-columns: 1fr; } }
._formGrid3_nepd5_308 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 840px) { ._formGrid3_nepd5_308 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { ._formGrid3_nepd5_308 { grid-template-columns: 1fr; } }

._formSection_nepd5_316 {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
._formSectionTitle_nepd5_325 {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 4px;
}
._formActions_nepd5_333 {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 8px;
}

/* ── Empty state ─────────────────────────────────────────── */
._empty_nepd5_341 {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-muted);
}
._emptyIcon_nepd5_346 { font-size: 40px; margin-bottom: 12px; }
._emptyTitle_nepd5_347 { font-size: 16px; color: var(--color-text); margin-bottom: 6px; }
._emptyText_nepd5_348  { font-size: 13px; }

/* ── Alert inline ────────────────────────────────────────── */
._alert_nepd5_351 {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  border: 1px solid transparent;
}
._alertDanger_nepd5_358  { background: rgba(255,107,107,.08); border-color: rgba(255,107,107,.2); color: var(--color-danger); }
._alertSuccess_nepd5_359 { background: rgba(74,222,128,.08);  border-color: rgba(74,222,128,.2);  color: var(--color-success); }
._alertInfo_nepd5_360    { background: rgba(71,200,255,.08);  border-color: rgba(71,200,255,.2);  color: var(--color-info); }
._alertWarning_nepd5_361 { background: rgba(251,146,60,.08);  border-color: rgba(251,146,60,.2);  color: var(--color-warning); }

/* ── Acceso card (Control accesos) ───────────────────────── */
._accessGrid_nepd5_364 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { ._accessGrid_nepd5_364 { grid-template-columns: 1fr; } }

._accessItem_nepd5_367 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--color-bg3);
  border: 1px solid var(--color-border);
}

._accessBullet_nepd5_377 {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Chart wrapper ───────────────────────────────────────── */
._chartWrap_nepd5_384 {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
._chartTitle_nepd5_390 {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 16px;
}

/* ── Dashboard responsive grids ─────────────────────────── */
._dashRow2_nepd5_398 {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
._dashRow3_nepd5_404 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
._dashRow4_nepd5_410 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) {
  ._dashRow2_nepd5_398, ._dashRow3_nepd5_404, ._dashRow4_nepd5_410 { grid-template-columns: 1fr; }
  ._kpiCard_nepd5_35 { padding: 12px 14px; gap: 4px; }
  ._kpiValue_nepd5_81 { font-size: 20px !important; }
  ._kpiIconBadge_nepd5_52 { width: 32px; height: 32px; font-size: 16px; border-radius: 8px; margin-bottom: 2px; }
  ._kpiLabel_nepd5_74 { font-size: 10px; letter-spacing: .5px; }
  ._kpiSub_nepd5_88 { font-size: 10.5px; }
}

/* ── Table scroll wrapper (mobile) ──────────────────────── */
._tableScroll_nepd5_425 { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Responsive show/hide ───────────────────────────────── */
@media (min-width: 769px) { ._mobileOnly_nepd5_428  { display: none !important; } }
@media (max-width: 768px) { ._desktopOnly_nepd5_429 { display: none !important; } }

/* ── Mobile card list ───────────────────────────────────── */
._mobileCardList_nepd5_432 { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
._mobileCard_nepd5_432 {
  background: var(--color-bg3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 13px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: var(--transition);
}
._mobileCard_nepd5_432:active { border-color: var(--color-accent); }
._mobileCardTop_nepd5_445    { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
._mobileCardInfo_nepd5_446   { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; overflow: hidden; }
._mobileCardText_nepd5_447   { min-width: 0; overflow: hidden; flex: 1; }
._mobileCardBadges_nepd5_448 { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
._mobileCardName_nepd5_449   { font-weight: 600; font-size: 14px; color: var(--color-text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
._mobileCardSub_nepd5_450    { font-size: 11.5px; color: var(--color-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
._mobileCardAmount_nepd5_451 { font-family: var(--font-display); font-size: 18px; font-weight: 700; flex-shrink: 0; }
._mobileCardRow_nepd5_452    { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
._mobileCardMeta_nepd5_453   { font-size: 11.5px; color: var(--color-muted); }
._mobileCardActions_nepd5_454{ display: flex; gap: 8px; margin-top: 2px; }

/* ── Header action link (ocultar texto en móvil) ─────────── */
._headerLink_nepd5_457 {
  font-size: 13px;
  color: var(--color-muted);
  text-decoration: none;
  padding: 8px 14px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
._headerLinkText_nepd5_470 {}
@media (max-width: 600px) {
  ._headerLinkText_nepd5_470 { display: none; }
  ._headerLink_nepd5_457 { padding: 8px 10px; }
}

/* ── Perfil layout ──────────────────────────────────────── */
._perfilGrid_nepd5_477 {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 768px) {
  ._perfilGrid_nepd5_477 { grid-template-columns: 1fr; }
}
._perfilAvatar_nepd5_486 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
._perfilAvatarInfo_nepd5_492 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

/* ── Tienda layout ──────────────────────────────────────── */
._tiendaGrid_nepd5_501 { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
@media (max-width: 768px) { ._tiendaGrid_nepd5_501 { grid-template-columns: 1fr; } }
._stickyCart_nepd5_503 { position: sticky; top: 20px; }
@media (max-width: 768px) { ._stickyCart_nepd5_503 { position: static; } }

/* ── Tabs: scroll horizontal en móvil ───────────────────── */
._tabs_nepd5_268 {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
._tabs_nepd5_268::-webkit-scrollbar { display: none; }
._tab_nepd5_169 { flex-shrink: 0; }

/* ── Paginación responsive ──────────────────────────────── */
@media (max-width: 560px) {
  ._pagination_nepd5_177 {
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
  }
}

/* ── Form actions: botones full-width en móvil ──────────── */
@media (max-width: 560px) {
  ._formActions_nepd5_333 {
    flex-direction: column-reverse;
  }
  ._formActions_nepd5_333 > * {
    width: 100%;
    justify-content: center;
  }
}

/* ── Header actions: wrap en móvil ──────────────────────── */
@media (max-width: 560px) {
  ._header_nepd5_5 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  ._actions_nepd5_25 {
    width: 100%;
  }
  ._actions_nepd5_25 > * {
    flex: 1;
    justify-content: center;
  }
}

/* ── KPI value tamaño adaptativo ────────────────────────── */
@media (max-width: 360px) {
  ._kpiValue_nepd5_81 { font-size: 18px !important; }
  ._kpiCard_nepd5_35  { padding: 12px 10px; }
}

/* ── Selector de periodo scrollable en móvil ────────────── */
._periodScroll_nepd5_560 {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-bottom: 20px;
}
._periodScroll_nepd5_560::-webkit-scrollbar { display: none; }
._periodBtn_nepd5_570 {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--color-border);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  background: var(--color-card);
  color: var(--color-muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
._periodBtn_nepd5_570:hover { border-color: var(--color-accent); color: var(--color-text); }
._periodBtnActive_nepd5_585 {
  background: var(--color-accent);
  color: #0d0f14;
  border-color: var(--color-accent);
  font-weight: 700;
}

/* ── DetailCard header en móvil ─────────────────────────── */
@media (max-width: 560px) {
  ._detailCardHeader_nepd5_235 { flex-wrap: wrap; gap: 10px; }
  ._detailCardBody_nepd5_242   { padding: 14px; }
}

/* ── Info rows: evitar overflow de texto largo ──────────── */
._infoValue_nepd5_265 { word-break: break-word; overflow-wrap: break-word; }

/* ── tableCard auto scroll en móvil ────────────────────── */
/* Any direct table inside a tableCard gets horizontal scroll */
@media (max-width: 768px) {
  ._tableCard_nepd5_169 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── tabContent: sin overflow-hidden para que tablas hagan scroll ── */
._tabContent_nepd5_611 { display: flex; flex-direction: column; gap: 16px; }

/* ── Modal / form grids de 3 columnas fijas → auto ──────── */
@media (max-width: 560px) {
  ._formGrid3_nepd5_308 { grid-template-columns: 1fr !important; }
}

/* ── Detail card tab buttons en móvil ───────────────────── */
@media (max-width: 560px) {
  ._tabs_nepd5_268 {
    gap: 0;
  }
  ._tab_nepd5_169 {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* ── Noticia bottom sheet ── */
._noticiaOverlay_nepd5_630 {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

._noticiaSheet_nepd5_642 {
  /* Panel de cristal legible: --modal-bg es sólido en escritorio y
     translúcido dentro de la app del cliente. */
  background: var(--modal-bg, #13161f);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border-top: 1px solid var(--glass-border-hi);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 600px;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  /* padding-bottom reserva la barra inferior flotante para que el último
     comentario no quede tapado. */
  padding: 0 0 calc(var(--bottomnav-h, 80px) + 16px);
  animation: _slideUp_nepd5_1 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -4px 40px rgba(0,0,0,0.5);
}

@keyframes _slideUp_nepd5_1 {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

._noticiaHandle_nepd5_669 {
  width: 36px;
  height: 4px;
  background: var(--color-border2, #3a3f55);
  border-radius: 2px;
  margin: 12px auto 16px;
  flex-shrink: 0;
}

._noticiaSheetContent_nepd5_678 {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Dieta cards móvil ── */
._dietCard_nepd5_686 {
  background: var(--color-card, #1e2230);
  border: 1px solid var(--color-border, #2a2f42);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
._dietCard_nepd5_686:active { background: var(--color-bg3); transform: scale(0.99); }

._dietCardHead_nepd5_700 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._dietCardIcon_nepd5_706 {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--color-bg3, #252a3a);
  border: 1px solid var(--color-border, #2a2f42);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

._dietCardTitleArea_nepd5_719 {
  flex: 1;
  min-width: 0;
}

._dietCardName_nepd5_724 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text, #f0f2f8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._dietCardSub_nepd5_733 {
  font-size: 12px;
  color: var(--color-muted, #7a7f94);
  margin-top: 2px;
}

._dietCardKcal_nepd5_739 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

._dietKcalNum_nepd5_746 {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-accent, #e8ff47);
  line-height: 1;
}

._dietKcalLabel_nepd5_753 {
  font-size: 11px;
  color: var(--color-muted, #7a7f94);
  font-weight: 500;
}

/* Barra de macros */
._dietMacroBar_nepd5_760 {
  display: flex;
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  gap: 2px;
}
._dietBarP_nepd5_767 { background: #3b82f6; border-radius: 4px; transition: width 0.4s; }
._dietBarC_nepd5_768 { background: #f59e0b; border-radius: 4px; transition: width 0.4s; }
._dietBarG_nepd5_769 { background: #ef4444; border-radius: 4px; transition: width 0.4s; }

._dietMacroRow_nepd5_771 {
  display: flex;
  gap: 10px;
}

._dietMacroP_nepd5_776, ._dietMacroC_nepd5_776, ._dietMacroG_nepd5_776 {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex: 1;
  background: var(--color-bg3, #252a3a);
  border-radius: 8px;
  padding: 6px 4px;
}
._dietMacroP_nepd5_776 b, ._dietMacroC_nepd5_776 b, ._dietMacroG_nepd5_776 b { font-size: 14px; font-weight: 700; }
._dietMacroP_nepd5_776 { color: #3b82f6; }
._dietMacroC_nepd5_776 { color: #f59e0b; }
._dietMacroG_nepd5_776 { color: #ef4444; }

/* Footer */
._dietCardFoot_nepd5_793 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid var(--color-border, #2a2f42);
}

._dietCardClientes_nepd5_801 {
  font-size: 12px;
  color: var(--color-muted, #7a7f94);
}

._dietCardArrow_nepd5_806 {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent, #e8ff47);
}

/* ── DetalleEmpleado grid responsive ── */
._detailGrid_nepd5_221 {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}

._qrGrid_nepd5_820 {
  padding: 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 768px) {
  ._detailGrid_nepd5_221 {
    grid-template-columns: 1fr;
  }
  ._qrGrid_nepd5_820 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ── Icono del aviso ──────────────────────────────────────────
   El símbolo lo pone el propio estilo con un PNG monocromo usado como
   máscara (hereda el color del aviso), en lugar de ir escrito como emoji
   dentro de cada mensaje. Así el texto queda limpio y el icono es
   consistente en toda la app. */
._alertDanger_nepd5_358::before,
._alertSuccess_nepd5_359::before,
._alertInfo_nepd5_360::before,
._alertWarning_nepd5_361::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
._alertDanger_nepd5_358::before {
  mask-image: url('../icons/circulo-marca-x.png');
  -webkit-mask-image: url('../icons/circulo-marca-x.png');
}
._alertSuccess_nepd5_359::before {
  mask-image: url('../icons/progreso-completo.png');
  -webkit-mask-image: url('../icons/progreso-completo.png');
}
._alertInfo_nepd5_360::before {
  mask-image: url('../icons/megafono.png');
  -webkit-mask-image: url('../icons/megafono.png');
}
._alertWarning_nepd5_361::before {
  mask-image: url('../icons/exclamacion.png');
  -webkit-mask-image: url('../icons/exclamacion.png');
}

/* Lupa del buscador: SVG monocromo como máscara en vez de emoji, así hereda
   el color del texto y se ve igual en cualquier plataforma. */
._searchIcon_nepd5_112::before {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
._root_1wg43_1 {
  padding: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Header ── */
._header_1wg43_9 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 0;
}
._saludoSub_1wg43_15    { font-size: 13px; color: var(--color-muted, #7a7f94); margin-bottom: 2px; }
._saludoNombre_1wg43_16 { font-size: 24px; font-weight: 800; color: var(--color-text, #f0f2f8); line-height: 1.1; }
._saludoRol_1wg43_17    { font-size: 12px; color: var(--color-accent, #e8ff47); margin-top: 4px; font-weight: 600; letter-spacing: 0.04em; }

/* ── KPI principal + columna ── */
._kpiRow_1wg43_20 {
  display: flex;
  gap: 12px;
  padding: 0 16px;
}

._kpiMain_1wg43_26 {
  flex: 1.2;
  background: var(--color-accent, #e8ff47);
  border-radius: 20px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  overflow: hidden;
}
._kpiMain_1wg43_26::after {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  background: rgba(0,0,0,0.07);
  border-radius: 50%;
}
._kpiMainIcon_1wg43_47  { display: flex; margin-bottom: 6px; color: #0d0f14; }
._kpiMainNum_1wg43_48   { font-size: 42px; font-weight: 900; color: #0d0f14; line-height: 1; }
._kpiMainLabel_1wg43_49 { font-size: 13px; font-weight: 600; color: rgba(0,0,0,0.55); margin-top: 4px; }
._kpiAlert_1wg43_50 {
  margin-top: 8px;
  background: rgba(0,0,0,0.12);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #0d0f14;
  width: fit-content;
}

._kpiCol_1wg43_61 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-card, #1e2230);
  border: 1px solid var(--color-border, #2a2f42);
  border-radius: 20px;
  overflow: hidden;
}

._kpiSmall_1wg43_72 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--color-border, #2a2f42);
}
._kpiSmallIcon_1wg43_79  { display: flex; flex-shrink: 0; color: var(--color-accent); }
._kpiSmallNum_1wg43_80   { font-size: 20px; font-weight: 800; color: var(--color-text, #f0f2f8); line-height: 1; }
._kpiSmallLabel_1wg43_81 { font-size: 11px; color: var(--color-muted, #7a7f94); margin-top: 1px; }

/* ── Alertas ── */
._alertas_1wg43_84 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px;
}
._alertItem_1wg43_90 {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--color-text, #f0f2f8);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
._alertItem_1wg43_90 b  { color: #ef4444; }
._alertArrow_1wg43_104   { margin-left: auto; color: #ef4444; font-weight: 700; }

/* ── Cards ── */
._card_1wg43_107 {
  margin: 0 16px;
  background: var(--color-card, #1e2230);
  border: 1px solid var(--color-border, #2a2f42);
  border-radius: 20px;
  padding: 18px 16px 8px;
}
._cardTitle_1wg43_114 {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text, #f0f2f8);
  margin-bottom: 14px;
}

/* ── Top clientes ── */
._topList_1wg43_122 { display: flex; flex-direction: column; gap: 12px; padding-bottom: 10px; }
._topRow_1wg43_123  { display: flex; align-items: center; gap: 10px; }
._topMedal_1wg43_124 { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
._topInfo_1wg43_125  { flex: 1; min-width: 0; }
._topNombre_1wg43_126 { font-size: 13px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
._topBarWrap_1wg43_127 { display: flex; align-items: center; gap: 8px; }
._topBarTrack_1wg43_128 { flex: 1; height: 5px; background: var(--color-bg3, #252a3a); border-radius: 3px; overflow: hidden; }
._topBarFill_1wg43_129  { height: 100%; background: var(--color-accent, #e8ff47); border-radius: 3px; transition: width 0.6s cubic-bezier(.4,0,.2,1); }
._topAccesos_1wg43_130  { font-size: 11px; font-weight: 700; color: var(--color-accent, #e8ff47); flex-shrink: 0; width: 22px; text-align: right; }

/* ── Accesos recientes ── */
._accesoList_1wg43_133 { display: flex; flex-direction: column; }
._accesoRow_1wg43_134  {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border, #2a2f42);
}
._accesoRow_1wg43_134:last-child { border-bottom: none; }
._accesoInfo_1wg43_142   { flex: 1; min-width: 0; }
._accesoNombre_1wg43_143 { font-size: 13px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
._accesoHora_1wg43_144   { font-size: 11px; color: var(--color-muted); margin-top: 1px; }
._accesoCuando_1wg43_145 { font-size: 11px; font-weight: 600; color: var(--color-muted); flex-shrink: 0; }
._accesoReciente_1wg43_146 { color: var(--color-accent, #e8ff47); }

/* ── Empty ── */
._empty_1wg43_149 { display: flex; flex-direction: column; align-items: center; padding: 48px 24px; text-align: center; gap: 8px; }
._emptyEmoji_1wg43_150 { display: flex; justify-content: center; color: var(--color-muted); opacity: .8; }
._emptyTitle_1wg43_151 { font-size: 16px; font-weight: 700; color: var(--color-text); }
._emptySub_1wg43_152   { font-size: 13px; color: var(--color-muted); line-height: 1.5; }

/* Icono de la fila de alerta (PNG monocromo, hereda color) */
._alertIcon_1wg43_155 { display: flex; align-items: center; color: var(--color-warning, #fbbf24); flex-shrink: 0; }
._wrap_14ru6_1 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._label_14ru6_7 {
  font-size: 11px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 600;
}

._row_14ru6_15 {
  display: flex;
  align-items: center;
  background: var(--color-bg3);
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .15s;
}
._row_14ru6_15:focus-within {
  border-color: var(--color-accent);
}

._btn_14ru6_28 {
  flex-shrink: 0;
  width: 38px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg2);
  border: none;
  color: var(--color-text);
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
  transition: background .12s, color .12s;
  user-select: none;
  -webkit-user-select: none;
  line-height: 1;
}
._btn_14ru6_28:hover:not(:disabled) {
  background: var(--color-accent);
  color: #0d0f14;
}
._btn_14ru6_28:disabled {
  opacity: .3;
  cursor: default;
}
._btn_14ru6_28:first-child {
  border-right: 1px solid var(--color-border);
}
._btn_14ru6_28:last-child {
  border-left: 1px solid var(--color-border);
}

._input_14ru6_61 {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  padding: 0 2px;
  height: 44px;
  -moz-appearance: textfield;
  appearance: textfield;
}
._input_14ru6_61::-webkit-outer-spin-button,
._input_14ru6_61::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
}
._page_9rguu_1 {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 40px;
}

/* Desktop: header + KPIs a todo ancho, luego dos columnas */
@media (min-width: 900px) {
  ._page_9rguu_1 {
    display: grid;
    grid-template-columns: 380px 1fr;
    grid-template-rows: auto auto auto 1fr;
    column-gap: 20px;
    row-gap: 16px;
    align-items: start;
  }
  /* Header y KPIs ocupan ambas columnas */
  ._header_9rguu_20   { grid-column: 1 / -1; }
  ._kpis_9rguu_21     { grid-column: 1 / -1; }
  ._alerta_9rguu_22   { grid-column: 1 / -1; }
  /* Manual card en columna izquierda */
  ._manualCard_9rguu_24 { grid-column: 1; grid-row: 3 / 5; align-self: start; }
  /* Panel derecho: tabs + lista */
  ._rightPanel_9rguu_26 { grid-column: 2; grid-row: 3 / 5; display: flex; flex-direction: column; gap: 12px; }
}

/* rightPanel en móvil: solo apila */
._rightPanel_9rguu_26 { display: flex; flex-direction: column; gap: 14px; }

/* Header */
._header_9rguu_20 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
._title_9rguu_38 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--color-text);
}
._sub_9rguu_44 {
  font-size: 12px;
  color: var(--color-muted);
  margin: 0;
  text-transform: capitalize;
}
._kpiRefresh_9rguu_50 {
  background: var(--color-bg3);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s;
}
._kpiRefresh_9rguu_50:hover { color: var(--color-text); border-color: var(--color-accent); }

/* KPIs */
._kpis_9rguu_21 {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 44px;
  gap: 10px;
  align-items: stretch;
}
._kpi_9rguu_21 {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
._kpiAccent_9rguu_79 { border-color: rgba(var(--color-accent-rgb), .4); background: rgba(var(--color-accent-rgb), .06); }
._kpiValue_9rguu_80 {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
  letter-spacing: -0.5px;
}
._kpiAccent_9rguu_79 ._kpiValue_9rguu_80 { color: var(--color-accent); }
._kpiLabel_9rguu_88 {
  font-size: 10px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  text-align: center;
}

/* Alerta */
._alerta_9rguu_22 {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid;
}
._alertaSuccess_9rguu_102 { border-color: rgba(74,222,128,.4); }
._alertaWarning_9rguu_103 { border-color: rgba(251,191,36,.4); }
._alertaDanger_9rguu_104  { border-color: rgba(239,68,68,.4); }

._alertaMain_9rguu_106 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
}
._alertaSuccess_9rguu_102 ._alertaMain_9rguu_106 { background: rgba(74,222,128,.1); color: var(--color-success); }
._alertaWarning_9rguu_103 ._alertaMain_9rguu_106 { background: rgba(251,191,36,.1); color: var(--color-warning); }
._alertaDanger_9rguu_104  ._alertaMain_9rguu_106 { background: rgba(239,68,68,.1);  color: var(--color-danger); }
._alertaIcon_9rguu_117 { font-size: 20px; flex-shrink: 0; }
._alertaTexto_9rguu_118 { flex: 1; }
._alertaCerrar_9rguu_119 {
  background: none; border: none; cursor: pointer;
  color: inherit; opacity: .6; font-size: 20px; padding: 0 4px;
  line-height: 1;
}
._alertaAviso_9rguu_124 {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px;
  background: var(--color-bg3);
  font-size: 13px;
  color: var(--color-text);
}
._cobrarBtn_9rguu_131 {
  background: var(--color-accent); border: none; color: #0d0f14;
  border-radius: 8px; padding: 6px 14px; cursor: pointer;
  font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}

/* Manual card */
._manualCard_9rguu_24 {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 14px;
}
._manualHeader_9rguu_144 {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
._manualTitle_9rguu_148 { font-size: 13px; font-weight: 600; color: var(--color-text); }
._cancelBtn_9rguu_149 {
  background: none; border: none; color: var(--color-muted);
  cursor: pointer; font-size: 14px; padding: 0;
}
._manualBtns_9rguu_153 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
._btnEntrada_9rguu_154 {
  padding: 12px; border: none; border-radius: 10px;
  background: rgba(74,222,128,.15); color: var(--color-success);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
._btnEntrada_9rguu_154:hover { background: rgba(74,222,128,.25); }
._btnSalida_9rguu_161 {
  padding: 12px; border: none; border-radius: 10px;
  background: var(--color-bg3); color: var(--color-muted);
  border: 1px solid var(--color-border);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
._btnSalida_9rguu_161:hover { background: var(--color-bg2); }

/* Search */
._searchWrap_9rguu_171 { position: relative; }
._searchIcon_9rguu_172 { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; }
._searchInput_9rguu_173 {
  width: 100%; box-sizing: border-box;
  padding: 11px 12px 11px 34px;
  background: var(--color-bg3);
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text);
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
._searchInput_9rguu_173:focus { border-color: var(--color-accent); }
._searchInput_9rguu_173::placeholder { color: var(--color-muted2); }

/* Resultados búsqueda */
._resultados_9rguu_188 {
  margin-top: 8px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
._resultadoItem_9rguu_194 {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-card);
}
._resultadoItem_9rguu_194:last-child { border-bottom: none; }
._resultadoInfo_9rguu_201 { flex: 1; min-width: 0; }
._resultadoNombre_9rguu_202 { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
._resultadoSocio_9rguu_203 { font-size: 11px; color: var(--color-muted); }
._resultadoAcciones_9rguu_204 { display: flex; gap: 6px; flex-shrink: 0; }
._btnEntradaSm_9rguu_205 {
  padding: 5px 10px; border: none; border-radius: 6px;
  background: var(--color-success); color: #0d0f14;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
._btnSalidaSm_9rguu_210 {
  padding: 5px 10px; border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-bg3); color: var(--color-text);
  font-size: 12px; cursor: pointer;
}

/* Tabs */
._tabs_9rguu_217 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-bg3);
  border-radius: 12px;
  padding: 4px;
}
._tab_9rguu_217 {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px;
  background: none; border: none;
  color: var(--color-muted);
  font-size: 13px; font-weight: 600;
  border-radius: 9px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
._tabActive_9rguu_234 { background: var(--color-card); color: var(--color-text); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
._tabBadge_9rguu_235 {
  background: var(--color-bg2);
  color: var(--color-muted);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}
._tabActive_9rguu_234 ._tabBadge_9rguu_235 { background: rgba(var(--color-accent-rgb), .15); color: var(--color-accent); }

/* Lista */
._lista_9rguu_246 {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
}
._vacio_9rguu_252 { padding: 32px; text-align: center; color: var(--color-muted); font-size: 13px; }
._item_9rguu_253 {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background .12s;
}
._item_9rguu_253:last-child { border-bottom: none; }
._item_9rguu_253:hover { background: var(--color-bg3); }
._itemDenegado_9rguu_262 { background: rgba(239,68,68,.04); }
._itemDot_9rguu_263 {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
._avatarDesconocido_9rguu_266 {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-bg3);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
._itemInfo_9rguu_272 { flex: 1; min-width: 0; }
._itemNombre_9rguu_273 {
  font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
._socioNum_9rguu_277 {
  margin-left: 8px; font-size: 11px;
  color: var(--color-muted); font-weight: 400;
}
._itemSub_9rguu_281 { font-size: 11px; color: var(--color-muted); margin-top: 1px; }
._itemHora_9rguu_282 { font-size: 12px; color: var(--color-muted); flex-shrink: 0; }
._salidaBtn_9rguu_283 {
  background: none; border: 1px solid var(--color-border);
  color: var(--color-muted); border-radius: 6px;
  padding: 4px 10px; cursor: pointer; font-size: 11px;
  white-space: nowrap; flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
._salidaBtn_9rguu_283:hover { border-color: var(--color-accent); color: var(--color-text); }
/* ─────────────────────────────────────────────────────────────
   Perfil del cliente (móvil) — estilo cristal del mockup
   Solo se usa cuando el rol es cliente; el perfil de escritorio
   mantiene su maquetación original.
   ───────────────────────────────────────────────────────────── */

._page_8jue7_7 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 8px;
}

._title_8jue7_14 {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--color-text);
}

/* ── Cabecera con avatar ── */
._avatarBlock_8jue7_24 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 0 2px;
}

._avatarRing_8jue7_32 {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-hi);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
  overflow: hidden;
}
._avatarRing_8jue7_32 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._avatarIniciales_8jue7_50 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--color-accent);
  letter-spacing: -.02em;
}

._nombre_8jue7_58 {
  font-size: 19px;
  font-weight: 800;
  color: var(--color-text);
  text-align: center;
  letter-spacing: -.01em;
}
._subtitulo_8jue7_65 {
  font-size: 12.5px;
  color: var(--color-muted);
  text-align: center;
}

/* ── Etiqueta de sección ── */
._eyebrow_8jue7_72 {
  margin: 4px 2px -6px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}

/* ── Tarjeta de cristal que agrupa filas ── */
._listCard_8jue7_84 {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-hi);
  border-radius: var(--radius-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  overflow: hidden;
}

/* Fila pulsable (icono + texto + chevron) */
._row_8jue7_96 {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 18px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease;
}
._listCard_8jue7_84 > ._row_8jue7_96:last-child,
._listCard_8jue7_84 > ._rowGroup_8jue7_115:last-child > ._row_8jue7_96 { border-bottom: none; }
._row_8jue7_96:active { background: var(--glass-bg-hover); }

._rowIcon_8jue7_118 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  color: var(--color-muted);
  flex-shrink: 0;
}
._rowIcon_8jue7_118 svg { width: 20px; height: 20px; }

._rowLabel_8jue7_128 { flex: 1; min-width: 0; }

._chev_8jue7_130 {
  color: var(--color-muted);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .2s ease;
}
._chevOpen_8jue7_137 { transform: rotate(90deg); color: var(--color-accent); }

/* Contenido desplegable de cada fila */
._rowBody_8jue7_140 {
  padding: 4px 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: _abrir_8jue7_1 .22s ease;
}
._listCard_8jue7_84 > ._rowGroup_8jue7_115:last-child > ._rowBody_8jue7_140 { border-bottom: none; }

@keyframes _abrir_8jue7_1 {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  ._rowBody_8jue7_140 { animation: none; }
}

/* Fila de acción al pie de un desplegable */
._rowActions_8jue7_159 {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ── Tarjeta de membresía ── */
._membCard_8jue7_166 {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-hi);
  border-radius: var(--radius-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
._membCard_8jue7_166::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 120% at 100% 0%, rgba(var(--color-accent-rgb), .14), transparent 62%);
  pointer-events: none;
}

._membTop_8jue7_186 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
._membState_8jue7_192 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
}
._membState_8jue7_192 i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  flex-shrink: 0;
}
._membWarn_8jue7_207   { color: var(--color-warning); }
._membDanger_8jue7_208 { color: var(--color-danger); }

._membDays_8jue7_210 { text-align: right; flex-shrink: 0; }
._membDays_8jue7_210 b {
  display: block;
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
._membDays_8jue7_210 small { font-size: 10.5px; color: var(--color-muted); }

._membName_8jue7_221 {
  margin: 13px 0 2px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--color-text);
}
._membMeta_8jue7_227 { margin: 0; font-size: 12px; color: var(--color-muted); }

/* ── Lista de pagos ── */
._pago_8jue7_230 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
._pago_8jue7_230:last-child { border-bottom: none; }
._pagoInfo_8jue7_238 { flex: 1; min-width: 0; }
._pagoConcepto_8jue7_239 { font-size: 14px; font-weight: 600; color: var(--color-text); }
._pagoMeta_8jue7_240 {
  font-size: 11.5px;
  color: var(--color-muted);
  margin-top: 3px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
._pagoImporte_8jue7_249 {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
._pagoFactura_8jue7_256 {
  display: block;
  margin-top: 4px;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
}
._estadoPill_8jue7_268 {
  padding: 1px 7px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 10.5px;
}

._vacio_8jue7_275 {
  font-size: 13px;
  color: var(--color-muted);
  padding: 4px 0 2px;
}

/* ── Pie: acciones de cuenta ── */
._footerActions_8jue7_282 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

/* Sin transparencia si el sistema lo pide */
@media (prefers-reduced-transparency: reduce) {
  ._listCard_8jue7_84, ._membCard_8jue7_166, ._avatarRing_8jue7_32 {
    background: var(--color-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
._page_fpkli_1 {
  padding: 28px;
  max-width: 1100px;
}

._header_fpkli_6 {
  margin-bottom: 24px;
}

._back_fpkli_10 {
  display: inline-block;
  font-size: 13px;
  color: var(--color-muted);
  text-decoration: none;
  margin-bottom: 8px;
  transition: color 0.15s;
}
._back_fpkli_10:hover { color: var(--color-text); }

._title_fpkli_20 {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 6px;
}

._sub_fpkli_27 {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
  max-width: 540px;
}

/* Alerts */
._alertSuccess_fpkli_35 {
  padding: 12px 16px;
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.3);
  border-radius: 8px;
  color: var(--color-success);
  font-size: 13px;
  margin-bottom: 16px;
}
._alertDanger_fpkli_44 {
  padding: 12px 16px;
  background: rgba(255,107,107,0.1);
  border: 1px solid rgba(255,107,107,0.3);
  border-radius: 8px;
  color: var(--color-danger);
  font-size: 13px;
  margin-bottom: 16px;
}

/* ── Layout dos columnas ── */
._layout_fpkli_55 {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 860px) {
  ._layout_fpkli_55 { grid-template-columns: 1fr; }
}

/* ── Panel ── */
._panel_fpkli_67,
._catalog_fpkli_68,
._previewSection_fpkli_69 {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px;
}

._aside_fpkli_76 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

._panelTitle_fpkli_82 {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

._counter_fpkli_94 {
  font-size: 11px;
  background: var(--color-card2);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 2px 8px;
  color: var(--color-text);
  font-weight: 600;
}

/* ── Lista de accesos activos ── */
._emptyHint_fpkli_105 {
  font-size: 13px;
  color: var(--color-muted2);
  text-align: center;
  padding: 24px 0;
  border: 2px dashed var(--color-border);
  border-radius: 10px;
}

._activeList_fpkli_114 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

._activeItem_fpkli_121 {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-card2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: grab;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  user-select: none;
}

._activeItem_fpkli_121:active {
  cursor: grabbing;
  transform: scale(1.01);
}

._activeItem_fpkli_121:hover {
  border-color: var(--color-border2);
}

._dragHandle_fpkli_143 {
  font-size: 16px;
  color: var(--color-muted2);
  cursor: grab;
  flex-shrink: 0;
}

._itemEmoji_fpkli_150 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-accent);
}

._itemInfo_fpkli_157 {
  flex: 1;
  min-width: 0;
}

._itemLabel_fpkli_162 {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

._itemRuta_fpkli_169 {
  display: block;
  font-size: 11px;
  color: var(--color-muted);
  margin-top: 1px;
}

._removeBtn_fpkli_176 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
._removeBtn_fpkli_176:hover {
  background: rgba(255,107,107,0.15);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

._saveArea_fpkli_198 {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}

/* ── Catálogo ── */
._catalogList_fpkli_206 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._catalogItem_fpkli_212 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--color-card2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
  color: var(--color-text);
  font-size: 13px;
  width: 100%;
}

._catalogItem_fpkli_212:hover:not(:disabled) {
  background: rgba(var(--color-accent-rgb), 0.08);
  border-color: rgba(var(--color-accent-rgb), 0.3);
}

._catalogItem_fpkli_212:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

._addIcon_fpkli_238 {
  margin-left: auto;
  font-size: 18px;
  font-weight: 300;
  color: var(--color-accent);
  line-height: 1;
}

._allAdded_fpkli_246 {
  font-size: 12px;
  color: var(--color-muted2);
  text-align: center;
  padding: 12px 0;
}

/* ── Preview del móvil ── */
._phone_fpkli_254 {
  display: flex;
  justify-content: center;
}

._phoneScreen_fpkli_259 {
  width: 160px;
  background: #e8631a;
  border-radius: 20px;
  padding: 16px 12px 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  border: 2px solid rgba(255,255,255,0.15);
}

._phoneHeader_fpkli_268 {
  text-align: center;
  margin-bottom: 12px;
}

._phoneLogo_fpkli_273 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  opacity: 0.9;
}

._phoneGrid_fpkli_280 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

._phoneCard_fpkli_286 {
  aspect-ratio: 1;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
}

._phoneCardEmpty_fpkli_299 {
  background: rgba(255,255,255,0.06);
  border: 1.5px dashed rgba(255,255,255,0.2);
}

._phoneEmoji_fpkli_304 {
  display: flex;
  color: var(--color-accent);
}

._phoneCardLabel_fpkli_309 {
  font-size: 7px;
  color: rgba(255,255,255,0.9);
  text-align: center;
  font-weight: 600;
  line-height: 1.2;
}

._phoneCardPlaceholder_fpkli_317 {
  font-size: 18px;
  color: rgba(255,255,255,0.25);
  font-weight: 300;
}

/* ── Icono del aviso ──────────────────────────────────────────
   El símbolo lo pone el propio estilo con un PNG monocromo usado como
   máscara (hereda el color del aviso), en lugar de ir escrito como emoji
   dentro de cada mensaje. Así el texto queda limpio y el icono es
   consistente en toda la app. */
._alertDanger_fpkli_44::before,
._alertSuccess_fpkli_35::before,
._alertInfo_fpkli_330::before,
._alertWarning_fpkli_331::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
._alertDanger_fpkli_44::before {
  mask-image: url('../icons/circulo-marca-x.png');
  -webkit-mask-image: url('../icons/circulo-marca-x.png');
}
._alertSuccess_fpkli_35::before {
  mask-image: url('../icons/progreso-completo.png');
  -webkit-mask-image: url('../icons/progreso-completo.png');
}
._alertInfo_fpkli_330::before {
  mask-image: url('../icons/megafono.png');
  -webkit-mask-image: url('../icons/megafono.png');
}
._alertWarning_fpkli_331::before {
  mask-image: url('../icons/exclamacion.png');
  -webkit-mask-image: url('../icons/exclamacion.png');
}
._wrapper_i6apq_1 {
  position: relative;
  /* Escapa el padding de ClientLayout (horizontal + top) para ser full-screen */
  margin: calc(-1 * (env(safe-area-inset-top, 0px) + 64px)) -16px 0;
  width: calc(100% + 32px);
  min-height: calc(100dvh - var(--bottomnav-h, 80px));
  display: flex;
  flex-direction: column;

  /* ── Cristal más ligero, solo en el inicio ──
     Los tokens se redefinen aquí (no en :root) para que el resto de la app
     —noticias, perfil, listados— conserve su acabado actual.
     El velo blanco es mínimo (4%), pero lo que de verdad decide si la tarjeta
     parece opaca es el DESENFOQUE: el fondo ya lleva un tinte del color del
     gimnasio al 55% en multiply y un velo oscuro que llega al 82%, así que con
     un desenfoque alto lo que queda bajo la tarjeta es un color plano y se ve
     como un bloque sólido. Con un desenfoque moderado se siguen distinguiendo
     las formas de la foto, que es lo que se lee como cristal.
     El contraste del texto no depende de la opacidad: lo sostiene la sombra de
     texto que llevan las tarjetas. */
  --glass-bg:         rgba(255, 255, 255, .015);
  --glass-bg-strong:  rgba(255, 255, 255, .05);
  --glass-bg-hover:   rgba(255, 255, 255, .11);
  --glass-border:     rgba(255, 255, 255, .11);
  --glass-border-hi:  rgba(255, 255, 255, .22);
  --glass-blur:       blur(3px) saturate(125%);
  --glass-blur-soft:  blur(2px) saturate(120%);
  --glass-shadow:     0 6px 20px rgba(0, 0, 0, .18);
}

/* Si el sistema pide menos transparencia se vuelve a una superficie sólida:
   la legibilidad manda sobre el efecto. */
@media (prefers-reduced-transparency: reduce) {
  ._wrapper_i6apq_1 {
    --glass-bg:        rgba(20, 23, 31, .92);
    --glass-bg-strong: rgba(20, 23, 31, .96);
    --glass-border:    rgba(255, 255, 255, .18);
  }
}

/* ── Capas de fondo ──
   Fijas al viewport: la foto del gimnasio queda quieta y el contenido de
   cristal se desliza por encima. */
._bg_i6apq_44 {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Logo/imagen del gym cubriendo toda la pantalla */
._bgImg_i6apq_52 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Fallback sólido si no hay imagen */
._bgColor_i6apq_62 {
  position: absolute;
  inset: 0;
  background: var(--color-gym, #e8631a);
}

/* Tinte del color del gimnasio sobre la imagen */
._bgTint_i6apq_69 {
  position: absolute;
  inset: 0;
  background: var(--color-gym, #e8631a);
  opacity: 0.55;
  mix-blend-mode: multiply;
}

/* Velo oscuro: arriba para el logo, abajo para que el cristal se lea */
._bgGradient_i6apq_78 {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.42) 0%,
    rgba(0,0,0,0.16) 26%,
    rgba(0,0,0,0.45) 62%,
    rgba(0,0,0,0.82) 100%
  );
}

/* ── Header ── */
._header_i6apq_91 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 22px 4px;
}

._gymLogo_i6apq_101 {
  height: 96px;
  width: 96px;
  object-fit: contain;
  display: block;
  background: none;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.45));
}

/* ── Saludo ── */
._greeting_i6apq_111 {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
  text-align: center;
}

._greeting_i6apq_111 strong {
  color: #fff;
  font-weight: 800;
}

/* ── Contenido desplazable ── */
._main_i6apq_126 {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* El contenedor de ClientLayout ya reserva la altura de la barra flotante */
  padding: 16px 20px 20px;
}

/* Etiqueta de sección */
._eyebrow_i6apq_138 {
  margin: 0 2px -4px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}

/* ── Tarjeta de membresía (cristal) ── */
._membCard_i6apq_150 {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-hi);
  border-radius: var(--radius-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  padding: 16px 18px;
  color: #fff;
  text-decoration: none;
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  /* El texto lleva sombra propia: es lo que sostiene el contraste ahora
     que la superficie es más transparente. text-shadow se hereda, así que
     cubre todo el contenido de la tarjeta. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .13s ease;
}
._membCard_i6apq_150:active { transform: scale(.985); }

._membTop_i6apq_175 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

._membState_i6apq_182 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
}
._membState_i6apq_182 i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  flex-shrink: 0;
}
/* Variantes de estado */
._membWarn_i6apq_199  { color: var(--color-warning); }
._membDanger_i6apq_200{ color: var(--color-danger); }

._membDays_i6apq_202 { text-align: right; flex-shrink: 0; }
._membDays_i6apq_202 b {
  display: block;
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
._membDays_i6apq_202 small {
  font-size: 10.5px;
  color: rgba(255,255,255,.66);
}

._membName_i6apq_215 {
  margin: 13px 0 2px;
  font-size: 16.5px;
  font-weight: 700;
}
._membMeta_i6apq_220 {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,.66);
}

/* ── Entreno de hoy ── */
._hoyCard_i6apq_227 {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 17px 18px;
  border-radius: var(--radius-glass);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-hi);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  color: #fff;
  font-family: var(--font-body);
  /* El texto lleva sombra propia: es lo que sostiene el contraste ahora
     que la superficie es más transparente. text-shadow se hereda, así que
     cubre todo el contenido de la tarjeta. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform .13s ease;
}
._hoyCard_i6apq_227:active { transform: scale(.985); }

/* Halo del color del gimnasio en la esquina */
._hoyCard_i6apq_227::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 120% at 100% 0%, rgba(var(--color-accent-rgb), .16), transparent 62%);
  pointer-events: none;
}

/* Cuerpo en dos columnas: info a la izquierda, vista previa a la derecha */
._hoyCuerpo_i6apq_263 {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  gap: 14px;
}
._hoyInfo_i6apq_270 { flex: 1; min-width: 0; }

/* Mini lista de ejercicios del día */
._hoyLista_i6apq_273 {
  flex-shrink: 0;
  width: 46%;
  max-width: 190px;
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 1px solid rgba(255, 255, 255, .10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
._hoyLista_i6apq_273 li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .74);
  line-height: 1.25;
}
._hoyLista_i6apq_273 li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._hoyLista_i6apq_273 li:first-child { color: #fff; font-weight: 600; }
._hoyListaMas_i6apq_300 {
  font-size: 11px;
  color: var(--color-accent) !important;
  font-weight: 700;
  padding-left: 20px;
}

/* Racha de días seguidos (días de descanso). Ocupa el mismo hueco y comparte
   el separador con la lista de ejercicios de los días de entreno. */
._hoyRacha_i6apq_309 {
  flex-shrink: 0;
  width: 46%;
  max-width: 190px;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, .10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
}
._hoyRachaIco_i6apq_322 {
  display: flex;
  color: var(--color-accent);
  margin-bottom: 2px;
}
._hoyRachaNum_i6apq_327 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
._hoyRachaTxt_i6apq_334 {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
}

/* En pantallas muy estrechas la lista y la racha pasan debajo */
@media (max-width: 380px) {
  ._hoyCuerpo_i6apq_263 { flex-direction: column; gap: 12px; }
  ._hoyLista_i6apq_273,
  ._hoyRacha_i6apq_309 {
    width: 100%;
    max-width: none;
    padding: 12px 0 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, .10);
  }
  ._hoyRacha_i6apq_309 { flex-direction: row; gap: 8px; }
  ._hoyRachaNum_i6apq_327 { font-size: 26px; }
  ._hoyListaMas_i6apq_300 { padding-left: 20px; }
}

/* Estado: ya entrenado hoy */
._hoyHecho_i6apq_359 { border-color: rgba(74, 222, 128, .45); }
._hoyHecho_i6apq_359::after {
  background: radial-gradient(60% 120% at 100% 0%, rgba(74, 222, 128, .14), transparent 62%);
}
._hoyOk_i6apq_363 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-success);
}
._hoyHecho_i6apq_359 ._hoyCta_i6apq_371 { color: var(--color-success); }

._hoyTop_i6apq_373 { display: flex; align-items: center; justify-content: space-between; }

._hoyTag_i6apq_375 {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

/* Estado "en curso": punto que late */
._hoyPulse_i6apq_384 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
}
._hoyPulse_i6apq_384 i {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: _latido_i6apq_1 1.6s ease-in-out infinite;
}
@keyframes _latido_i6apq_1 { 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@media (prefers-reduced-motion: reduce) {
  ._hoyPulse_i6apq_384 i { animation: none; }
}

._hoyName_i6apq_403 {
  margin: 11px 0 2px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
}
._hoyMeta_i6apq_409 {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.66);
}
._hoyCta_i6apq_371 {
  display: inline-block;
  margin-top: 13px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-accent);
}

._hoyDescanso_i6apq_422 ._hoyName_i6apq_403 { font-weight: 700; font-size: 18px; }

._hoySkeleton_i6apq_424 {
  height: 132px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  animation: _shimmer_i6apq_1 1.4s ease-in-out infinite;
}

/* ── Tu semana (racha) ── */
._semanaCard_i6apq_433 {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px 16px;
  border-radius: var(--radius-glass);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-hi);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  color: #fff;
  font-family: var(--font-body);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .13s ease;
}
._semanaCard_i6apq_433:active { transform: scale(.985); }

._semanaHead_i6apq_454 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
._semanaTitle_i6apq_460 { font-size: 14px; font-weight: 700; }
._semanaCount_i6apq_461 { font-size: 11.5px; color: var(--color-accent); font-weight: 700; }

._semanaDias_i6apq_463 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
._semanaDia_i6apq_463 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
._semanaDia_i6apq_463 em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.5);
}
._semanaDia_i6apq_463 i {
  font-style: normal;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-border);
  font-variant-numeric: tabular-nums;
}
/* Día entrenado */
._semanaDiaOn_i6apq_496 i {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #0d0f14;
  box-shadow: 0 3px 12px rgba(var(--color-accent-rgb), .35);
}
/* Hoy */
._semanaDiaHoy_i6apq_503 em { color: var(--color-accent); }
._semanaDiaHoy_i6apq_503 i  { border-color: rgba(var(--color-accent-rgb), .55); }

/* ── Grid de accesos directos ── */
._grid_i6apq_507 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

._card_i6apq_513 {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-hi);
  border-radius: var(--radius-glass);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  min-height: 104px;
  display: flex;
  flex-direction: column;
  /* Icono y texto centrados como un bloque, en horizontal y en vertical */
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.13s ease, background 0.18s ease;
  color: #fff;
  padding: 15px 12px;
  -webkit-tap-highlight-color: transparent;
  /* El texto lleva sombra propia: es lo que sostiene el contraste ahora
     que la superficie es más transparente. text-shadow se hereda, así que
     cubre todo el contenido de la tarjeta. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

._card_i6apq_513:active {
  transform: scale(0.95);
  background: var(--glass-bg-hover);
}

._cardIcon_i6apq_544 {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(var(--color-accent-rgb), .14);
  border: 1px solid rgba(var(--color-accent-rgb), .22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Los iconos PNG se pintan con currentColor (máscara CSS) */
  color: var(--color-accent);
}

._cardIcon_i6apq_544 svg {
  width: 22px;
  height: 22px;
  fill: var(--color-accent);
}

._cardLabel_i6apq_564 {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* ── Skeletons ── */
._cardSkeleton_i6apq_574 {
  min-height: 104px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  animation: _shimmer_i6apq_1 1.4s ease-in-out infinite;
}
._membSkeleton_i6apq_581 {
  height: 104px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  animation: _shimmer_i6apq_1 1.4s ease-in-out infinite;
}

@keyframes _shimmer_i6apq_1 {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Menos transparencia si el sistema lo pide */
@media (prefers-reduced-transparency: reduce) {
  ._membCard_i6apq_150, ._card_i6apq_513, ._hoyCard_i6apq_227, ._semanaCard_i6apq_433 {
    background: rgba(20, 23, 31, .92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ── Pantallas pequeñas ── */
@media (max-height: 730px) {
  ._gymLogo_i6apq_101 { height: 74px; width: 74px; }
  ._greeting_i6apq_111 { font-size: 17px; }
  ._header_i6apq_91 { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
  ._card_i6apq_513 { min-height: 94px; padding: 13px; }
  ._cardIcon_i6apq_544 { width: 38px; height: 38px; border-radius: 11px; }
  ._cardIcon_i6apq_544 svg { width: 20px; height: 20px; }
  ._cardLabel_i6apq_564 { font-size: 12.5px; }
}
/* ─────────────────────────────────────────────────────────────
   Calendario / Mi rutina (cliente móvil) — estilo cristal
   ───────────────────────────────────────────────────────────── */

._page_9kjd9_5 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Cabecera ── */
._header_9kjd9_12 {
  display: flex;
  align-items: center;
  gap: 12px;
}
._back_9kjd9_17 {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-hi);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .13s ease;
}
._back_9kjd9_17:active { transform: scale(.92); }

._headTxt_9kjd9_39 { flex: 1; min-width: 0; }
._titulo_9kjd9_40 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._sub_9kjd9_51 {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--color-muted);
}

/* Nombre del cliente bajo el titulo de la rutina: "esta rutina es tuya" */
._duenio_9kjd9_58 {
  margin: 3px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Banner de sesión en curso ── */
._enCurso_9kjd9_69 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--radius-glass);
  background: rgba(var(--color-accent-rgb), .10);
  border: 1px solid rgba(var(--color-accent-rgb), .45);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
}
._enCursoTxt_9kjd9_81 { min-width: 0; }
._enCursoTitle_9kjd9_82 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
}
._enCursoTitle_9kjd9_82 i {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: _latir_9kjd9_1 1.6s ease-in-out infinite;
}
@keyframes _latir_9kjd9_1 { 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion: reduce) { ._enCursoTitle_9kjd9_82 i { animation: none; } }
._enCursoSub_9kjd9_98 { font-size: 11.5px; color: var(--color-muted); margin-top: 2px; }

/* ── Chips de acciones ── */
._chips_9kjd9_101 {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
._chips_9kjd9_101::-webkit-scrollbar { display: none; }

._chip_9kjd9_101 {
  flex: 1 0 auto;
  white-space: nowrap;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-hi);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  cursor: pointer;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .16s ease;
}
._chip_9kjd9_101:active { transform: scale(.96); background: var(--glass-bg-hover); }

/* ── Barra del calendario ── */
._calHead_9kjd9_131 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
._calMes_9kjd9_137 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--color-text);
  text-transform: capitalize;
}
._calNav_9kjd9_143 { display: flex; align-items: center; gap: 6px; }
._navBtn_9kjd9_144 {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--color-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
._toggle_9kjd9_155 {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), .08);
  border: 1px solid var(--color-accent);
  cursor: pointer;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}

/* ── Tira de la semana ── */
._semana_9kjd9_169 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
._dia_9kjd9_174 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 2px 8px;
  border-radius: 16px;
  min-width: 0;
  cursor: pointer;
  font-family: var(--font-body);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .16s ease, border-color .16s ease;
}
._dia_9kjd9_174:active { transform: scale(.95); }
._diaIni_9kjd9_190 {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-muted);
}
._diaNum_9kjd9_197 {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
._diaPunto_9kjd9_204 {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: transparent;
}
._diaMarca_9kjd9_209 { font-size: 11px; line-height: 1; }

/* Estados del día */
._diaHoy_9kjd9_212 {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 4px 16px rgba(var(--color-accent-rgb), .3);
}
._diaHoy_9kjd9_212 ._diaIni_9kjd9_190, ._diaHoy_9kjd9_212 ._diaNum_9kjd9_197 { color: #0d0f14; }

._diaSel_9kjd9_219 { border-color: var(--color-accent); border-width: 2px; }

._diaHecho_9kjd9_221 {
  background: rgba(74, 222, 128, .12);
  border-color: var(--color-success);
}
._diaHecho_9kjd9_221 ._diaIni_9kjd9_190, ._diaHecho_9kjd9_221 ._diaNum_9kjd9_197 { color: var(--color-success); }

._diaFallado_9kjd9_227 { background: rgba(239, 68, 68, .08); border-color: rgba(239,68,68,.35); }

/* ── Vista mes ── */
._mesCabecera_9kjd9_230 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 6px;
}
._mesCabecera_9kjd9_230 span {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-muted);
  padding: 4px 0;
}
._mesGrid_9kjd9_243 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
._mesDia_9kjd9_248 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 46px;
  padding: 6px 2px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
}
._mesDia_9kjd9_248:active { background: var(--glass-bg-hover); }
._mesDiaNum_9kjd9_265 { font-size: 13px; font-variant-numeric: tabular-nums; }
._mesFuera_9kjd9_266 { color: var(--color-muted); opacity: .55; }
._mesHoy_9kjd9_267 { background: var(--color-accent); border-color: var(--color-accent); }
._mesHoy_9kjd9_267 ._mesDiaNum_9kjd9_265 { color: #0d0f14; font-weight: 800; }
._mesSel_9kjd9_269 { border-color: var(--color-accent); }

._leyenda_9kjd9_271 {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
._leyenda_9kjd9_271 span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--color-muted);
}
._leyenda_9kjd9_271 i { width: 8px; height: 8px; border-radius: 50%; display: block; }

/* ── Tarjeta del día seleccionado ── */
._diaCard_9kjd9_288 {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-hi);
  border-radius: var(--radius-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  padding: 18px;
}
._diaCardHecho_9kjd9_298 { border-color: var(--color-success); }

._aviso_9kjd9_300 {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  margin-bottom: 14px;
  border-radius: 14px;
}
._avisoOk_9kjd9_308   { background: rgba(74, 222, 128, .12); }
._avisoMal_9kjd9_309  { background: rgba(239, 68, 68, .09); }
._avisoTit_9kjd9_310  { font-size: 13px; font-weight: 700; }
._avisoSub_9kjd9_311  { font-size: 11px; color: var(--color-muted); }
._avisoLink_9kjd9_312 {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}

._diaCardHead_9kjd9_321 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
._diaNombre_9kjd9_328 { font-size: 17px; font-weight: 800; color: var(--color-text); letter-spacing: -.01em; }
._diaFecha_9kjd9_329  { font-size: 12px; color: var(--color-muted); margin-top: 3px; }

._btnIniciar_9kjd9_331 {
  flex-shrink: 0;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #0d0f14;
  border: none;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: var(--font-body);
  box-shadow: 0 6px 18px rgba(var(--color-accent-rgb), .3);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
._btnIniciar_9kjd9_331:active { transform: scale(.96); }
._btnIniciar_9kjd9_331:disabled { opacity: .6; cursor: default; }

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

._vacio_9kjd9_355 {
  color: var(--color-muted);
  font-size: 13px;
  text-align: center;
  padding: 18px 0;
}

/* ── Día de descanso ── */
._descanso_9kjd9_363 {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-hi);
  border-radius: var(--radius-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  padding: 30px 20px;
  text-align: center;
}
._descansoIcono_9kjd9_374 { font-size: 32px; margin-bottom: 8px; }
._descansoTit_9kjd9_375 { font-weight: 700; font-size: 15px; color: var(--color-text); margin-bottom: 4px; }
._descansoSub_9kjd9_376 { font-size: 12px; color: var(--color-muted); }

/* ── Estado sin rutina ── */
._sinRutina_9kjd9_379 { text-align: center; padding: 40px 16px; }
._sinRutinaIcono_9kjd9_380 { font-size: 46px; margin-bottom: 14px; }
._sinRutinaTit_9kjd9_381 { font-size: 16px; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
._sinRutinaSub_9kjd9_382 { font-size: 13px; color: var(--color-muted); margin-bottom: 24px; }
._sinRutinaAcciones_9kjd9_383 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
  margin: 0 auto;
}

@media (prefers-reduced-transparency: reduce) {
  ._diaCard_9kjd9_288, ._descanso_9kjd9_363, ._chip_9kjd9_101, ._dia_9kjd9_174, ._back_9kjd9_17 { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
._card_1oyne_1 {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Cabecera ── */
._header_1oyne_12 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._thumb_1oyne_18 {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-bg3);
  display: flex;
  align-items: center;
  justify-content: center;
}

._thumbImg_1oyne_30 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._thumbEmoji_1oyne_36 {
  font-size: 22px;
}

._info_1oyne_40 {
  flex: 1;
  min-width: 0;
}

._nombre_1oyne_45 {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._grupo_1oyne_54 {
  font-size: 12px;
  color: var(--color-accent);
  margin-top: 2px;
  font-weight: 500;
}

._removeBtn_1oyne_61 {
  background: var(--color-bg3);
  border: 1px solid var(--color-border);
  color: var(--color-danger);
  cursor: pointer;
  font-size: 20px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  transition: background 0.15s;
}
._removeBtn_1oyne_61:hover {
  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
}

._divider_1oyne_81 {
  height: 1px;
  background: var(--color-border);
  opacity: 0.5;
}

/* ── Tabla de series ── */
._seriesTable_1oyne_88 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._seriesHeader_1oyne_94 {
  display: grid;
  grid-template-columns: 28px 1fr 1fr 1fr 24px;
  gap: 6px;
  padding: 0 2px;
}

._seriesColLabel_1oyne_101 {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-muted);
  text-align: center;
}

._seriesRow_1oyne_110 {
  display: grid;
  grid-template-columns: 28px 1fr 1fr 1fr 24px;
  gap: 6px;
  align-items: center;
}

._seriesBadge_1oyne_117 {
  width: 28px;
  height: 28px;
  background: var(--color-bg3);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-muted);
  flex-shrink: 0;
}

/* Celda numérica compacta */
._cell_1oyne_133 {
  display: flex;
  align-items: center;
  background: var(--color-bg3);
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}
._cell_1oyne_133:focus-within {
  border-color: var(--color-accent);
}

._cellBtn_1oyne_146 {
  width: 26px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg2);
  border: none;
  color: var(--color-text);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.12s;
}
._cellBtn_1oyne_146:hover:not(:disabled) {
  background: var(--color-accent);
  color: #0d0f14;
}
._cellBtn_1oyne_146:disabled {
  opacity: 0.3;
  cursor: default;
}
._cellBtn_1oyne_146:first-child { border-right: 1px solid var(--color-border); }
._cellBtn_1oyne_146:last-child  { border-left:  1px solid var(--color-border); }

._cellInput_1oyne_173 {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  height: 36px;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
._cellInput_1oyne_173::-webkit-outer-spin-button,
._cellInput_1oyne_173::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Botón quitar serie */
._removeSerieBtn_1oyne_195 {
  width: 24px;
  height: 24px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s, border-color 0.12s;
}
._removeSerieBtn_1oyne_195:hover:not(:disabled) {
  color: var(--color-danger);
  border-color: var(--color-danger);
}
._removeSerieBtn_1oyne_195:disabled {
  opacity: 0.2;
  cursor: default;
}

/* Botón añadir serie */
._addSerieBtn_1oyne_219 {
  width: 100%;
  padding: 9px;
  background: transparent;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
._addSerieBtn_1oyne_219:hover {
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

/* ── Campos para por_tiempo ── */
._fields_1oyne_236 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

._fieldWrap_1oyne_242 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._fieldLabel_1oyne_248 {
  font-size: 11px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

._fieldRow_1oyne_256 {
  display: flex;
  align-items: center;
  background: var(--color-bg3);
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s;
}
._fieldRow_1oyne_256:focus-within {
  border-color: var(--color-accent);
}

._fieldBtn_1oyne_269 {
  width: 38px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg2);
  border: none;
  color: var(--color-text);
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.12s;
}
._fieldBtn_1oyne_269:hover:not(:disabled) {
  background: var(--color-accent);
  color: #0d0f14;
}
._fieldBtn_1oyne_269:disabled { opacity: 0.3; cursor: default; }
._fieldBtn_1oyne_269:first-child { border-right: 1px solid var(--color-border); }
._fieldBtn_1oyne_269:last-child  { border-left:  1px solid var(--color-border); }

._fieldInput_1oyne_293 {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  height: 44px;
  padding: 0 2px;
  -moz-appearance: textfield;
  appearance: textfield;
}
._fieldInput_1oyne_293::-webkit-outer-spin-button,
._fieldInput_1oyne_293::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
}
._wrap_bkman_1 {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: var(--color-bg3);
}

/* Pista con scroll-snap: el gesto lo gestiona el navegador */
._pista_bkman_10 {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
._pista_bkman_10::-webkit-scrollbar { display: none; }

._slide_bkman_22 {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
._slide_bkman_22 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* ── Flechas (ratón) ── */
._flecha_bkman_40 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, .42);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  cursor: pointer;
  opacity: 0;
  /* Mientras no se ven, no capturan el toque: si no, en móvil dejarían dos
     zonas muertas a los lados de la foto donde el tap no abre la noticia. */
  pointer-events: none;
  transition: opacity .18s ease, background .16s ease;
  z-index: 2;
}
._izq_bkman_65 { left: 8px; }
._der_bkman_66 { right: 8px; }

._wrap_bkman_1:hover ._flecha_bkman_40 { opacity: 1; pointer-events: auto; }
._flecha_bkman_40:hover { background: rgba(0, 0, 0, .62); }
._flecha_bkman_40:disabled { opacity: 0 !important; pointer-events: none !important; }

/* En pantallas táctiles no hay hover: las flechas estorban, fuera */
@media (hover: none) {
  ._flecha_bkman_40 { display: none; }
}

/* ── Contador "2/5" ── */
._contador_bkman_78 {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, .48);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  pointer-events: none;
  z-index: 2;
}

/* ── Puntos ── */
._puntos_bkman_95 {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}
._punto_bkman_95 {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
._puntoOn_bkman_115 {
  width: 20px;
  border-radius: var(--radius-pill);
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  ._punto_bkman_95 { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  ._flecha_bkman_40, ._contador_bkman_78 {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, .8);
  }
}
/* ─────────────────────────────────────────────────────────────
   Noticias (cliente móvil) — estilo cristal
   ───────────────────────────────────────────────────────────── */

._page_15kv2_5 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Cabecera ── */
._header_15kv2_12 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
._titulo_15kv2_18 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-text);
}
._sub_15kv2_26 {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--color-muted);
}

/* ── Chips de categoría ── */
._chips_15kv2_33 {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin: 0 -2px;
}
._chips_15kv2_33::-webkit-scrollbar { display: none; }

._chip_15kv2_33 {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-muted);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  cursor: pointer;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
._chip_15kv2_33:active { transform: scale(.96); }
._chipOn_15kv2_61 {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), .09);
}

/* ── Lista de noticias ── */
._lista_15kv2_68 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

._card_15kv2_74 {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
  padding: 0;
  border-radius: var(--radius-glass);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-hi);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  color: var(--color-text);
  font-family: var(--font-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, border-color .18s ease;
}
._card_15kv2_74:active { transform: scale(.985); }
._cardDestacada_15kv2_95 { border-color: var(--color-accent); }

/* Imagen / portada */
._media_15kv2_98 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
}
._media_15kv2_98 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
._mediaVacia_15kv2_111 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background: linear-gradient(140deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}
/* Degradado inferior para que las etiquetas floten sobre la foto */
._media_15kv2_98::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 52%);
  pointer-events: none;
}
._mediaBadges_15kv2_128 {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Cuerpo */
._body_15kv2_139 {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
._badges_15kv2_146 { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

._cardTitulo_15kv2_148 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--color-text);
  text-wrap: balance;
}
._resumen_15kv2_156 {
  margin: 0;
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.5;
}

._meta_15kv2_163 {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--color-muted);
}
._metaDer_15kv2_174 { display: flex; gap: 10px; }

/* Acciones de staff dentro de la tarjeta */
._acciones_15kv2_177 { display: flex; gap: 8px; padding-top: 10px; }

/* ── Vacío ── */
._vacio_15kv2_180 {
  text-align: center;
  padding: 64px 20px;
  color: var(--color-muted);
}
._vacioIcono_15kv2_185 { font-size: 46px; margin-bottom: 12px; }
._vacioTit_15kv2_186 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}
._vacioSub_15kv2_192 { font-size: 13px; }

@media (prefers-reduced-transparency: reduce) {
  ._card_15kv2_74, ._chip_15kv2_33 { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ── Carrusel dentro de la portada de la tarjeta ──────────────
   La tarjeta ya recorta y redondea, así que el carrusel va a ras. */
._mediaCarrusel_15kv2_200 {
  height: 100%;
  border-radius: 0;
  background: transparent;
}

/* ── Me gusta ────────────────────────────────────────────────
   Mismo componente para cliente (pulsable) y staff (solo lectura). */
._like_15kv2_208 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, transform .12s ease;
}
._like_15kv2_208:active { transform: scale(.92); }
._like_15kv2_208:disabled { opacity: .6; cursor: default; }

/* Pulsado: el corazón se rellena y toma el color de peligro (rojo) */
._likeOn_15kv2_227 {
  color: var(--color-danger);
  border-color: rgba(255, 107, 107, .35);
  background: rgba(255, 107, 107, .10);
}

/* Variante grande para la hoja de lectura */
._likeLg_15kv2_234 {
  padding: 7px 14px;
  font-size: 13px;
  gap: 7px;
}

/* Staff: es un dato, no un control */
._likeSolo_15kv2_241 { cursor: default; }

/* ── Editor de galería ───────────────────────────────────────*/
._galeria_15kv2_244 {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 10px;
  scrollbar-width: thin;
}
._galeriaItem_15kv2_252 {
  position: relative;
  flex: 0 0 104px;
  height: 78px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg3);
}
._galeriaItem_15kv2_252 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
._galeriaPortada_15kv2_267 {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #0d0f14;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
}
._galeriaCtrl_15kv2_280 {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 4px;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), transparent);
}
._galeriaCtrl_15kv2_280 button {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
._galeriaCtrl_15kv2_280 button:hover { background: rgba(255, 255, 255, .28); }
._galeriaCtrl_15kv2_280 button:disabled { opacity: .25; cursor: default; }
._galeriaQuitar_15kv2_305 { color: var(--color-danger) !important; }

/* ── Visor a pantalla completa ───────────────────────────────*/
._visor_15kv2_308 {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .92);
  animation: _visorEntra_15kv2_1 .16s ease-out;
}
@keyframes _visorEntra_15kv2_1 { from { opacity: 0; } to { opacity: 1; } }

._visorCuerpo_15kv2_321 {
  width: 100%;
  max-width: 900px;
  /* Altura explícita: el carrusel la hereda al 100%, y con `auto` colapsaría */
  height: 78dvh;
}
/* A pantalla completa interesa ver la foto entera, no recortada */
._visorCuerpo_15kv2_321 img {
  object-fit: contain;
  background: #000;
}

._visorCerrar_15kv2_333 {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  cursor: pointer;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  ._visor_15kv2_308 { animation: none; }
}

/**
 * ┌─────────────────────────────────────────────────────────────┐
 * │  TEMA WHITE-LABEL — modificar por cliente                   │
 * │  Nombre / logo / textos → src/config/app.config.js          │
 * │  Favicon / título del tab → index.html                      │
 * └─────────────────────────────────────────────────────────────┘
 */
:root {
  --color-bg:        #0d0f14;
  --color-bg2:       #13161e;
  --color-bg3:       #1a1e2a;
  --color-card:      #1e2230;
  --color-card2:     #252a3a;
  --color-border:    #2a2f42;
  --color-border2:   #3a3f55;

  --color-accent:      #e8ff47;
  --color-accent-rgb:  232, 255, 71;
  --color-accent2:     #47c8ff;
  --color-accent3:     #ff6b6b;

  --color-text:    #f0f2f8;
  --color-muted:   #7a7f94;
  --color-muted2:  #4a4f64;

  --color-success: #4ade80;
  --color-warning: #fb923c;
  --color-danger:  #ff6b6b;
  --color-info:    #47c8ff;

  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --transition: all 0.18s ease;

  /* ── Sistema "glass" (vista móvil) ────────────────────────────
     Superficies translúcidas con desenfoque de fondo. El blur se
     dosifica a propósito: fuerte en elementos flotantes (barra,
     buscador) y ligero en tarjetas, para no penalizar el rendimiento
     en WebView de Android de gama baja. */
  --glass-bg:         rgba(255, 255, 255, .07);
  --glass-bg-strong:  rgba(255, 255, 255, .10);
  --glass-bg-hover:   rgba(255, 255, 255, .15);
  --glass-border:     rgba(255, 255, 255, .14);
  --glass-border-hi:  rgba(255, 255, 255, .30);  /* brillo del borde superior */
  --glass-bar:        rgba(18, 21, 29, .34);      /* barra flotante sobre contenido */
  --glass-blur:       blur(20px) saturate(150%);
  --glass-blur-soft:  blur(14px) saturate(140%);
  --glass-blur-strong:blur(28px) saturate(170%);
  --glass-shadow:     0 10px 34px rgba(0, 0, 0, .38);
  --glass-inset:      inset 0 1px 0 rgba(255, 255, 255, .06);
  --radius-pill:      999px;
  --radius-glass:     22px;
  /* Panel de los modales: sólido en escritorio, cristal dentro de la app
     del cliente (se sobreescribe en ClientLayout). */
  --modal-bg:         #1e2230;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Evita rebote en iOS/Android al hacer overscroll */
  overscroll-behavior: none;
  /* Necesario para que env(safe-area-inset-*) funcione */
  height: 100%;
}
/* ── Evitar que el gesto de mantener-pulsado-y-arrastrar seleccione texto
   o arrastre elementos en móvil (WebView), lo que dejaba la app "congelada".
   Desactivamos selección de texto y el menú contextual del callout en TODO,
   y lo RE-ACTIVAMOS solo en campos de entrada y contenido editable. ── */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable="true"], [contenteditable=""] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
/* Imágenes y enlaces: no arrastrables (evita el "ghost drag" que congela) */
img, a {
  -webkit-user-drag: none;
  user-drag: none;
}
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  /* Safe area solo lateral e inferior — el top lo maneja el Layout (topbar/sidebar) */
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
  /* Fijar al viewport completo */
  min-height: 100dvh;
}
#root {
  min-height: 100dvh;
}
a { color: inherit; text-decoration: none; }
button {
  cursor: pointer;
  font-family: var(--font-body);
  /* Elimina el flash azul/gris al tocar en móvil */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Elimina tap highlight en todos los elementos interactivos */
a, button, input, select, textarea, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}
/* Inputs: mínimo 16px para evitar zoom automático en iOS */
input, select, textarea {
  font-family: var(--font-body);
  font-size: max(16px, 1em);
}
/* Los textarea solo se pueden redimensionar en vertical y con un máximo
   razonable — antes se podían arrastrar infinitamente grandes. */
textarea {
  resize: vertical;
  max-height: 320px;
  min-height: 64px;
}
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
/* Safe area lateral e inferior — top lo gestiona el Layout */
@supports (padding-top: env(safe-area-inset-top)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
    padding-left:   env(safe-area-inset-left);
    padding-right:  env(safe-area-inset-right);
  }
}
/* Evitar zoom no deseado en inputs en iOS */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}
/* ── Spinners de inputs numéricos ────────────────────────── */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
/* Wrapper personalizado: aplicado vía clase .numWrap en componentes */
.numWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.numWrap input[type="number"] {
  padding-right: 28px;
  width: 100%;
  box-sizing: border-box;
}
.numWrap__btns {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 26px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--color-border);
}
.numWrap__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg3);
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  transition: background .12s, color .12s;
  user-select: none;
  -webkit-user-select: none;
}
.numWrap__btn:first-child { border-radius: 0 6px 0 0; border-bottom: 1px solid var(--color-border); }
.numWrap__btn:last-child  { border-radius: 0 0 6px 0; }
.numWrap__btn:hover { background: var(--color-accent); color: #0d0f14; }
/* ── Tienda responsive ───────────────────────────────────── */
@media (max-width: 768px) {
  /* Grid pasa a columna única */
  .tienda-grid {
    grid-template-columns: 1fr !important;
  }

  /* FAB del carrito visible en móvil */
  .tienda-fab {
    display: flex !important;
  }

  /* Backdrop visible cuando el carrito está abierto */
  .tienda-overlay {
    display: block !important;
  }

  /* Panel ticket: bottom sheet deslizante */
  .tienda-ticket {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    z-index: 920 !important;
    border-radius: 20px 20px 0 0 !important;
    min-height: 0 !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Cuando el carrito está abierto */
  .tienda-ticket-open {
    transform: translateY(0) !important;
  }

  /* Botón cerrar visible en móvil */
  .tienda-ticket-close {
    display: block !important;
  }

  /* Handle visual arriba del sheet */
  .tienda-ticket::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--color-border2);
    border-radius: 2px;
    margin: 10px auto 0;
  }
}
/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg2); }
::-webkit-scrollbar-thumb { background: var(--color-border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-muted2); }
/* ── Utilidades de cristal (app del cliente) ─────────────────
   Clases globales reutilizables para los patrones que se repiten en
   varias pantallas: botón de volver, botón de "añadir" y campos. */
/* Botón circular de volver / icono */
.gx-back {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-hi);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  cursor: pointer;
  transition: transform .13s ease;
}
.gx-back:active { transform: scale(.92); }
/* Botón de "añadir" con borde discontinuo */
.gx-dashed {
  width: 100%;
  padding: 13px 18px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  border: 1px dashed var(--glass-border-hi);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  transition: transform .12s ease, background .16s ease;
}
.gx-dashed:active { transform: scale(.98); background: var(--glass-bg-hover); }
/* Campo de texto suelto (inputs con estilo en línea que migramos) */
.gx-field {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
}
.gx-field:focus { border-color: var(--color-accent); background: var(--glass-bg-strong); }
.gx-field::placeholder { color: var(--color-muted); }
@media (prefers-reduced-transparency: reduce) {
  .gx-back, .gx-dashed, .gx-field {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--color-card);
  }
}
.gx-mb20 { margin-bottom: 20px; }
/* Barra de acción fija al pie del contenido (Guardar / Empezar…).
   Lleva fondo difuminado propio para que el contenido pase por DEBAJO sin
   superponerse al botón. */
.gx-sticky-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin: 20px -16px -16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--color-bg) 12%, rgba(13, 15, 20, .82) 70%, transparent);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
}
@media (prefers-reduced-transparency: reduce) {
  .gx-sticky-bar { background: var(--color-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Utilidades */
.flex   { display: flex; }
.grid   { display: grid; }
.hidden { display: none; }
.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;
}