/**
 * Obsidian Lux — puente visual sitio público (nosotros / section-content)
 */

html[data-theme="obsidian-lux"] body.crud-admin-saas,
html[data-theme="obsidian-lux"] body.reportes-dashboard-saas,
html[data-theme="obsidian-lux"] body.facturar-admin-saas,
html[data-theme="obsidian-lux"] body.usuarios-admin-saas {
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--accent-primary) 12%, transparent), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--accent-brand, var(--accent-primary)) 8%, transparent), transparent 50%),
    linear-gradient(165deg, var(--bg-surface) 0%, var(--bg-main) 48%, #080b10 100%) !important;
  color: var(--text-secondary);
}

html[data-theme="obsidian-lux"] .crud-admin-saas [class$="-top-bar"],
html[data-theme="obsidian-lux"] .productos-top-bar,
html[data-theme="obsidian-lux"] body.reportes-dashboard-saas .reportes-page-header,
html[data-theme="obsidian-lux"] body.reportes-dashboard-saas .productos-top-bar {
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-card) 100%) !important;
  border: 1px solid var(--border-primary) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="obsidian-lux"] .crud-admin-saas [class$="-top-bar"] .saas-page-title,
html[data-theme="obsidian-lux"] .productos-top-bar .saas-page-title {
  color: var(--text-primary) !important;
}

/* Cards estilo section-content Nosotros */
html[data-theme="obsidian-lux"] .saas-card,
html[data-theme="obsidian-lux"] .card-panel,
html[data-theme="obsidian-lux"] .crud-admin-saas .card-panel.saas-card,
html[data-theme="obsidian-lux"] .reportes-kpi-card,
html[data-theme="obsidian-lux"] .chart-card {
  background: rgba(12, 17, 24, 0.55) !important;
  border: 1px solid rgba(42, 53, 68, 0.48) !important;
  box-shadow: 0 0 0 1px rgba(196, 165, 116, 0.07), 0 10px 36px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html[data-theme="obsidian-lux"] body.crud-admin-saas .form-label,
html[data-theme="obsidian-lux"] body.crud-admin-saas label:not(.btn),
html[data-theme="obsidian-lux"] body.cfg-admin-page label,
html[data-theme="obsidian-lux"] body.cfg-admin-page .cfg-social-brand__name,
html[data-theme="obsidian-lux"] body.cfg-admin-page .cfg-theme-card__name {
  color: var(--text-primary) !important;
}

html[data-theme="obsidian-lux"] body.crud-admin-saas .form-control::placeholder,
html[data-theme="obsidian-lux"] body.cfg-admin-page .form-control::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

/* CTA principal */
html[data-theme="obsidian-lux"] .btn-primary,
html[data-theme="obsidian-lux"] .saas-btn-primary,
html[data-theme="obsidian-lux"] .reportes-btn-pill.btn-primary,
html[data-theme="obsidian-lux"] button.btn-enviar,
html[data-theme="obsidian-lux"] button.btn-booking-submit,
html[data-theme="obsidian-lux"] body.facturar-admin-saas .btn-facturar {
  background: linear-gradient(145deg, #0f141c 0%, var(--bg-card) 55%, #121a26 100%) !important;
  color: var(--cta-text) !important;
  font-weight: 600 !important;
  text-shadow: var(--cta-text-shadow) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 52%, var(--border-primary)) !important;
  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) !important;
}

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,
html[data-theme="obsidian-lux"] .reportes-btn-pill.btn-primary:hover,
html[data-theme="obsidian-lux"] button.btn-enviar:hover,
html[data-theme="obsidian-lux"] body.facturar-admin-saas .btn-facturar:hover {
  background: linear-gradient(145deg, #121a26 0%, var(--bg-card-hover) 100%) !important;
  color: var(--cta-text-hover) !important;
  text-shadow: var(--cta-text-shadow-hover) !important;
  filter: none !important;
  border-color: color-mix(in srgb, var(--accent-hover) 62%, var(--border-primary)) !important;
  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) !important;
}

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

html[data-theme="obsidian-lux"] .form-control:focus,
html[data-theme="obsidian-lux"] .form-select:focus,
html[data-theme="obsidian-lux"] textarea.form-control:focus,
html[data-theme="obsidian-lux"] .saas-input:focus,
html[data-theme="obsidian-lux"] .saas-select:focus {
  border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-strong)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
}

html[data-theme="obsidian-lux"] .table thead th,
html[data-theme="obsidian-lux"] .saas-table thead th {
  background-color: color-mix(in srgb, var(--bg-elevated) 85%, var(--bg-card)) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}