/**
 * Obsidian Lux — tokens + shell
 * @layer theme
 */

html[data-theme="obsidian-lux"] {
  color-scheme: dark;

  --bg-main: #0c1118;
  --bg-surface: #141b26;
  --bg-card: #1a2332;
  --bg-card-hover: #222d3d;
  --bg-elevated: #1e293b;
  --bg-input: #121a26;

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --olx-bg: var(--bg-main);
  --olx-surface: var(--bg-surface);
  --olx-card: var(--bg-card);
  --olx-text: var(--text-primary);
  --olx-text-secondary: var(--text-secondary);
  --olx-muted: var(--text-muted);
  --olx-border: var(--border-primary);

  /* Alias institucionales unificados (Theme Engine — única fuente de superficies) */
  --surface-card: var(--bg-card);
  --surface-secondary: var(--bg-surface);
  --surface-hover: var(--bg-card-hover);
  --input-bg: var(--bg-input);
  --border-color: var(--border-primary);

  --border-primary: rgba(148, 163, 184, 0.18);
  --border-strong: rgba(148, 163, 184, 0.28);

  --accent-primary: #c4a574;
  --accent-hover: #d4b896;
  --accent-brand: #c4a574;

  --cta-text: #ff5c7a;
  --cta-text-hover: #ff6d88;
  --cta-text-shadow: 0 0 6px rgba(255, 77, 109, 0.35), 0 1px 2px rgba(0, 0, 0, 0.28);
  --cta-text-shadow-hover: 0 0 10px rgba(255, 77, 109, 0.45), 0 1px 2px rgba(0, 0, 0, 0.32);

  --success: #6ee7a8;
  --warning: #94a3b8;
  --danger: #f0a8a8;

  --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.32);
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.32);
  --radius-lg: 18px;
  --radius-md: 12px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 28%, transparent);

  /* Bootstrap 5 — solo dentro del tema */
  --bs-body-bg: var(--bg-main);
  --bs-body-color: var(--text-secondary);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-color: var(--text-muted);
  --bs-border-color: var(--border-primary);
  --bs-link-color: var(--accent-primary);
  --bs-link-hover-color: var(--accent-hover);
  --bs-heading-color: var(--text-primary);

  /* Tokens "subtle/emphasis" de Bootstrap 5.3: las utilidades .bg-*-subtle y
     .text-*-emphasis aplican estas variables con !important. Sin remapearlas
     conservan el valor claro por defecto (#e2e3e5) y pintan el badge en blanco. */
  --bs-secondary-bg-subtle: var(--bg-elevated);
  --bs-secondary-text-emphasis: var(--text-secondary);
  --bs-light-bg-subtle: var(--bg-elevated);

  /* SaaS components — alias interno del tema */
  --saas-comp-text: var(--text-secondary);
  --saas-comp-text-muted: var(--text-muted);
  --saas-comp-surface: var(--bg-card);
  --saas-comp-border: var(--border-primary);
  --saas-comp-border-strong: var(--border-strong);
  --saas-comp-focus-ring: color-mix(in srgb, var(--accent-primary) 32%, transparent);

  --fc-event-bg: var(--accent-primary);
}

html[data-theme="obsidian-lux"] body {
  background-color: var(--bg-main);
  color: var(--text-secondary);
}

html[data-theme="obsidian-lux"] h1,
html[data-theme="obsidian-lux"] h2,
html[data-theme="obsidian-lux"] h3,
html[data-theme="obsidian-lux"] h4,
html[data-theme="obsidian-lux"] h5,
html[data-theme="obsidian-lux"] h6,
html[data-theme="obsidian-lux"] .saas-page-title,
html[data-theme="obsidian-lux"] .reportes-page-title {
  color: var(--text-primary);
}

html[data-theme="obsidian-lux"] .text-muted {
  color: var(--olx-muted);
}

html[data-theme="obsidian-lux"] .text-secondary {
  color: var(--olx-text-secondary);
}

html[data-theme="obsidian-lux"] .text-dark,
html[data-theme="obsidian-lux"] .text-body {
  color: var(--olx-text);
}

html[data-theme="obsidian-lux"] a:not(.btn):not(.badge):not(.admin-nav-item):not(.page-link) {
  color: var(--accent-hover);
}

html[data-theme="obsidian-lux"] a:not(.btn):hover {
  color: var(--accent-hover);
}

html[data-theme="obsidian-lux"] hr,
html[data-theme="obsidian-lux"] .dropdown-divider {
  border-color: var(--border-primary);
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas {
  background-color: var(--bg-main);
}

/* —— Shell index (topbar / iframe) —— */
html[data-theme="obsidian-lux"] .admin-app .admin-main {
  background: var(--bg-main);
}

html[data-theme="obsidian-lux"] .admin-app .admin-topbar {
  margin-bottom: 14px;
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas .reportes-page-header {
  margin-bottom: 1.75rem;
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas .reportes-page-header .reportes-page-title {
  color: var(--olx-text);
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas .reportes-page-title > i {
  color: var(--cta-text);
  text-shadow: var(--cta-text-shadow);
}

/* —— Finanzas: layout (sustituye admin-design-system en oscuro) —— */
html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 1.875rem);
  margin-top: 1.5rem;
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-layout--compact {
  margin-top: 0;
  gap: clamp(1rem, 2vw, 1.5rem);
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-top-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-top-kpis--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-top-kpis--caja {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.8vw, 32px);
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-top-kpis .reportes-kpi-card {
  padding: clamp(22px, 3vw, 30px) clamp(20px, 2.5vw, 28px);
  border-radius: var(--radius-lg);
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-top-kpis--caja .reportes-kpi-card {
  padding: clamp(26px, 3.4vw, 36px) clamp(24px, 3vw, 34px);
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-secondary-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-bottom-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
}

@media (max-width: 991.98px) {
  html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-top-kpis,
  html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-top-kpis--caja,
  html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-bottom-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-secondary-charts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-top-kpis,
  html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-top-kpis--pair,
  html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-top-kpis--caja,
  html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-bottom-kpis {
    grid-template-columns: 1fr;
  }
}

/* —— Finanzas / reportes: cards premium (no productos) —— */
html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-kpi-card,
html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .chart-card,
html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-filter-card.card {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg-elevated) 40%, var(--bg-card)) 0%,
    var(--bg-card) 52%,
    color-mix(in srgb, var(--bg-main) 32%, var(--bg-card)) 100%
  );
  border: 1px solid var(--border-primary);
  box-shadow:
    var(--shadow-soft),
    0 0 0 1px color-mix(in srgb, var(--accent-primary) 9%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-kpi-card:hover,
html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .chart-card:hover {
  background: var(--bg-card-hover);
  box-shadow:
    0 14px 36px color-mix(in srgb, #000 42%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent-primary) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 7%, transparent);
}

/* Facturar — acento decorativo sin azul/violeta */
html[data-theme="obsidian-lux"] body.facturar-admin-saas .pos-cart-header::before {
  background: linear-gradient(180deg, var(--accent-primary), var(--accent-hover));
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .chart-card {
  padding: clamp(1.25rem, 2.5vw, 1.5rem);
  border-radius: var(--radius-lg);
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-kpi-card {
  border-radius: var(--radius-lg);
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-kpi-card--accent-info {
  border-top: 3px solid color-mix(in srgb, var(--accent-primary) 55%, var(--border-primary));
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-kpi-card--accent-success {
  border-top: 3px solid color-mix(in srgb, var(--accent-primary) 50%, var(--border-primary));
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-kpi-card--accent-danger {
  border-top: 3px solid color-mix(in srgb, var(--danger) 55%, var(--border-primary));
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-kpi-card--accent-distribution {
  border-top: 3px solid var(--border-strong);
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .chart-card-title {
  color: var(--olx-text);
  font-weight: 700;
  margin-bottom: 1rem;
}

/* —— Reportes: charts enterprise (legacy) —— */
html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-charts-enterprise .chart-card-body-zone--compact {
  min-height: 188px;
  max-height: none;
  height: clamp(188px, 22vw, 220px);
  overflow: hidden;
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-charts-enterprise .chart-card-body-zone--featured {
  min-height: 300px;
  max-height: none;
  height: clamp(300px, 40vw, 420px);
  overflow: hidden;
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-charts-enterprise .chart-card-body-zone--metodos {
  min-height: 280px;
  max-height: none;
  height: clamp(280px, 36vw, 380px);
  overflow: hidden;
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-charts-enterprise .chart-card-body-zone canvas {
  display: block;
  max-width: 100%;
  max-height: none;
  width: 100%;
  height: 100%;
}

/* —— Reportes: charts contenidos (facturas / legacy fallback) —— */
html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .chart-card-body-zone {
  position: relative;
  min-height: 200px;
  max-height: 300px;
  overflow: hidden;
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-main-chart .chart-card-body-zone {
  min-height: 240px;
  max-height: 320px;
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-secondary-charts .chart-card-body-zone {
  min-height: 200px;
  max-height: 260px;
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-secondary-charts--facturas .chart-card-body-zone {
  min-height: 220px;
  max-height: 280px;
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .chart-card:not(.chart-card--metodos-pago) .chart-card-body-zone canvas {
  display: block;
  max-width: 100%;
  max-height: 280px;
  width: 100%;
  height: auto;
}

/* Métodos de pago — legacy fuera de enterprise grid */
html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-chart-metodos-row:not(.reportes-charts-row--metodos) {
  display: flex;
  justify-content: center;
  width: 100%;
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-chart-metodos-row:not(.reportes-charts-row--metodos) .chart-card--metodos-pago {
  width: 100%;
  max-width: min(100%, 460px);
  margin-inline: auto;
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-chart-metodos-row:not(.reportes-charts-row--metodos) .chart-card--metodos-pago .chart-card-body-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  max-height: 252px;
  padding: 0.5rem 0.75rem;
  overflow: hidden;
}

html[data-theme="obsidian-lux"] body.reportes-dashboard-saas:not(.productos-admin-saas) .reportes-chart-metodos-row:not(.reportes-charts-row--metodos) .chart-card--metodos-pago .chart-card-body-zone canvas {
  display: block;
  width: auto;
  max-width: min(100%, 300px);
  max-height: 220px;
  height: auto;
  margin: 0 auto;
}