/**
 * Obsidian Lux — botones (CTA oscuro + borde dorado, texto neón)
 * Referencia: belleza-public-dark.css — sin relleno beige sólido
 */
html[data-theme="obsidian-lux"] .btn {
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

html[data-theme="obsidian-lux"] .btn-primary,
html[data-theme="obsidian-lux"] .saas-btn-primary {
  background: linear-gradient(145deg, #0f141c 0%, var(--bg-card) 55%, #121a26 100%);
  color: var(--cta-text);
  font-weight: 600;
  text-shadow: var(--cta-text-shadow);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 52%, var(--border-primary));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-primary) 10%, transparent),
    0 8px 24px rgba(0, 0, 0, 0.38),
    0 0 18px color-mix(in srgb, var(--accent-primary) 16%, transparent);
}

html[data-theme="obsidian-lux"] .btn-primary:hover,
html[data-theme="obsidian-lux"] .btn-primary:focus,
html[data-theme="obsidian-lux"] .saas-btn-primary:hover,
html[data-theme="obsidian-lux"] .saas-btn-primary:focus {
  background: linear-gradient(145deg, #121a26 0%, var(--bg-card-hover) 100%);
  color: var(--cta-text-hover);
  text-shadow: var(--cta-text-shadow-hover);
  border-color: color-mix(in srgb, var(--accent-hover) 62%, var(--border-primary));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-primary) 18%, transparent),
    0 10px 28px rgba(0, 0, 0, 0.42),
    0 0 22px color-mix(in srgb, var(--accent-primary) 22%, transparent);
}

html[data-theme="obsidian-lux"] .btn-primary:focus-visible,
html[data-theme="obsidian-lux"] .saas-btn-primary:focus-visible {
  box-shadow: var(--focus-ring), 0 8px 24px rgba(0, 0, 0, 0.38);
}

html[data-theme="obsidian-lux"] .btn-secondary,
html[data-theme="obsidian-lux"] .saas-btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  box-shadow: none;
  text-shadow: none;
}

html[data-theme="obsidian-lux"] .btn-secondary:hover,
html[data-theme="obsidian-lux"] .saas-btn-secondary:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

html[data-theme="obsidian-lux"] .btn-outline-primary {
  color: var(--cta-text);
  border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-primary));
  background: transparent;
  text-shadow: var(--cta-text-shadow);
}

html[data-theme="obsidian-lux"] .btn-outline-primary:hover {
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-card));
  color: var(--cta-text-hover);
  border-color: var(--accent-primary);
}

html[data-theme="obsidian-lux"] .btn-danger,
html[data-theme="obsidian-lux"] .saas-btn-danger {
  background: color-mix(in srgb, var(--danger) 18%, var(--bg-card));
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border-primary));
  box-shadow: none;
  text-shadow: none;
}

html[data-theme="obsidian-lux"] .btn-danger:hover,
html[data-theme="obsidian-lux"] .saas-btn-danger:hover {
  background: color-mix(in srgb, var(--danger) 28%, var(--bg-card));
  color: #fecaca;
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border-primary));
}

/* success/info solo cuando actúan como CTA principal */
html[data-theme="obsidian-lux"] .btn-success.btn-primary,
html[data-theme="obsidian-lux"] .btn-info.btn-primary {
  background: linear-gradient(145deg, #0f141c 0%, var(--bg-card) 55%, #121a26 100%);
  color: var(--cta-text);
  font-weight: 600;
  text-shadow: var(--cta-text-shadow);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 52%, var(--border-primary));
}

html[data-theme="obsidian-lux"] .crud-btn-salir {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  box-shadow: none;
  text-shadow: none;
}

html[data-theme="obsidian-lux"] .crud-btn-salir:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}