/**
 * DS-2 — Primitivas UI admin (aliases transicionales + KPI base).
 * Sin rediseño: reutiliza tokens --saas-* definidos en saas-components.css.
 * Oficial: .saas-card, .saas-table, .saas-btn, .saas-badge, .saas-input|select|label
 */

/* =========================================================
   A. KPI — base compartida (shell neutro)
   .reportes-kpi-card → familia slate (finanzas)
   .dashboard-card → shell propio en panel-citas.css (rosa/periodos)
========================================================= */

.saas-kpi-card-base,
.reportes-kpi-card {
  box-sizing: border-box;
  border-radius: var(--saas-comp-radius-xl, 18px);
  padding: 22px 24px;
  min-height: 100%;
}

/* KPI shell visual: ds-primitives-skin-light.css */

/* Panel citas: solo ritmo estructural (visual intacto en panel-citas.css) */
.dashboard-card {
  box-sizing: border-box;
}

.saas-kpi-head,
.reportes-kpi-card-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.4rem;
}

.saas-kpi-head .saas-kpi-label,
.saas-kpi-head .reportes-kpi-label,
.reportes-kpi-card-head .reportes-kpi-label {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}

/* =========================================================
   B. CARD — aliases transición
   Oficial: .saas-card | .saas-card-premium
   Alias: .card-standard (admin-unified-saas), .card-panel (CRUD)
========================================================= */

.card-standard {
  /* alias documentado — estilos en admin-unified-saas.css */
}

/* DS-5: .card-panel = alias transición oficial de .saas-card */
.card-panel:not(.saas-card) {
  margin-bottom: 1.25rem;
  border-radius: 15px;
  padding: 1.25rem 1.5rem;
}

.card-panel.saas-card {
  margin-bottom: 1.25rem;
}

.reportes-filter-card {
  /* alias de .saas-card en reportes — shell en admin-design-system.css */
}

/* =========================================================
   C. TABLE — aliases transición
   Oficial: .saas-table
   Alias: .table-standard, .table-admin-standard (unified)
   Legacy: .table-card (panel citas — thead rosa en panel-citas.css)
========================================================= */

.table-standard,
.table-admin-standard {
  /* alias — estilos en admin-unified-saas.css */
}

/* DS-5: tablas CRUD — compuesto oficial Bootstrap + SaaS */
.crud-admin-saas .table.saas-table,
.crud-admin-saas .table-standard.saas-table,
.crud-admin-saas .table-admin-standard.saas-table {
  margin-bottom: 0;
}

.crud-admin-saas .table.saas-table thead th {
  vertical-align: middle;
}

.crud-admin-saas .table.saas-table tbody td {
  vertical-align: middle;
}

.table-card > .table,
.table-card .table {
  margin-bottom: 0;
}

/* No aplicar thead slate a .table-card (panel citas usa thead --primary) */

/* =========================================================
   D. BUTTON — aliases
   Oficial: .saas-btn (+ variantes)
   Alias: .btn + .reportes-btn-pill | Bootstrap .btn-primary (head override)
========================================================= */

/* .reportes-btn-pill → admin-design-system.css (alias de .saas-btn pill) */

/* =========================================================
   E. BADGE — aliases
   Oficial: .saas-badge | .saas-pill
   Legacy dominio: .badge-pendiente|realizado|cancelado (panel-citas.css)
========================================================= */

.badge.saas-badge {
  /* coexistencia Bootstrap + SaaS */
}

/* =========================================================
   F. FORM — aliases
   Oficial: .saas-input, .saas-select, .saas-label
   Transición: .form-control.saas-input, .form-select.saas-select
========================================================= */

.form-control.saas-input,
.form-select.saas-select,
.form-label.saas-label {
  /* capa SaaS sobre Bootstrap — reglas en saas-components.css */
}

/* =========================================================
   DS-3 — CRUD admin (clientes, productos)
   Visual bloqueado por scope; sin tocar panel-citas / facturar
========================================================= */

/* —— Clientes —— */
.clientes-admin-saas .clientes-top-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Visual módulos: ds-primitives-skin-light.css — solo modo claro */

/* =========================================================
   DS-5 — Header + botón «Salir» estándar (referencia: Empleados)
========================================================= */

.crud-admin-saas [class$="-top-bar"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 1rem 0.65rem 1.15rem;
  margin-bottom: 0.25rem;
}

.crud-admin-saas [class$="-top-bar"] > .saas-page-title,
.crud-admin-saas [class$="-top-bar__lead"] {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0.2rem;
}

.crud-admin-saas [class$="-top-bar"] .saas-page-title {
  font-size: 1.35rem;
  margin: 0;
  font-weight: 700;
}

.crud-admin-saas [class$="-top-bar"] .saas-page-title i {
  margin-right: 0.55rem;
}

.crud-admin-saas .crud-top-bar__actions {
  margin-left: auto;
  flex: 0 0 auto;
  align-self: center;
  padding-top: 0.15rem;
  padding-right: 0.2rem;
}

.crud-admin-saas a.crud-btn-salir {
  min-width: 8.25rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.5rem;
  font-weight: 600;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

@media (max-width: 575.98px) {
  .crud-admin-saas [class$="-top-bar"] {
    padding: 0.45rem 0.5rem 0.55rem 0.65rem;
  }

  .crud-admin-saas .crud-top-bar__actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-right: 0.35rem;
  }

  .crud-admin-saas a.crud-btn-salir {
    min-width: 7rem;
    max-width: 100%;
  }
}