:root {
  --obras-orange: #ff7a00;
  --obras-blue: #0057d9;
  --obras-dark-blue: #003b8f;
  --obras-light-orange: #ffa000;
  --obras-sidebar-bg: #08213f;
  --obras-sidebar-border: rgba(255, 255, 255, 0.12);
  --bs-primary: var(--obras-blue);
  --bs-primary-rgb: 0, 87, 217;
  --bs-link-color: var(--obras-blue);
  --bs-link-hover-color: var(--obras-dark-blue);
}

body {
  color: #172033;
}

.obras-admin .app-header {
  border-bottom: 1px solid rgba(0, 87, 217, 0.14);
}

.obras-topbar-mark {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.obras-sidebar {
  --bs-body-bg: var(--obras-sidebar-bg);
  --bs-secondary-bg: var(--obras-sidebar-bg);
  background: linear-gradient(180deg, var(--obras-dark-blue), #061a33 74%);
}

.obras-sidebar .sidebar-brand {
  min-height: 64px;
  border-bottom: 1px solid var(--obras-sidebar-border);
}

.obras-sidebar .brand-link {
  justify-content: center;
  padding: 0.75rem 1rem;
}

.obras-sidebar-logo {
  display: block;
  max-width: 168px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.obras-sidebar .nav-header {
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0;
}

.obras-sidebar .nav-link {
  color: rgba(255, 255, 255, 0.84);
}

.obras-sidebar .nav-link:hover,
.obras-sidebar .nav-link:focus {
  background-color: rgba(255, 122, 0, 0.14);
  color: #fff;
}

.obras-sidebar .nav-link.active,
.obras-sidebar .nav-link[aria-current="page"] {
  background-color: var(--obras-orange);
  color: #fff;
}

.btn-primary {
  --bs-btn-bg: var(--obras-blue);
  --bs-btn-border-color: var(--obras-blue);
  --bs-btn-hover-bg: var(--obras-dark-blue);
  --bs-btn-hover-border-color: var(--obras-dark-blue);
  --bs-btn-active-bg: var(--obras-dark-blue);
  --bs-btn-active-border-color: var(--obras-dark-blue);
  --bs-btn-disabled-bg: var(--obras-blue);
  --bs-btn-disabled-border-color: var(--obras-blue);
}

.btn-outline-primary {
  --bs-btn-color: var(--obras-blue);
  --bs-btn-border-color: var(--obras-blue);
  --bs-btn-hover-bg: var(--obras-blue);
  --bs-btn-hover-border-color: var(--obras-blue);
  --bs-btn-active-bg: var(--obras-blue);
  --bs-btn-active-border-color: var(--obras-blue);
}

.text-bg-primary,
.bg-primary {
  background-color: var(--obras-blue) !important;
}

.text-bg-warning,
.bg-warning {
  background-color: var(--obras-orange) !important;
  color: #fff !important;
}

.badge.text-bg-success {
  background-color: var(--obras-blue) !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: rgba(255, 122, 0, 0.62);
  box-shadow: 0 0 0 0.25rem rgba(255, 122, 0, 0.18);
}

.form-check-input:checked {
  background-color: var(--obras-blue);
  border-color: var(--obras-blue);
}

.card {
  border-color: rgba(0, 87, 217, 0.12);
}

.card-header {
  border-bottom-color: rgba(0, 87, 217, 0.12);
}

.app-content-header h3 {
  color: #07172c;
}

.obras-login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 122, 0, 0.14), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(0, 87, 217, 0.15), transparent 30%),
    #f5f7fb;
}

.obras-login-card {
  width: min(100%, 400px);
  border: 1px solid rgba(0, 87, 217, 0.14);
}

.obras-login-logo {
  display: block;
  max-width: 250px;
  width: 100%;
  height: auto;
  margin: 0 auto 1.25rem;
}

.obras-login-card .input-group-text {
  color: var(--obras-blue);
  background-color: rgba(0, 87, 217, 0.06);
  border-color: rgba(0, 87, 217, 0.14);
}