/**
 * Admin ERP — shell de contenido global (gutters + ancho máximo unificado).
 * Fuente única de verdad: sidebar (.admin-main) + módulos iframe/página directa.
 * No añadir max-width por módulo; usar --admin-content-max o .admin-content--narrow (opt-in).
 */

:root {
  --admin-sidebar-width: 260px;
  --admin-shell-gutter-x: clamp(1.25rem, 2.4vw, 2.25rem);
  --admin-shell-gutter-y: clamp(1rem, 1.8vh, 1.65rem);
  --admin-module-gutter-x: clamp(1.125rem, 2.6vw, 2rem);
  --admin-module-gutter-y: clamp(0.95rem, 1.6vh, 1.45rem);
  /* Ancho premium unificado (referencia: panel citas / dashboard ancho) */
  --admin-content-max: min(1680px, 100%);
  --admin-content-wide-max: var(--admin-content-max);
  --admin-content-narrow-max: var(--admin-content-max);
}

/* —— Shell maestro (index.php + sidebar) —— */
.admin-app .admin-main {
  flex: 1;
  min-width: 0;
  margin-left: var(--admin-sidebar-width);
  padding:
    var(--admin-shell-gutter-y)
    var(--admin-shell-gutter-x)
    calc(var(--admin-shell-gutter-y) + 0.35rem);
  padding-left: max(var(--admin-shell-gutter-x), 1.65rem);
  box-sizing: border-box;
}

.admin-app .admin-topbar {
  margin-bottom: clamp(0.85rem, 1.2vw, 1.15rem);
}

.admin-app .admin-iframe-wrap {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  box-sizing: border-box;
}

/* —— Módulos ERP (iframe o página directa): mismo gutter —— */
body.belleza-admin-module,
body.crud-admin-saas,
body.reportes-dashboard-saas,
body.cfg-admin-page,
body.facturar-admin-saas,
body.disponibilidad-admin-page,
body.usuarios-admin-saas,
body.gastos-admin-saas,
body.caja-diaria-saas,
body.historial-pagos-saas,
body.libro-caja-saas,
body.productos-admin-saas,
body.empleados-admin-saas,
body.clientes-admin-saas,
body.servicios-admin-saas,
body.sucursales-admin-saas,
body.roles-admin-saas,
body.audit-ops-panel,
body:has(#panelCitasTable),
body:has(.header-panel),
body:has(> .admin-content) {
  box-sizing: border-box;
  min-height: 100vh;
  padding:
    var(--admin-module-gutter-y)
    var(--admin-module-gutter-x)
    calc(var(--admin-module-gutter-y) + 0.5rem);
}

/*
 * Contenedor raíz único — todos los módulos comparten el mismo techo de ancho.
 * Selectores con tema/superficie para ganar a reglas legacy por módulo (carga al final del head).
 */
html[data-theme="obsidian-lux"] body.crud-admin-saas > [class$="-wrap"],
html[data-belleza-surface="light"] body.crud-admin-saas > [class$="-wrap"],
body.crud-admin-saas > [class$="-wrap"],
html[data-theme="obsidian-lux"] body.reportes-dashboard-saas > .container,
html[data-belleza-surface="light"] body.reportes-dashboard-saas > .container,
body.reportes-dashboard-saas > .container,
body.reportes-dashboard-saas > .reportes-dashboard-container,
body.reportes-dashboard-saas .reportes-dashboard-container,
body.cfg-admin-page > .cfg-wrap,
body.cfg-admin-page > .container,
body:has(#panelCitasTable) > .container-fluid,
body:has(.header-panel) > .container-fluid,
body.belleza-admin-module > .container-fluid,
body.facturar-admin-saas > .container,
body.facturar-admin-saas > .container-fluid,
body.facturar-admin-saas > .facturar-pos-page,
body.facturar-admin-saas > [class$="-wrap"],
body.disponibilidad-admin-page > .container-fluid,
body > .admin-content,
body > .admin-content-shell,
body.belleza-admin-module > .admin-content,
body.belleza-admin-module .admin-content [class$="-wrap"],
body.belleza-admin-module .admin-content .pay-wrap,
body.belleza-admin-module .admin-content .hist-wrap,
body > .panel-container,
body > .dashboard-content,
body > .content-wrapper,
body > .page-container,
body > .module-wrapper,
body > .dashboard-wrapper,
body > .content-area {
  width: 100%;
  max-width: var(--admin-content-max);
  margin-inline: auto;
  box-sizing: border-box;
}

/* Anular max-width inline legacy en módulos belleza-admin-module (p. ej. pagos, historial) */
body.belleza-admin-module .admin-content [class$="-wrap"],
body.belleza-admin-module .admin-content .pay-wrap,
body.belleza-admin-module .admin-content .hist-wrap,
body.reportes-dashboard-saas .preview-comprobante-wrap {
  max-width: var(--admin-content-max) !important;
}

/* Opt-in: vistas de lectura estrecha (login, previews puntuales) */
body.admin-content--narrow > .container,
body.admin-content--narrow > [class$="-wrap"],
body.admin-content--narrow > .admin-content {
  max-width: min(1120px, 100%);
}

/* Bootstrap: evitar doble gutter + techo del .container del framework */
body:has(> .container-fluid) > .container-fluid,
body.reportes-dashboard-saas > .container {
  padding-left: 0;
  padding-right: 0;
}

body.reportes-dashboard-saas > .container {
  max-width: var(--admin-content-max);
}

/* Top bars CRUD: el body ya aporta gutter horizontal */
.crud-admin-saas [class$="-top-bar"] {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: clamp(0.65rem, 1vw, 1rem);
}

/* Formularios y tablas: usar ancho disponible (no “modal estrecho”) */
.crud-admin-saas .saas-card,
.crud-admin-saas .saas-card .saas-card-body,
.crud-admin-saas form,
.crud-admin-saas .table-responsive,
.reportes-dashboard-saas .chart-card,
.reportes-dashboard-saas .table-responsive,
.cfg-admin-page .cfg-section,
.cfg-admin-page .cfg-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.crud-admin-saas .table.saas-table,
.crud-admin-saas .table-admin-standard,
.reportes-dashboard-saas .table {
  width: 100%;
}

/* Cards / stacks: ritmo vertical uniforme */
.admin-content-shell,
.panel-stack,
.saas-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.5vw, 1.5rem);
}

/* Ultra wide */
@media (min-width: 1600px) {
  :root {
    --admin-shell-gutter-x: 2.5rem;
    --admin-module-gutter-x: 2.35rem;
  }
}

@media (min-width: 1920px) {
  :root {
    --admin-content-max: min(1760px, 100%);
    --admin-content-wide-max: var(--admin-content-max);
    --admin-content-narrow-max: var(--admin-content-max);
  }
}

/* Tablet / móvil */
@media (max-width: 991.98px) {
  :root {
    --admin-shell-gutter-x: 1rem;
    --admin-module-gutter-x: 1rem;
    --admin-shell-gutter-y: 0.9rem;
    --admin-module-gutter-y: 0.85rem;
  }

  .admin-app .admin-main {
    margin-left: 0;
    padding:
      var(--admin-shell-gutter-y)
      var(--admin-shell-gutter-x)
      calc(var(--admin-shell-gutter-y) + 0.35rem) !important;
    padding-left: var(--admin-shell-gutter-x) !important;
  }

  .admin-app .admin-sidebar {
    width: 100%;
    position: relative;
    inset: auto;
  }
}

@media (max-width: 575.98px) {
  :root {
    --admin-shell-gutter-x: 0.85rem;
    --admin-module-gutter-x: 0.8rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .admin-app .admin-main,
  body.crud-admin-saas,
  body.reportes-dashboard-saas {
    transition: padding 0.2s ease;
  }
}

/* =============================================================================
   Reportes PDF — anti-blanco (última capa; ref. bellezza-cal-emp-btn panel citas)
   Solo: hero botones, tabs toolbar, badges catálogo/toolbar
   ============================================================================= */
html body.reportes-premium-saas.reportes-dashboard-saas .reportes-premium-hero a.btn.btn-light,
html body.reportes-premium-saas.reportes-dashboard-saas .reportes-premium-hero a.btn.btn-outline-light,
html body.reportes-premium-saas .reportes-premium-hero a.btn.btn-light,
html body.reportes-premium-saas .reportes-premium-hero a.btn.btn-outline-light {
  --bs-btn-bg: #222d3d !important;
  --bs-btn-border-color: #2a3544 !important;
  --bs-btn-color: #cbd5e1 !important;
  --bs-btn-hover-bg: #1a2332 !important;
  --bs-btn-hover-border-color: rgba(148, 163, 184, 0.28) !important;
  --bs-btn-hover-color: #f1f5f9 !important;
  --bs-btn-active-bg: #1a2332 !important;
  --bs-btn-active-color: #f1f5f9 !important;
  background-color: #222d3d !important;
  background-image: none !important;
  color: #cbd5e1 !important;
  border: 1px solid #2a3544 !important;
  box-shadow: none !important;
}

html body.reportes-premium-saas.reportes-dashboard-saas .reportes-premium-toolbar a.reportes-premium-tab,
html body.reportes-premium-saas .reportes-premium-toolbar a.reportes-premium-tab {
  --bs-btn-bg: transparent !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  background-image: none !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

html body.reportes-premium-saas.reportes-dashboard-saas .reportes-premium-toolbar a.reportes-premium-tab:hover,
html body.reportes-premium-saas .reportes-premium-toolbar a.reportes-premium-tab:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: color-mix(in srgb, #c4a574 35%, rgba(255, 255, 255, 0.12)) !important;
  color: #f1f5f9 !important;
}

html body.reportes-premium-saas.reportes-dashboard-saas .reportes-premium-toolbar a.reportes-premium-tab.is-active,
html body.reportes-premium-saas .reportes-premium-toolbar a.reportes-premium-tab.is-active {
  background: color-mix(in srgb, #c4a574 18%, rgba(255, 255, 255, 0.06)) !important;
  background-color: color-mix(in srgb, #c4a574 18%, rgba(255, 255, 255, 0.06)) !important;
  border-color: color-mix(in srgb, #c4a574 55%, transparent) !important;
  color: #f1f5f9 !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, #c4a574 22%, transparent),
    0 8px 22px color-mix(in srgb, #000 28%, transparent) !important;
}

html body.reportes-premium-saas .report-card-premium .badge,
html body.reportes-premium-saas .reportes-premium-toolbar .badge {
  --bs-light-rgb: 34, 45, 61 !important;
  --bs-secondary-rgb: 34, 45, 61 !important;
  --bs-success-rgb: 34, 45, 61 !important;
  --bs-warning-rgb: 34, 45, 61 !important;
  --bs-primary-rgb: 34, 45, 61 !important;
  --bs-bg-opacity: 1 !important;
  background-color: #222d3d !important;
  background-image: none !important;
  color: #cbd5e1 !important;
  border: 1px solid #2a3544 !important;
}

html body.reportes-premium-saas .report-card-premium .badge.text-bg-light,
html body.reportes-premium-saas .report-card-premium .badge.text-bg-light.text-dark,
html body.reportes-premium-saas .report-card-premium .badge.rounded-pill.text-bg-light {
  background-color: #222d3d !important;
  color: #cbd5e1 !important;
}

html body.reportes-premium-saas .report-card-premium .badge.text-bg-success,
html body.reportes-premium-saas .report-card-premium .badge.text-bg-warning,
html body.reportes-premium-saas .report-card-premium .badge.text-bg-warning.text-dark,
html body.reportes-premium-saas .reportes-premium-toolbar .badge.text-bg-success,
html body.reportes-premium-saas .reportes-premium-toolbar .badge.text-bg-secondary,
html body.reportes-premium-saas .reportes-premium-toolbar .badge.text-bg-primary {
  background-color: color-mix(in srgb, #c4a574 18%, #1a2332) !important;
  color: #e2e8f0 !important;
  border-color: color-mix(in srgb, #c4a574 32%, #2a3544) !important;
}

/* Barras de título workspace — filtros del reporte + vista previa (no iframe) */
html body.reportes-premium-saas .reportes-premium-filters > .card-header,
html body.reportes-premium-saas .reportes-premium-preview-card > .card-header {
  --bs-card-cap-bg: #1a2332 !important;
  background-color: #1a2332 !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
  color: #f1f5f9 !important;
}

html body.reportes-premium-saas .reportes-premium-filters > .card-header .fw-semibold,
html body.reportes-premium-saas .reportes-premium-filters > .card-header span,
html body.reportes-premium-saas .reportes-premium-preview-card > .card-header .fw-semibold,
html body.reportes-premium-saas .reportes-premium-preview-card > .card-header span {
  color: #f1f5f9 !important;
}

html body.reportes-premium-saas .reportes-premium-preview-card > .card-header .text-muted {
  color: #94a3b8 !important;
}

html body.reportes-premium-saas .reportes-premium-filters > .card-header .badge,
html body.reportes-premium-saas .reportes-premium-preview-card > .card-header .badge {
  --bs-light-rgb: 34, 45, 61 !important;
  --bs-secondary-rgb: 34, 45, 61 !important;
  background-color: #222d3d !important;
  background-image: none !important;
  color: #cbd5e1 !important;
  border: 1px solid #2a3544 !important;
}

html body.reportes-premium-saas .reportes-premium-preview-card > .card-header .btn-link {
  color: #94a3b8 !important;
}

html body.reportes-premium-saas .reportes-premium-preview-card > .card-header .btn-link:hover {
  color: #f1f5f9 !important;
}