:root {
  --boucardi-dark-blue: #3e468b;
  --boucardi-orange: #de7b3a;
  --boucardi-soft-blue: #6d92f4;
  --boucardi-bg: #f4f6fb;
  --boucardi-text: #1f2937;
  --boucardi-border: #dbe1ee;
}

html {
  font-size: 15px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 992px) {
  html {
    font-size: 16px;
  }
}

body {
  background: var(--boucardi-bg);
  color: var(--boucardi-text);
  font-family: "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.app-main {
  padding-bottom: 1.5rem;
}

.app-title {
  color: var(--boucardi-dark-blue);
  letter-spacing: 0.2px;
}

.navbar-boucardi {
  background-color: var(--boucardi-dark-blue);
  border-bottom: 3px solid var(--boucardi-orange);
  box-shadow: 0 4px 18px rgba(18, 24, 44, 0.15);
}

.navbar-boucardi .navbar-brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: 0.3px;
}

.navbar-boucardi .navbar-brand:hover,
.navbar-boucardi .nav-link:hover,
.navbar-boucardi .nav-link:focus {
  color: #ffd8be;
}

.navbar-boucardi .nav-link {
  color: #edf0fa;
  font-weight: 500;
}

.navbar-boucardi .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.45);
}

.navbar-boucardi .navbar-toggler-icon {
  filter: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.dropdown-menu {
  border: 1px solid var(--boucardi-border);
  border-radius: 0.7rem;
}

.footer-boucardi {
  background-color: #fff;
  border-top: 1px solid var(--boucardi-border);
  color: #4b5563;
}

.card {
  border: 1px solid var(--boucardi-border);
  border-radius: 0.9rem;
}

.card-header {
  border-bottom-color: var(--boucardi-border);
}

.table {
  --bs-table-striped-bg: #f8faff;
}

.table thead th {
  background-color: #f1f4fb;
  color: #334155;
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--boucardi-border);
}

.table td {
  vertical-align: middle;
}

.btn-boucardi {
  background: linear-gradient(180deg, #e6864b 0%, var(--boucardi-orange) 100%);
  color: #fff;
  border: 0;
  font-weight: 600;
}

.btn-boucardi:hover,
.btn-boucardi:focus {
  background: #c96f34;
  color: #fff;
}

.btn-outline-primary {
  border-color: #5568d6;
  color: #5568d6;
}

.btn-outline-primary:hover {
  background-color: #5568d6;
  border-color: #5568d6;
}

.form-control,
.form-select {
  border-color: #cfd7e7;
  border-radius: 0.65rem;
}

.form-control:focus,
.form-select:focus,
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-check-input:focus {
  border-color: #6f85ee;
  box-shadow: 0 0 0 0.2rem rgba(111, 133, 238, 0.18);
}

.hero-panel {
  background: linear-gradient(145deg, #ffffff 0%, #f2f5fe 100%);
  border: 1px solid var(--boucardi-border);
  border-left: 5px solid var(--boucardi-orange);
  border-radius: 1rem;
}

.ticket-message-box {
  white-space: pre-wrap;
  border: 1px solid var(--boucardi-border);
  background-color: #f9fbff;
  border-radius: 0.75rem;
}

.kpi-chart-wrapper {
  position: relative;
  height: 250px;
  min-height: 220px;
}

.table-responsive.kpi-table {
  max-height: 300px;
  overflow: auto;
}
@media (max-width: 768px) {
  .app-main {
    padding-bottom: 1rem;
  }

  .table thead th {
    font-size: 0.78rem;
  }

  .ticket-mobile-card {
    border-radius: 0.8rem;
  }

  .usuario-mobile-card {
    border-radius: 0.8rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
}

.input-group .btn-outline-secondary {
    border-left: 0;
}

.input-group .btn-outline-secondary:focus {
    box-shadow: none;
    border-color: #ced4da;
}

.input-group .form-control:focus + .btn-outline-secondary {
    border-color: #86b7fe;
}