/**
 * SB-Markets — tokens UX compartidos (Login + app shell)
 * ADR-007 / paleta C — Graphite blue (azul contenido / refinada).
 */
:root {
  --sb-blue: #2563A8;
  --sb-blue-deep: #1E4F86;
  --sb-blue-bright: #5B8FC7;
  --sb-ink: #2C333A;
  --sb-muted: #5F6B76;
  --sb-bg: #F5F7FA;
  --sb-panel-top: #E8EEF5;
  --sb-panel-mid: #F0F3F7;
  --sb-panel-bot: #DDE3EB;
  --sb-surface: #ffffff;
  --sb-border: #D8DEE6;
  --sb-border-strong: #2563A8;
  --sb-danger: #C62828;
  --sb-danger-deep: #B71C1C;
  --sb-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sb-radius: 6px;

  /* ADR-009 — grillas: thead gris; tbody blanco */
  --sb-grid-head-bg: #e8eaed;
  --sb-grid-head-fg: #334155;
  --sb-grid-border: #cbd5e1;
  --sb-grid-body-bg: #ffffff;
  --sb-grid-row-hover: #f5f5f5;
  --sb-grid-foot-bg: #f1f5f9;
  --sb-grid-foot-fg: #334155;
  --sb-grid-page-fg: #475569;
  --sb-grid-page-active-bg: #e8eaed;
  --sb-grid-page-active-fg: #1e293b;
  --sb-grid-page-disabled: #94a3b8;
  /*
   * Lienzo splash: radial centrado + base plana (sin linear 160°).
   * Se pinta con background-attachment:fixed → mismo viewport en Login y Dashboard.
   */
  --sb-splash-base: #F2F5F9;
  --sb-splash-radial: radial-gradient(
    ellipse 85% 70% at 50% 42%,
    rgba(37, 99, 168, 0.10) 0%,
    rgba(37, 99, 168, 0.04) 42%,
    transparent 70%
  );
  --sb-splash-bg: var(--sb-splash-radial), var(--sb-splash-base);

  /* Anula acento rojo legado de main.css (ML) → graphite blue */
  --accent: #2563A8;
  --accent-rgb: 37, 99, 168;
}

body {
  font-family: var(--sb-font);
}

/* Login: fondo split en login.css. Home app: splash con tokens C. */
body.sb-layout-synt .app-content.sb-home {
  background-color: var(--sb-splash-base) !important;
  background-image: var(--sb-splash-radial) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* Acciones positivas: graphite blue / blanco */
.btn-primary,
.badge-primary {
  background-color: var(--sb-blue) !important;
  border-color: var(--sb-blue-deep) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--sb-blue-bright) !important;
  border-color: var(--sb-blue) !important;
  color: #fff !important;
}
.btn-outline-primary {
  color: var(--sb-blue) !important;
  border-color: var(--sb-blue) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--sb-blue) !important;
  border-color: var(--sb-blue-deep) !important;
  color: #fff !important;
}

/* Cancelar / salir / eliminar: rojo / blanco */
.btn-danger,
.badge-danger {
  background-color: var(--sb-danger) !important;
  border-color: var(--sb-danger-deep) !important;
  color: #fff !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: var(--sb-danger-deep) !important;
  border-color: var(--sb-danger-deep) !important;
  color: #fff !important;
}
.btn-outline-danger {
  color: var(--sb-danger) !important;
  border-color: var(--sb-danger) !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color: var(--sb-danger) !important;
  border-color: var(--sb-danger-deep) !important;
  color: #fff !important;
}

/* Importes: debe pagar = rojo con −; a favor = verde sin signo */
.sb-importe-debe {
  color: var(--sb-danger, #c0392b) !important;
  font-weight: 600;
}
.sb-importe-favor {
  color: #1e7e34 !important;
  font-weight: 600;
}