:root {
  --app-bg: #f3f6f4;
  --app-surface: #ffffff;
  --app-text: #17211b;
  --app-muted: #66736b;
  --app-border: #dce5df;
  --app-primary: #0f6b4f;
  --app-primary-dark: #0b4f3d;
  --app-accent: #d89b27;
}

body {
  color: var(--app-text);
  font-family: Arial, Helvetica, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h4,
.h5,
.h6 {
  color: #10261c;
  font-weight: 800;
}

.app-body {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(15, 107, 79, .08), rgba(15, 107, 79, 0) 260px),
    var(--app-bg);
}

.app-navbar {
  background: var(--app-primary-dark);
}

.app-navbar .navbar-brand,
.app-navbar .nav-link,
.app-navbar .navbar-toggler {
  color: #fff;
}

.app-navbar .nav-link {
  border-radius: 8px;
  opacity: .9;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  opacity: 1;
}

.app-sidebar {
  position: sticky;
  top: 0;
  min-height: calc(100vh - 56px);
  padding: 1rem;
  border-right: 1px solid var(--app-border);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
}

.app-sidebar-title {
  margin-bottom: .75rem;
  color: var(--app-muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.app-sidebar .nav-link {
  color: #31443a;
  border-radius: 8px;
  font-weight: 600;
}

.app-sidebar .nav-link:hover,
.app-sidebar .nav-link.active {
  color: var(--app-primary-dark);
  background: #e6f1ec;
}

.app-sidebar .nav-link .badge {
  flex: 0 0 auto;
  margin-left: .5rem;
}

main {
  min-width: 0;
}

.card {
  border: 1px solid var(--app-border);
  border-radius: 8px;
}

.card .card-body > h2,
.card .card-body > h3,
main > h2,
main .h4 {
  letter-spacing: .01em;
}

.card.shadow-sm {
  box-shadow: 0 10px 28px rgba(23, 33, 27, .08) !important;
}

.btn {
  border-radius: 8px;
  font-weight: 600;
}

.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-dark);
  --bs-btn-hover-border-color: var(--app-primary-dark);
}

.form-control,
.form-select {
  border-color: #cfdad4;
  border-radius: 8px;
}

.form-label,
dt {
  color: #26382f;
  font-weight: 700;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 .2rem rgba(15, 107, 79, .16);
}

.table {
  vertical-align: middle;
}

.table thead th {
  color: var(--app-muted);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table td {
  min-width: 110px;
}

.table td:last-child {
  min-width: 190px;
}

.badge {
  border-radius: 999px;
  font-weight: 700;
  padding: .42rem .65rem;
  letter-spacing: .01em;
}

.display-6 {
  line-height: 1;
}

.list-group-item {
  gap: 1rem;
}

.requirement-status {
  border-left: 4px solid transparent;
}

.requirement-status-success {
  border-left-color: #198754;
  background: rgba(25, 135, 84, .04);
}

.requirement-status-warning {
  border-left-color: #ffc107;
  background: rgba(255, 193, 7, .08);
}

.requirement-status-danger {
  border-left-color: #dc3545;
  background: rgba(220, 53, 69, .05);
}

.status-dot {
  width: .75rem;
  height: .75rem;
  flex: 0 0 .75rem;
  margin-top: .35rem;
  border-radius: 999px;
}

.login-panel {
  overflow: hidden;
}

.login-panel::before {
  display: block;
  height: 7px;
  background: linear-gradient(90deg, var(--app-primary), var(--app-accent));
  content: "";
}

.file-preview-body {
  min-height: 70vh;
}

.file-preview-frame {
  width: 100%;
  min-height: 70vh;
  border: 0;
}

.selected-doc-item {
  align-items: flex-start;
}

.rich-mail-editor {
  min-height: 260px;
  overflow: auto;
  background: #fff;
}

.rich-mail-editor:empty::before {
  color: var(--app-muted);
  content: "Escriba o pegue aqui el cuerpo del mail.";
}

@media (max-width: 767.98px) {
  .container-fluid > .row {
    display: block;
  }

  .container-fluid > .row > [class*="col-md-2"],
  .container-fluid > .row > [class*="col-md-10"] {
    width: 100%;
    max-width: 100%;
  }

  .app-sidebar {
    position: static;
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--app-border);
  }

  .app-sidebar .nav {
    flex-direction: row !important;
    overflow-x: auto;
    padding-bottom: .25rem;
  }

  .app-sidebar .nav-link {
    white-space: nowrap;
  }

  main.p-4 {
    padding: 1rem !important;
  }

  .d-flex.justify-content-between {
    align-items: stretch !important;
    flex-direction: column;
    gap: .75rem;
  }

  .d-flex.justify-content-between .btn {
    width: 100%;
  }

  .list-group-item.d-flex {
    align-items: stretch !important;
    flex-direction: column;
  }
}