/* ============================================
   NEXUS CORE — Design System v1.0
   Variables de marca — personalizar por cliente
   ============================================ */

:root {
  /* Paleta principal */
  --color-primary:        #0b314a;
  --color-primary-mid:    #1b7181;
  --color-primary-light:  #4a8b98;
  --color-accent:         #f1e51b;
  --color-surface:        #d9d6c7;
  --color-surface-light:  #e7e7de;
  --color-slate:          #3d5a6e;

  /* Semánticos */
  --color-success:        #2a9d5c;
  --color-warning:        #f4a261;
  --color-danger:         #e63946;
  --color-info:           #4a8b98;

  /* Tipografía */
  --font-primary:         'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-semibold: 600;

  /* Layout */
  --sidebar-width:        240px;
  --navbar-height:        56px;
  --border-radius-base:   6px;
  --border-radius-lg:     10px;
  --shadow-card:          0 1px 4px rgba(0,0,0,0.08);
  --shadow-card-hover:    0 4px 12px rgba(0,0,0,0.12);
  --transition-base:      all 0.2s ease;
}

/* ── Base ── */
body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-light);
  color: #1a1a2e;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semibold);
}

/* ── Bootstrap overrides globales ── */
.btn {
  border-radius: var(--border-radius-base);
  font-weight: var(--font-weight-semibold);
  transition: var(--transition-base);
}

.btn-primary {
  background-color: var(--color-primary-mid);
  border-color: var(--color-primary-mid);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.btn-outline-primary {
  color: var(--color-primary-mid);
  border-color: var(--color-primary-mid);
}
.btn-outline-primary:hover {
  background-color: var(--color-primary-mid);
  border-color: var(--color-primary-mid);
  color: #fff;
}

.btn-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.btn-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-primary);
}

/* Acento — CTA principal */
.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-primary);
  border: none;
  font-weight: var(--font-weight-semibold);
}
.btn-accent:hover {
  background-color: #d4ca18;
  color: var(--color-primary);
}

/* ── Cards ── */
.card {
  border: none;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-card);
  transition: var(--transition-base);
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
}
.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--color-surface-light);
  font-weight: var(--font-weight-semibold);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

/* ── Tablas ── */
.table {
  font-size: 0.9rem;
}
.table thead th {
  font-weight: var(--font-weight-semibold);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-slate);
  border-bottom: 2px solid var(--color-surface-light);
}
.table-hover tbody tr:hover {
  background-color: var(--color-surface-light);
}

/* ── Badges ── */
.badge.bg-primary   { background-color: var(--color-primary-mid) !important; }
.badge.bg-success   { background-color: var(--color-success) !important; }
.badge.bg-warning   { background-color: var(--color-warning) !important;
                      color: var(--color-primary) !important; }
.badge.bg-secondary { background-color: var(--color-slate) !important; }

/* ── Alerts ── */
.alert-info {
  background-color: rgba(74, 139, 152, 0.1);
  border-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* ── Forms ── */
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary-mid);
  box-shadow: 0 0 0 0.2rem rgba(27, 113, 129, 0.2);
}

/* ── Utilitarias de marca ── */
.bg-brand-primary   { background-color: var(--color-primary) !important; }
.bg-brand-mid       { background-color: var(--color-primary-mid) !important; }
.bg-brand-accent    { background-color: var(--color-accent) !important; }
.bg-brand-surface   { background-color: var(--color-surface-light) !important; }
.text-brand-primary { color: var(--color-primary) !important; }
.text-brand-mid     { color: var(--color-primary-mid) !important; }
.text-brand-accent  { color: var(--color-accent) !important; }
.text-brand-slate   { color: var(--color-slate) !important; }

/* ── KPI Cards (Dashboard) ── */
.kpi-card {
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
  color: #fff;
}
.kpi-card .kpi-label {
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.kpi-card .kpi-value {
  font-size: 2rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  margin: 0.25rem 0;
}
.kpi-card.kpi-sales-today  { background-color: var(--color-primary); }
.kpi-card.kpi-sales-month  { background-color: var(--color-primary-mid); }
.kpi-card.kpi-appointments { background-color: var(--color-slate); }