/* RecallManager — tema Droguería Farmasun (#3c8dbc) sobre _base.css del manual */

:root {
  --brand: #3c8dbc;
  --blue: #3c8dbc;
  --blue-m: #2f7aad;
  --blue-l: #e8f4fa;
  --blue-b: #b8dce8;
  --bg: #f8fafc;
  --text: #0f172a;
  --text2: #777777;
  --gray: #777777;
  --border: #e2e8f0;
}

body {
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
}

.topbar-logo,
.modal-title,
.anmat-section-title,
.metric-label {
  font-family: Outfit, "Plus Jakarta Sans", system-ui, sans-serif;
}

#topbar {
  height: auto !important;
  min-height: 56px;
  flex-wrap: wrap;
  row-gap: 8px;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04) !important;
  padding: 10px 16px !important;
}

.topbar-logo {
  color: var(--brand) !important;
  margin-right: 12px !important;
}

.topbar-logo span {
  color: #64748b !important;
  font-weight: 600 !important;
}

.tab-btn {
  color: #777 !important;
}

.tab-btn:hover {
  background: rgba(60, 141, 188, 0.1) !important;
  color: var(--blue) !important;
}

.tab-btn.active {
  background: rgba(60, 141, 188, 0.14) !important;
  color: var(--blue) !important;
  font-weight: 600;
}

.topbar-user {
  color: var(--text2) !important;
}

#topbar .btn-primary {
  background: var(--blue) !important;
  color: #fff !important;
}

#topbar .btn-primary:hover {
  background: var(--blue-m) !important;
  box-shadow: 0 2px 8px rgba(60, 141, 188, 0.3);
}

#loader {
  background: linear-gradient(145deg, #0f172a 0%, #164e63 45%, var(--brand) 100%) !important;
}

.loader-logo span {
  color: #93c5fc !important;
}

#app {
  padding-top: 72px !important;
}

.form-control:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(60, 141, 188, 0.15);
}

.recall-row:hover,
.data-table tr:hover td {
  background: var(--blue-l) !important;
}

.toast.info {
  background: var(--blue);
}

.metric-card.blue .metric-value {
  color: var(--blue);
}

.btn-enviar-mails {
  background: var(--blue) !important;
}

.btn-enviar-mails:hover {
  background: var(--blue-m) !important;
}