:root {

  --apple-blue:          #ef4444;
  --apple-blue-hover:    #dc2626;
  --apple-blue-active:   #b91c1c;
  --apple-blue-light:    rgba(239, 68, 68, 0.10);
  --apple-blue-medium:   rgba(239, 68, 68, 0.15);

  --apple-orange:        #f97316;
  --apple-orange-light:  rgba(249, 115, 22, 0.12);
  --apple-indigo:        #f97316;
  --apple-indigo-light:  rgba(249, 115, 22, 0.12);
  --apple-purple:        #fb923c;
  --apple-purple-light:  rgba(251, 146, 60, 0.12);

  --text-primary:        #171d2c;
  --text-secondary:      #566076;
  --text-tertiary:       #8b94a6;
  --text-link:           #ef4444;

  --cj-acento:           #ef4444;
  --cj-acento-2:         #f97316;
  --cj-acento-3:         #fb923c;
  --cj-degradado:        linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  --cj-titulo:           'Space Grotesk', 'Segoe UI', Helvetica, Arial, sans-serif;
  --cj-texto:            'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
}

body,
.login-box, .register-box,
.content-wrapper, .main-sidebar, .main-header {
  font-family: var(--cj-texto);
}

h1, h2, h3, h4, h5, .box-title, .login-box-msg, .brand-text {
  font-family: var(--cj-titulo);
  letter-spacing: -0.02em;
}

:root {
  --gradient-start: #ef4444 !important;
  --gradient-mid:   #f97316 !important;
  --gradient-end:   #fb923c !important;
  --accent-purple:  #f97316 !important;
  --accent-blue:    #ef4444 !important;
  --text-dark:      #171d2c !important;
  --text-muted:     #566076 !important;
}

.auth-card { border-radius: 16px; }

.btn-submit:hover { filter: brightness(0.94); }

.password-container { position: relative !important; }

.password-container button.password-toggle-btn,
button.password-toggle-btn {
  position: absolute !important;
  right: 8px !important;
  left: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  z-index: 3;
}

.password-container button.password-toggle-btn:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  color: var(--cj-acento) !important;
}

body.login-page,
body.register-page,
.login-page, .register-page,
.hold-transition.login-page {
  background: var(--cj-degradado) !important;
}

.login-box .btn-primary,
.register-box .btn-primary,
.btn-conjorsac {
  background: var(--cj-degradado) !important;
  border: 0 !important;
  color: #ffffff !important;
  font-weight: 600;
}

.login-box .btn-primary:hover,
.register-box .btn-primary:hover {
  filter: brightness(0.94);
}

.login-box .login-box-body::before,
.login-box .card::before {
  background: var(--cj-degradado) !important;
}

.btn-primary,
.btn-info {
  background-color: var(--cj-acento);
  border-color: var(--cj-acento);
}

.btn-primary:hover,
.btn-info:hover {
  background-color: #dc2626;
  border-color: #dc2626;
}

.btn-primary:focus,
.form-control:focus,
.select2-container--focus .select2-selection {
  border-color: var(--cj-acento);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

a, .text-primary { color: var(--cj-acento); }
a:hover          { color: var(--cj-acento-2); }

.login-box a,
.register-box a,
a[href*="password"] { color: var(--cj-acento) !important; }

.main-sidebar .nav-link.active,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  background: var(--cj-acento) !important;
  color: #ffffff !important;
}

.main-sidebar .nav-link:hover {
  background: rgba(239, 68, 68, 0.10);
}

.nav-tabs .nav-link.active {
  border-bottom-color: var(--cj-acento);
  color: var(--cj-acento);
}

.card, .box, .info-box, .small-box {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
  border: 1px solid rgba(16, 24, 40, 0.10);
}

.alert-info,
.callout-info {
  border-left-color: var(--cj-acento);
  background: rgba(239, 68, 68, 0.06);
  color: var(--text-primary);
}

.progress-bar,
.badge-primary,
.bg-primary {
  background: var(--cj-degradado) !important;
}