/* ====================================================================
   BOTONES Y ACCIONES
   ==================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.75rem;
  font-size: 0.85rem;
  font-weight: 800;
  border-radius: var(--radius-md);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

.btn--primary {
  background-color: var(--accent-primary);
  color: #000000;
  box-shadow: 0 0 0 1px var(--accent-primary), 0 4px 15px var(--accent-glow);
}

.btn--primary:hover {
  background-color: transparent;
  color: var(--accent-primary);
  box-shadow: 0 0 0 1px var(--accent-primary), 0 0 20px var(--accent-glow);
  transform: translateY(-2px);
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--sm { 
  padding: 0.3rem 0.5rem !important; 
  font-size: 0.75rem !important; 
  min-width: auto !important; 
}

.modal-actions { 
  display: flex !important; 
  flex-direction: column; 
  gap: 0.75rem !important; 
  margin-top: 2rem !important; 
}

@media (min-width: 480px) { 
  .modal-actions { flex-direction: row; justify-content: flex-end; } 
  .modal-actions .btn { width: auto; } 
}

/* Botones de Perfil */
.profile-card__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.profile-card__btn {
  flex: 1;
  padding: 0.75rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  border-radius: 0.75rem;
  border: 0.0625rem solid transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
}

.profile-card__btn--primary {
  background: linear-gradient(135deg, var(--accent-primary), #00cc7d);
  color: #000000;
  box-shadow: 0 0.25rem 1rem rgba(0, 255, 157, 0.15);
}

.profile-card__btn--primary:hover {
  transform: translateY(-0.125rem) scale(1.02);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 255, 157, 0.25);
}

.profile-card__btn--primary:active { transform: scale(0.97); }
.profile-card__btn--primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }

.profile-card__btn--secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.08);
}

.profile-card__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.15);
}

.profile-card__btn--danger {
  background: rgba(255, 51, 102, 0.08);
  color: var(--danger);
  border-color: rgba(255, 51, 102, 0.15);
}

.profile-card__btn--danger:hover {
  background: rgba(255, 51, 102, 0.15);
  border-color: rgba(255, 51, 102, 0.3);
}

.profile-card__logout {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

.profile-card__logout:hover {
  color: var(--danger);
  background: rgba(255, 51, 102, 0.05);
}

/* Botones de Auth */
.auth-card__btn { 
  width: 100%; 
  padding: 0.9rem 2rem; 
  margin-top: 0.5rem; 
  font-size: 0.85rem; 
  font-weight: 900; 
  text-transform: uppercase; 
  letter-spacing: 0.08rem; 
  border-radius: 1rem; 
  border: none; 
  background: linear-gradient(135deg, var(--accent-primary), #00cc7d); 
  color: #000000; 
  cursor: pointer; 
  position: relative; 
  overflow: hidden; 
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
  box-shadow: 0 0.25rem 1.5rem rgba(0, 255, 157, 0.2), 0 0 3rem rgba(0, 255, 157, 0.05); 
} 

.auth-card__btn::before { 
  content: ''; 
  position: absolute; 
  top: 0; left: -100%; 
  width: 100%; height: 100%; 
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); 
  transition: left 0.6s ease; 
} 

.auth-card__btn:hover::before { left: 100%; } 
.auth-card__btn:hover { transform: translateY(-0.125rem) scale(1.01); box-shadow: 0 0.5rem 2.5rem rgba(0, 255, 157, 0.3), 0 0 4rem rgba(0, 255, 157, 0.08); } 
.auth-card__btn:active { transform: scale(0.97); } 
.auth-card__btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } 
.auth-card__btn .auth-spinner { 
  display: inline-block; 
  width: 1.25rem; height: 1.25rem; 
  border: 0.125rem solid rgba(0, 0, 0, 0.2); 
  border-top-color: #000000; 
  border-radius: 50%; 
  animation: authSpin 0.6s linear infinite; 
  margin-right: 0.5rem; 
  vertical-align: middle; 
}

/* Botón Saltar Tutorial */
.tutorial-skip-btn { 
  position: fixed; top: 1rem; right: 1rem; z-index: 10000; 
  padding: 0.4rem 0.8rem; font-size: 0.6rem; font-weight: 700; 
  text-transform: uppercase; letter-spacing: 0.06rem; color: var(--text-muted); 
  background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(0.5rem); 
  border: 0.0625rem solid rgba(255, 255, 255, 0.05); border-radius: 0.5rem; 
  cursor: pointer; transition: all 0.3s ease; pointer-events: all; 
}
.tutorial-skip-btn:hover { color: var(--text-primary); background: rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.1); }
/* Botón cronómetro en marcha */
.btn--running { background: #f59e0b !important; color: #000 !important; }