/* ==========================================================================
   konecia · DevExpress.Blazor (Fluent theme) — brand-kit overrides
   Pisa las variables --dxbl-* públicas para alinear DxGrid/DxFormLayout/etc.
   con la identidad konecia (paleta ink/bone/lime/emerald + Geist).
   Solo variables documentadas como tokens públicos del Fluent theme.
   ========================================================================== */

:root {
  /* Tipografía — Geist en lugar del default del theme */
  --dxbl-font-family: var(--kc-font-sans);
  --dxbl-font-size: var(--kc-text-base);

  /* Surfaces */
  --dxbl-page-bg: var(--kc-bg);
  --dxbl-panel-bg: var(--kc-bg-elevated);
  --dxbl-panel-secondary-bg: var(--kc-bg-muted);

  /* Border */
  --dxbl-border-color: var(--kc-border);

  /* Texto */
  --dxbl-text-color: var(--kc-fg);
  --dxbl-secondary-text-color: var(--kc-fg-muted);

  /* Accent — emerald en light por brand kit */
  --dxbl-accent: var(--kc-color-emerald);
  --dxbl-accent-fg: var(--kc-accent-fg);
  --dxbl-accent-hover: var(--kc-color-emerald-2);

  /* Radio coherente con resto del sistema */
  --dxbl-border-radius: var(--kc-radius-sm);
}

:root[data-theme="dark"] {
  /* En dark, accent pasa a lime (igual que el resto del sistema) */
  --dxbl-accent: var(--kc-color-lime);
  --dxbl-accent-fg: var(--kc-color-ink);
  --dxbl-accent-hover: var(--kc-color-lime-2);
}

/* Combos en toolbar de DxGrid: ancho consistente y misma altura que SearchBox */
.kc-toolbar-combo {
  min-width: 200px;
}

/* Dashboard: charts en dos columnas, igual gap que kpi-grid */
.dashboard-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kc-space-4);
  margin-top: var(--kc-space-6);
}
@media (max-width: 1024px) {
  .dashboard-charts { grid-template-columns: 1fr; }
}

.kc-chart {
  font-family: var(--kc-font-sans);
}

/* DxGrid — afinar densidad y bordes para que combine con el resto del card */
.dxbl-grid {
  font-family: var(--kc-font-sans);
}

.dxbl-grid .dxbl-grid-header-row,
.dxbl-grid .dxbl-grid-header-content {
  font-family: var(--kc-font-mono);
  font-size: var(--kc-text-xs);
  letter-spacing: var(--kc-tracking-mono);
  text-transform: uppercase;
  color: var(--kc-fg-muted);
}

/* ============================================================================
   DxGrid · PopupEditForm — overrides brand kit
   El popup default es angosto (~520px) y los botones Save/Cancel salen con el
   azul Fluent. Lo ensanchamos a 720px (suficiente para 2 columnas LG con
   inputs respirando) y forzamos los botones a emerald + ink del brand kit.
   ============================================================================ */

.dxbl-popup.kc-edit-popup,
.kc-edit-popup .dxbl-popup-window {
  min-width: 560px;
  width: 720px;
  max-width: calc(100vw - 32px);
}

.kc-edit-popup .dxbl-popup-header {
  font-family: var(--kc-font-sans);
  font-weight: var(--kc-weight-semibold);
  letter-spacing: -0.01em;
  font-size: 17px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--kc-border);
  color: var(--kc-fg);
}

.kc-edit-popup .dxbl-popup-content {
  padding: 22px 24px;
}

/* Form layout dentro del popup — más espacio entre rows, label legible */
.kc-edit-popup .kc-edit-form .dxbl-form-layout-item,
.kc-edit-popup .kc-edit-form .dxbl-form-layout-row {
  margin-bottom: 14px;
}

.kc-edit-popup .kc-edit-form .dxbl-form-layout-caption {
  font-family: var(--kc-font-mono);
  font-size: var(--kc-text-xs);
  letter-spacing: var(--kc-tracking-mono);
  text-transform: uppercase;
  font-weight: var(--kc-weight-semibold);
  color: var(--kc-fg-muted);
  padding-bottom: 4px;
}

/* Inputs internos: alturas/border consistentes con el brand kit */
.kc-edit-popup .dxbl-edit-control,
.kc-edit-popup input.dxbl-edit-input {
  border-radius: var(--kc-radius-md);
  border-color: var(--kc-border);
  font-family: var(--kc-font-sans);
}
.kc-edit-popup .dxbl-edit-control:focus-within,
.kc-edit-popup input.dxbl-edit-input:focus {
  border-color: var(--kc-color-emerald) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}

/* Footer + botones — emerald primario, ghost secundario */
.kc-edit-popup .dxbl-popup-footer {
  padding: 14px 22px 18px;
  border-top: 1px solid var(--kc-border);
  background: var(--kc-bg-elevated);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.kc-edit-popup .dxbl-popup-footer .dxbl-btn,
.kc-edit-popup .dxbl-popup-footer button.dxbl-btn {
  font-family: var(--kc-font-sans);
  font-weight: var(--kc-weight-semibold);
  font-size: 13.5px;
  border-radius: var(--kc-radius-pill);
  padding: 9px 20px;
  border: 1px solid transparent;
  letter-spacing: -0.005em;
  transition: background 120ms cubic-bezier(0.2, 0, 0, 1),
              border-color 120ms cubic-bezier(0.2, 0, 0, 1),
              transform 80ms cubic-bezier(0.2, 0, 0, 1);
}

/* Save (primary) — emerald sólido */
.kc-edit-popup .dxbl-popup-footer .dxbl-btn-primary,
.kc-edit-popup .dxbl-popup-footer .dxbl-btn.dxbl-btn-primary,
.kc-edit-popup .dxbl-popup-footer button.dxbl-btn[type="submit"] {
  background: var(--kc-color-emerald) !important;
  color: var(--kc-accent-fg) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.22);
}
.kc-edit-popup .dxbl-popup-footer .dxbl-btn-primary:hover,
.kc-edit-popup .dxbl-popup-footer button.dxbl-btn[type="submit"]:hover {
  background: var(--kc-color-emerald-2) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.28);
}

/* Cancel (secondary) — ghost ink */
.kc-edit-popup .dxbl-popup-footer .dxbl-btn-secondary,
.kc-edit-popup .dxbl-popup-footer .dxbl-btn:not(.dxbl-btn-primary):not([type="submit"]) {
  background: transparent !important;
  color: var(--kc-fg) !important;
  border-color: var(--kc-border-strong) !important;
}
.kc-edit-popup .dxbl-popup-footer .dxbl-btn-secondary:hover,
.kc-edit-popup .dxbl-popup-footer .dxbl-btn:not(.dxbl-btn-primary):not([type="submit"]):hover {
  border-color: var(--kc-color-ink) !important;
  background: var(--kc-bg-muted) !important;
}

/* Validation message — danger pill discreto */
.kc-edit-popup .dxbl-validation-message,
.kc-edit-popup .validation-message {
  color: var(--kc-color-danger);
  font-size: 12px;
  margin-top: 4px;
}

/* Footer default de DxGrid: lo ocultamos completo. Los Save/Cancel reales
   los renderizamos nosotros DENTRO de EditFormTemplate como kc-pill — único
   camino que da control total sobre color (emerald/ghost) y texto localizado.
   DevExpress 25.x usa varios nombres de clase para ese slot dependiendo del
   contexto (popup edit form, modal, inline). Wide-net por seguridad. */
.kc-edit-popup .dxbl-popup-footer,
.kc-edit-popup .dxbl-grid-edit-form-button-row,
.kc-edit-popup .dxbl-grid-edit-form-buttons,
.kc-edit-popup .dxbl-grid-edit-form-bottom-area,
.kc-edit-popup [class*="popup-footer"],
.kc-edit-popup [class*="edit-form-button"],
.kc-edit-popup [class*="edit-form-bottom"] { display: none !important; }

/* Container del Save/Cancel custom — pegado al final del EditFormTemplate.
   Borde superior + padding-top crean separación visual con los inputs sin
   necesitar el footer del popup. */
.kc-edit-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--kc-border);
}