/* ═══════════════════════════════════════════════════════════════════
   KHRONO GYM — DESIGN SYSTEM v1.0
   Dark Premium Fitness · Verde Neón · Bold Sans-Serif
   ═══════════════════════════════════════════════════════════════════
   Clonado y adaptado desde ~/nova-prolig-actual/public/nova-premium.css
   (bloque :root[data-theme="dark"], base #0B0E12 + verde #22C55E/#4ADE80).

   Diferencias deliberadas respecto a Nova:
   - Un solo tema (oscuro). Sin toggle claro/oscuro, sin bloque :root
     claro — Khrono Gym nace 100% oscuro, no hay alternativa de tema.
   - Verde neón bastante más saturado/brillante que Nova, con glow en
     capas dobles (halo cercano + halo ancho) en vez de una sola sombra.
   - Tipografía Manrope (bold, geométrica, sans-serif) en vez de Inter —
     look "gimnasio/fitness premium", nada de serif tipo Playfair.
   - Variables --gold* de Nova pasan a llamarse --brand* (más claro para
     un producto que no es dorado sino verde neón). Se documenta la
     equivalencia en cada bloque para quien migre componentes de Nova.
   - Componentes nuevos sin equivalente en Nova: badge de racha (streak),
     barra de progreso (usada en el PDF de rutina gamificado), chip QR.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ── Variables (único tema — oscuro) ──────────────────────────────── */
:root {
  /* Fondos */
  --bg:            #0B0E12;   /* base, heredado 1:1 del dark de Nova */
  --bg-void:       #05070A;   /* más profundo aún — heroes, landing, carnet QR */
  --surface:       #12161C;
  --surface-2:     #171C24;
  --surface-3:     #1A2029;
  --surface-4:     #222933;
  --surface-hover: #1C222B;

  /* Verde neón Khrono — más intenso que el #22C55E/#4ADE80 de Nova */
  --brand:        #34FF7A;  /* equivalente a --gold de Nova, más saturado */
  --brand-light:  #7CFFB0;  /* equivalente a --gold-light */
  --brand-dark:   #16D95E;  /* usado para texto sobre superficies claras del propio brand */
  --brand-dim:    rgba(52,255,122,.18);
  --brand-dimmer: rgba(52,255,122,.09);
  --brand-glow:      0 0 18px rgba(52,255,122,.55), 0 0 42px rgba(52,255,122,.22);
  --brand-glow-soft: 0 0 10px rgba(52,255,122,.35);
  --brand-glow-text: 0 0 14px rgba(52,255,122,.65);

  /* Estructura (fondos verdes translúcidos, ej. chips activos) */
  --khrono:       rgba(52,255,122,.14);
  --khrono-light: rgba(52,255,122,.22);

  /* Texto */
  --text-1: #F5F7FA;
  --text-2: #A8B0BC;
  --text-3: #6B7280;

  /* Bordes */
  --border:        rgba(52,255,122,.28);
  --border-hover:  rgba(52,255,122,.5);
  --border-subtle: #232A34;
  --border-strong: #313B47;

  /* Sombras */
  --shadow-sm:       0 1px 2px rgba(0,0,0,.4);
  --shadow-card:     0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
  --shadow-elevated: 0 8px 24px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  --shadow-modal:    0 24px 64px rgba(0,0,0,.65), 0 8px 24px rgba(0,0,0,.45);
  --shadow-fab:      0 4px 20px rgba(52,255,122,.4), 0 0 30px rgba(52,255,122,.18);
  --shadow-fab-hover:0 8px 28px rgba(52,255,122,.5), 0 0 40px rgba(52,255,122,.25);

  /* Acentos funcionales (estado socio / prospecto) */
  --accent-caliente: #FF6B5C;
  --accent-tibio:    #FBBF24;
  --accent-frio:     #60A5FA;
  --accent-ok:       #34FF7A;
  --accent-danger:   #F87171;

  /* Layout */
  --sidebar-w: 260px;
  --radius:    12px;
  --radius-sm: 8px;

  /* Timing */
  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.4,.64,1);
}

/* ── Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  background: var(--bg) !important;
  color: var(--text-1) !important;
}

/* ── Tipografía ────────────────────────────────────────────────────── */
h1, h2, h3,
.header h1,
.panel-header h2,
.modal h3,
.stat-val, .kpi-value,
.card-nombre,
.brand-name {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

/* ── Scrollbar ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }
::selection { background: var(--brand-dim); color: var(--brand-light); }

/* ══════════════════════════════════════════════════════════════════
   HEADER / NAV
══════════════════════════════════════════════════════════════════ */
.header {
  background: rgba(18,22,28,.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.3) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: .5rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 1rem 1.5rem !important;
}

.nav {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

.header-brand {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text-1) !important;
  letter-spacing: -.02em !important;
}

.header-sub {
  font-size: 11px !important;
  color: var(--text-3) !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
  margin-top: 1px !important;
}

@media (max-width: 768px) {
  .header { padding: .875rem 1rem !important; }
}

/* Línea verde neón con glow en el borde inferior del header */
.header::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--brand-dim) 15%, rgba(52,255,122,.6) 50%, var(--brand-dim) 85%, transparent 100%);
  box-shadow: 0 0 10px rgba(52,255,122,.35);
  opacity: .9;
}

.header h1 {
  color: var(--text-1) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

/* Logo — marca "K" en cuadrado con glow neón */
.header h1::before {
  content: 'K';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: linear-gradient(135deg, #34FF7A, #16D95E);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 800;
  color: #05070A;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: var(--brand-glow);
  letter-spacing: 0;
}

.nav a {
  color: var(--text-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 5px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  transition: all .18s var(--ease) !important;
  white-space: nowrap !important;
  background: transparent !important;
  letter-spacing: .01em !important;
}
.nav a:hover {
  color: var(--text-1) !important;
  background: var(--surface-2) !important;
  border-color: var(--border-subtle) !important;
}
.nav a.activo {
  background: var(--brand-dim) !important;
  color: var(--brand-light) !important;
  border-color: var(--border) !important;
  font-weight: 700 !important;
  text-shadow: var(--brand-glow-text) !important;
}
.nav-salir {
  color: var(--text-3) !important;
  border-color: transparent !important;
}
.nav-salir:hover {
  background: rgba(248,113,113,.08) !important;
  color: var(--accent-danger) !important;
  border-color: rgba(248,113,113,.2) !important;
}

/* Health banner */
#health-banner {
  background: linear-gradient(90deg, rgba(52,255,122,.1), rgba(52,255,122,.04)) !important;
  border-bottom: 1px solid rgba(52,255,122,.25) !important;
  color: var(--brand-light) !important;
}

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR (shell tipo workspace.html — iframe-SPA)
══════════════════════════════════════════════════════════════════ */
.workspace {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

.sidebar {
  background: var(--surface) !important;
  border-right: 1px solid var(--border-subtle) !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 10;
  height: 100vh;
}

.sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-brand {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
}
.brand-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, rgba(52,255,122,.22), rgba(52,255,122,.08));
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: var(--brand-glow-soft);
}
.brand-text { flex: 1; min-width: 0; }
.brand-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--brand);
  text-shadow: var(--brand-glow-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-sub { font-size: 11px; color: var(--text-3); letter-spacing: .05em; }

.sidebar-section { padding: 16px 12px 8px; }
.sidebar-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-3);
  text-transform: uppercase;
  padding: 0 8px 8px;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  transition: all .16s var(--ease);
  text-decoration: none;
}
.sidebar-item:hover { background: var(--surface-hover); color: var(--text-1); }
.sidebar-item.activo {
  background: var(--brand-dim);
  color: var(--brand-light);
  box-shadow: inset 2px 0 0 var(--brand);
}
.sidebar-item .icon { width: 18px; text-align: center; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════
   STATS / KPI CARDS
══════════════════════════════════════════════════════════════════ */
.stat, .kpi {
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  padding: 1rem 1.2rem !important;
  position: relative; overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease) !important;
  box-shadow: var(--shadow-card) !important;
}
.stat::before, .kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  box-shadow: 0 0 8px rgba(52,255,122,.6);
  opacity: 0; transition: opacity .22s var(--ease);
}
.stat:hover, .kpi:hover {
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-elevated), var(--brand-glow-soft) !important;
  transform: translateY(-2px) !important;
}
.stat:hover::before, .kpi:hover::before { opacity: 1; }

.stat-lbl, .kpi-label {
  font-size: 10px !important; font-weight: 700 !important;
  color: var(--text-3) !important; text-transform: uppercase !important;
  letter-spacing: .1em !important; margin-bottom: 6px !important;
}
.stat-val, .kpi-value {
  font-size: 28px !important; font-weight: 800 !important;
  color: var(--text-1) !important; line-height: 1.1 !important;
  letter-spacing: -.03em !important;
}
.stat-sub, .kpi-sub { font-size: 11px !important; color: var(--text-3) !important; margin-top: 3px !important; }
.kpi-delta { font-size: 11px !important; margin-top: 3px !important; font-weight: 700 !important; }
.kpi-delta.up   { color: var(--brand-light) !important; }
.kpi-delta.down { color: var(--accent-danger) !important; }

/* ══════════════════════════════════════════════════════════════════
   PANEL
══════════════════════════════════════════════════════════════════ */
.panel {
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden !important;
  position: relative;
}
.panel-header {
  padding: .875rem 1.25rem !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  background: var(--surface-2) !important;
}
.panel-header h2 {
  font-size: 14px !important; font-weight: 800 !important;
  color: var(--text-1) !important;
  letter-spacing: -.02em !important;
}

/* ══════════════════════════════════════════════════════════════════
   TABLAS (patrón admin.html / crm.html)
══════════════════════════════════════════════════════════════════ */
table { border-collapse: collapse !important; width: 100% !important; }
th {
  padding: 9px 14px !important;
  font-size: 10px !important; font-weight: 700 !important;
  color: var(--text-3) !important; text-transform: uppercase !important;
  letter-spacing: .1em !important;
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  white-space: nowrap !important;
  text-align: left !important;
}
td {
  padding: 10px 14px !important;
  font-size: 13px !important; color: var(--text-2) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  transition: background .12s var(--ease), color .12s var(--ease) !important;
}
tr:hover td { background: var(--surface-hover) !important; color: var(--text-1) !important; }

/* 19 sep 2026, pedido de Felipe ("hay siempre inconsistencias en las líneas"):
   las páginas definen `.acciones{display:flex}` y la usan EN el <td>. Un <td>
   con display:flex deja de ser celda de tabla: su borde inferior ya no
   coincide con el de las otras celdas de la fila (líneas cortadas / corridas)
   y su alto rompe el de la fila. Aquí se fuerza que siga siendo celda y los
   botones van en línea; así TODAS las tablas comparten el mismo trazo de
   línea sin importar cuánto contenido tenga cada fila. */
td { vertical-align: middle !important; }
td.col-fecha { white-space: nowrap !important; }
td.acciones { display: table-cell !important; white-space: nowrap !important; }
td.acciones > .btn, td.acciones > a.btn, td.acciones > button {
  display: inline-block !important; vertical-align: middle !important;
  margin: 0 6px 0 0 !important; white-space: nowrap !important;
}
td.acciones > :last-child { margin-right: 0 !important; }
/* El botón verde principal de una fila usa el mismo tamaño que los demás
   (antes era más alto y agrandaba solo esas filas). */
td.acciones > .btn-sm.btn-gold { padding: 4px 10px !important; font-size: 11px !important; }
@media (min-width: 769px) and (max-width: 1024px) {
  td.acciones { white-space: normal !important; }
  td.acciones > .btn, td.acciones > a.btn, td.acciones > button { margin: 2px 6px 2px 0 !important; }
}
.empty { text-align: center !important; padding: 3rem !important; color: var(--text-3) !important; font-size: 14px !important; }

/* ══════════════════════════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-block !important; padding: 2px 9px !important;
  border-radius: 20px !important; font-size: 11px !important;
  font-weight: 700 !important; letter-spacing: .02em !important;
}
.badge-activo    { background: rgba(52,255,122,.14) !important; color: var(--brand-light) !important; border: 1px solid rgba(52,255,122,.3) !important; }
.badge-inactivo  { background: rgba(248,113,113,.12) !important; color: #F87171 !important; border: 1px solid rgba(248,113,113,.3) !important; }
.badge-nuevo     { background: rgba(96,165,250,.12) !important; color: #60A5FA !important; border: 1px solid rgba(96,165,250,.3) !important; }
.badge-caliente  { background: rgba(255,107,92,.12) !important; color: #FF6B5C !important; border: 1px solid rgba(255,107,92,.3) !important; }
.badge-tibio     { background: rgba(251,191,36,.12) !important; color: #FBBF24 !important; border: 1px solid rgba(251,191,36,.3) !important; }
.badge-frio      { background: rgba(148,163,184,.1) !important; color: #94A3B8 !important; border: 1px solid rgba(148,163,184,.25) !important; }
.badge-vencido   { background: rgba(248,113,113,.12) !important; color: #F87171 !important; border: 1px solid rgba(248,113,113,.3) !important; }
.badge-web       { background: var(--surface-2) !important; color: var(--text-2) !important; border: 1px solid var(--border-subtle) !important; }
.badge-whatsapp  { background: rgba(52,255,122,.1) !important; color: var(--brand-light) !important; border: 1px solid rgba(52,255,122,.22) !important; }

/* Badge de racha (streak) — con glow, ícono de llama/rayo vía contenido HTML */
.badge-racha {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  padding: 3px 11px !important; border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(52,255,122,.2), rgba(52,255,122,.06)) !important;
  border: 1px solid var(--border) !important;
  color: var(--brand-light) !important;
  font-size: 12px !important; font-weight: 800 !important;
  box-shadow: var(--brand-glow-soft) !important;
  text-shadow: var(--brand-glow-text) !important;
}
.badge-racha.apagada {
  background: var(--surface-2) !important; border-color: var(--border-subtle) !important;
  color: var(--text-3) !important; box-shadow: none !important; text-shadow: none !important;
}

/* Chip QR — usado en carnet digital / check-in */
.chip-qr {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  padding: 4px 12px !important; border-radius: 20px !important;
  background: var(--surface-2) !important; border: 1px solid var(--border-subtle) !important;
  color: var(--text-2) !important; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .04em !important; text-transform: uppercase !important;
}

/* ══════════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════════ */
.btn {
  padding: 7px 14px !important; border-radius: 8px !important;
  border: 1px solid var(--border-subtle) !important;
  background: var(--surface) !important; font-size: 12px !important;
  cursor: pointer !important; color: var(--text-2) !important;
  transition: all .18s var(--ease) !important; font-weight: 600 !important;
}
.btn:hover { background: var(--surface-2) !important; border-color: var(--border-strong) !important; color: var(--text-1) !important; }

.btn-primary {
  background: var(--khrono) !important; color: var(--brand-light) !important;
  border-color: var(--border) !important;
}
.btn-primary:hover { background: var(--khrono-light) !important; border-color: var(--border-hover) !important; }

/* CTA principal — neón sólido con glow reforzado (más intenso que Nova) */
.btn-gold, .btn-brand {
  background: linear-gradient(135deg, #34FF7A, #16D95E) !important;
  color: #05070A !important; border-color: transparent !important;
  font-weight: 800 !important; letter-spacing: .01em !important;
  box-shadow: var(--shadow-fab) !important;
  padding: 8px 20px !important; font-size: 13px !important;
}
.btn-gold:hover, .btn-brand:hover {
  box-shadow: var(--shadow-fab-hover) !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.06) !important;
  color: #05070A !important;
}

.btn-outline {
  background: transparent !important; color: var(--brand-light) !important;
  border: 1px solid var(--border) !important; padding: 7px 16px !important; font-size: 13px !important;
  font-weight: 700 !important;
}
.btn-outline:hover { background: var(--brand-dimmer) !important; border-color: var(--border-hover) !important; box-shadow: var(--brand-glow-soft) !important; }

.btn-sm { padding: 4px 10px !important; font-size: 11px !important; }
.btn-danger {
  background: rgba(248,113,113,.1) !important; color: #F87171 !important;
  border-color: rgba(248,113,113,.28) !important;
}
.btn-danger:hover { background: rgba(248,113,113,.18) !important; }
.btn:disabled { opacity: .4 !important; cursor: not-allowed !important; transform: none !important; }

/* ══════════════════════════════════════════════════════════════════
   FAB BUTTONS
══════════════════════════════════════════════════════════════════ */
.fab-primary {
  position: fixed !important;
  bottom: 1.75rem !important; right: 1.75rem !important;
  background: linear-gradient(135deg, #34FF7A, #16D95E) !important;
  color: #05070A !important;
  border: none !important; border-radius: 50px !important;
  padding: 14px 22px !important; font-size: 13px !important;
  font-weight: 800 !important; letter-spacing: .02em !important;
  cursor: pointer !important;
  box-shadow: var(--shadow-fab) !important;
  z-index: 50 !important; text-decoration: none !important;
  display: flex !important; align-items: center !important; gap: 8px !important;
  transition: all .24s var(--ease-spring) !important;
  white-space: nowrap !important;
}
.fab-primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: var(--shadow-fab-hover) !important;
  filter: brightness(1.06) !important;
}
.fab-primary:active { transform: translateY(-1px) scale(.99) !important; }

.fab-secondary {
  position: fixed !important;
  bottom: 1.75rem !important; left: 1.75rem !important;
  background: var(--surface) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 50px !important;
  padding: 11px 16px !important; font-size: 12px !important;
  font-weight: 700 !important; letter-spacing: .02em !important;
  cursor: pointer !important;
  box-shadow: var(--shadow-elevated) !important;
  z-index: 50 !important; text-decoration: none !important;
  display: flex !important; align-items: center !important; gap: 7px !important;
  transition: all .22s var(--ease) !important; white-space: nowrap !important;
}
.fab-secondary:hover {
  background: var(--surface-2) !important;
  color: var(--brand-light) !important;
  border-color: var(--border) !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════════════════ */
select, input[type=text], input[type=number], input[type=email],
input[type=password], input[type=tel], input[type=date], textarea,
.form-group input, .form-group select, .form-group textarea {
  background: var(--surface-3) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 8px !important; color: var(--text-1) !important;
  padding: 9px 12px !important; font-size: 13px !important;
  outline: none !important;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease) !important;
}
select:focus, input:focus, textarea:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(52,255,122,.16), var(--brand-glow-soft) !important;
  background: var(--surface) !important;
}
select option { background: var(--surface); color: var(--text-1); }
.form-group label { color: var(--text-2) !important; font-size: 12px !important; font-weight: 700 !important; }
.upload-area {
  border: 1.5px dashed var(--border-subtle) !important;
  background: var(--surface-3) !important; border-radius: 10px !important;
  transition: border-color .2s var(--ease) !important;
}
.upload-area:hover { border-color: var(--border-hover) !important; }
.upload-label { color: var(--brand-light) !important; }
.upload-area p, .upload-progress { color: var(--text-3) !important; }
.section-title { color: var(--text-3) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .08em !important; border-top: 1px solid var(--border-subtle) !important; }

/* ══════════════════════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════════════════════ */
.overlay { background: rgba(5,7,10,.7) !important; backdrop-filter: blur(6px) !important; }
.modal {
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-modal) !important;
  color: var(--text-1) !important;
}
.modal h3 {
  color: var(--text-1) !important;
  font-size: 18px !important; font-weight: 800 !important;
  letter-spacing: -.03em !important;
}
.modal-sub { color: var(--text-3) !important; }
.modal-footer { border-top: 1px solid var(--border-subtle) !important; }
.modal textarea { background: var(--surface-3) !important; border-color: var(--border-subtle) !important; color: var(--text-1) !important; }
.modal-close {
  color: var(--text-3) !important; background: transparent !important; border: none !important;
  cursor: pointer !important; font-size: 18px !important; transition: color .15s var(--ease) !important;
}
.modal-close:hover { color: var(--text-1) !important; }

/* ══════════════════════════════════════════════════════════════════
   PIPELINE KANBAN (prospectos del gimnasio)
══════════════════════════════════════════════════════════════════ */
.pipeline-col {
  flex: 0 0 260px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important; overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
}
.pipeline-col-header { padding: 10px 14px !important; border-bottom: 1px solid var(--border-subtle) !important; background: var(--surface-2) !important; }
.pipeline-col-title { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .1em !important; }
.pipeline-col-count { font-size: 11px !important; font-weight: 700 !important; background: var(--surface-2) !important; border-radius: 20px !important; padding: 2px 9px !important; color: var(--text-2) !important; }

.col-nuevo    .pipeline-col-title, .col-nuevo    .pipeline-col-count { color: #60A5FA !important; }
.col-nuevo    .card { border-left-color: #60A5FA !important; }
.col-tibio    .pipeline-col-title, .col-tibio    .pipeline-col-count { color: #FBBF24 !important; }
.col-tibio    .card { border-left-color: #FBBF24 !important; }
.col-caliente .pipeline-col-title, .col-caliente .pipeline-col-count { color: #FF6B5C !important; }
.col-caliente .card { border-left-color: #FF6B5C !important; }
.col-inscrito .pipeline-col-title, .col-inscrito .pipeline-col-count { color: var(--brand-light) !important; }
.col-inscrito .card { border-left-color: var(--brand) !important; }
.col-frio     .pipeline-col-title, .col-frio     .pipeline-col-count { color: #94A3B8 !important; }
.col-frio     .card { border-left-color: #94A3B8 !important; }

/* Pipeline cards */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important; border-left-width: 3px !important;
  border-radius: 10px !important; padding: 11px 13px !important;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease) !important;
  box-shadow: var(--shadow-sm) !important;
}
.card:hover { box-shadow: var(--shadow-elevated) !important; transform: translateY(-2px) !important; }
.card-nombre { font-size: 14px !important; font-weight: 800 !important; color: var(--text-1) !important; letter-spacing: -.02em !important; }
.card-telefono { color: var(--text-2) !important; font-size: 12px !important; }
.card-telefono a { color: var(--brand-light) !important; text-decoration: none !important; }
.card-telefono a:hover { color: var(--brand) !important; }
.card-plan { font-size: 11px !important; color: var(--text-3) !important; background: var(--surface-2) !important; padding: 2px 7px !important; border-radius: 5px !important; }
.card-divider { border-color: var(--border-subtle) !important; }
.card-fecha { color: var(--text-3) !important; }

/* ══════════════════════════════════════════════════════════════════
   PROGRESO / BARRAS (usado en dashboard de asistencia y PDF de rutina)
══════════════════════════════════════════════════════════════════ */
.progress-track {
  width: 100% !important; height: 10px !important; border-radius: 20px !important;
  background: var(--surface-3) !important; border: 1px solid var(--border-subtle) !important;
  overflow: hidden !important; position: relative !important;
}
.progress-fill {
  height: 100% !important; border-radius: 20px !important;
  background: linear-gradient(90deg, #16D95E, #34FF7A) !important;
  box-shadow: 0 0 10px rgba(52,255,122,.6) !important;
  transition: width .4s var(--ease) !important;
}
.progress-label {
  display: flex !important; justify-content: space-between !important;
  font-size: 11px !important; font-weight: 700 !important; color: var(--text-3) !important;
  margin-bottom: 5px !important;
}
.progress-label strong { color: var(--brand-light) !important; }

/* Barra de canal / distribución (marketing) */
.canal-nombre { color: var(--text-2) !important; }
.canal-barra-wrap { background: var(--surface-4) !important; border-radius: 20px !important; overflow: hidden !important; }
.canal-barra { background: linear-gradient(90deg, #16D95E, #34FF7A) !important; box-shadow: 0 0 8px rgba(52,255,122,.5) !important; }
.canal-count { color: var(--brand-light) !important; }

/* ══════════════════════════════════════════════════════════════════
   MISC UI
══════════════════════════════════════════════════════════════════ */
.view-toggle { background: var(--surface-2) !important; border-radius: 8px !important; padding: 3px !important; display: flex !important; }
.view-btn { padding: 4px 11px !important; border-radius: 6px !important; border: none !important; background: transparent !important; font-size: 12px !important; cursor: pointer !important; color: var(--text-3) !important; font-weight: 600 !important; transition: all .14s !important; }
.view-btn.active { background: var(--surface) !important; color: var(--brand-light) !important; box-shadow: var(--shadow-sm) !important; }

.refresh { color: var(--text-3) !important; cursor: pointer !important; font-size: 11px !important; }
.refresh:hover { color: var(--brand-light) !important; }
.precio { color: var(--brand-light) !important; font-weight: 800 !important; font-variant-numeric: tabular-nums !important; text-shadow: var(--brand-glow-text) !important; }
.tel a { color: var(--brand-light) !important; text-decoration: none !important; }
.tel a:hover { color: var(--brand) !important; }

.dot-prioridad { display: inline-block !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; margin-right: 5px !important; }
.dot-alta  { background: var(--accent-danger) !important; }
.dot-media { background: var(--accent-tibio) !important; }
.dot-baja  { background: var(--text-3) !important; }

/* Live dot verde neón, con pulso */
.dot-status { width: 7px !important; height: 7px !important; border-radius: 50% !important; display: inline-block !important; }
.dot-verde { background: var(--brand) !important; box-shadow: 0 0 8px rgba(52,255,122,.7) !important; animation: pulseDot 2s ease-in-out infinite !important; }
.dot-gris  { background: var(--text-3) !important; }

@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

#seg-badge { background: var(--brand-dim) !important; color: var(--brand-light) !important; border: 1px solid var(--border) !important; border-radius: 20px !important; padding: 1px 8px !important; font-size: 10px !important; font-weight: 800 !important; }

/* Marca del gimnasio (multi-tenant, análogo a .broker-brand de Nova) */
.gym-brand { display: none !important; align-items: center !important; gap: 10px !important; flex-shrink: 0 !important; }
.tenant .gym-brand { display: flex !important; }
.gym-name-text { color: var(--text-1) !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .02em !important; }
.gym-slogan-text { color: var(--brand-light) !important; font-size: 10px !important; letter-spacing: 1.2px !important; }

/* Thumbnails */
.thumb { border: 1px solid var(--border-subtle) !important; border-radius: 8px !important; }
.thumb-empty { background: var(--surface-2) !important; color: var(--text-3) !important; border-radius: 8px !important; }

/* Toast */
.toast {
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-1) !important; border-radius: 12px !important;
  box-shadow: var(--shadow-elevated) !important; font-size: 13px !important;
  backdrop-filter: blur(12px) !important;
}
.toast.success { border-color: rgba(52,255,122,.35) !important; box-shadow: var(--shadow-elevated), var(--brand-glow-soft) !important; }
.toast.error { background: rgba(248,113,113,.14) !important; color: #F87171 !important; border-color: rgba(248,113,113,.3) !important; }

/* ══════════════════════════════════════════════════════════════════
   TABS
══════════════════════════════════════════════════════════════════ */
.tabs-nav { background: var(--surface-2) !important; border-bottom: 1px solid var(--border-subtle) !important; }
.tab-btn { color: var(--text-3) !important; border-bottom: 2px solid transparent !important; background: transparent !important; transition: all .2s var(--ease) !important; font-size: 13px !important; font-weight: 600 !important; }
.tab-btn:hover { color: var(--text-2) !important; }
.tab-btn.activo { color: var(--brand-light) !important; border-bottom-color: var(--brand) !important; background: var(--surface) !important; }

.plat-chip { padding: 6px 14px !important; border-radius: 20px !important; font-size: 12px !important; font-weight: 600 !important; border: 1.5px solid var(--border-subtle) !important; color: var(--text-2) !important; background: var(--surface-2) !important; transition: all .15s !important; }
.plat-chip:hover { border-color: var(--border-hover) !important; color: var(--text-1) !important; }

.metrica-card { background: var(--surface-2) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; padding: 1rem !important; }
.metrica-card h3 { color: var(--text-3) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .08em !important; }

.step-num { background: var(--brand-dim) !important; color: var(--brand-light) !important; border: 1px solid var(--border) !important; font-weight: 800 !important; }
.step-body h4 { color: var(--text-1) !important; }
.step-body p  { color: var(--text-2) !important; }
.code-inline { background: var(--surface-2) !important; border: 1px solid var(--border-subtle) !important; color: var(--brand-light) !important; border-radius: 5px !important; padding: 2px 7px !important; font-size: 12px !important; }
.code-block { background: var(--surface-2) !important; border: 1px solid var(--border-subtle) !important; border-radius: 8px !important; }

/* ══════════════════════════════════════════════════════════════════
   OTROS PANELES (finanzas, documentos, administraciones)
══════════════════════════════════════════════════════════════════ */
.doc-card { background: var(--surface) !important; border: 1px solid var(--border-subtle) !important; color: var(--text-1) !important; border-radius: 12px !important; transition: all .22s var(--ease) !important; }
.doc-card:hover { border-color: var(--border-hover) !important; box-shadow: var(--shadow-elevated) !important; transform: translateY(-2px) !important; }
.doc-title { color: var(--text-1) !important; }
.doc-desc  { color: var(--text-2) !important; }
h1 { color: var(--text-1) !important; }
.subtitle { color: var(--text-2) !important; }

/* ══════════════════════════════════════════════════════════════════
   ANIMACIONES
══════════════════════════════════════════════════════════════════ */
@keyframes luxuryIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: var(--brand-glow); }
  50%      { box-shadow: var(--brand-glow-soft); }
}

.stat  { animation: luxuryIn .35s var(--ease) both !important; }
.panel { animation: luxuryIn .35s .06s var(--ease) both !important; }
.stat:nth-child(1) { animation-delay: .03s !important; }
.stat:nth-child(2) { animation-delay: .08s !important; }
.stat:nth-child(3) { animation-delay: .13s !important; }
.stat:nth-child(4) { animation-delay: .18s !important; }
.overlay.activo .modal { animation: scaleIn .2s cubic-bezier(.34,1.3,.64,1) !important; }

.fab-primary  { animation: luxuryIn .5s .25s var(--ease-spring) both !important; }
.fab-secondary { animation: luxuryIn .5s .35s var(--ease-spring) both !important; }

/* ── Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .stat:hover, .card:hover, .doc-card:hover { transform: none !important; }
  .btn:hover, .btn-gold:hover { transform: none !important; }
  .fab-primary  { bottom: 1rem !important; right: 1rem !important; padding: 12px 16px !important; }
  .fab-secondary { bottom: 1rem !important; left: 1rem !important; }
  .workspace { grid-template-columns: 1fr !important; }
  .sidebar { display: none !important; }
}