:root {
  --fumigest-charcoal: #283840;
  --fumigest-charcoal-2: #34474f;
  --fumigest-charcoal-3: #41565d;
  --fumigest-green: #6ea52d;
  --fumigest-green-strong: #4f7d1f;
  --fumigest-green-light: #8ab832;
  --fumigest-green-soft: #eef6e5;
  --fumigest-surface: #ffffff;
  --fumigest-background: #f4f7f1;
  --fumigest-line: #dce5d7;
  --fumigest-muted: #718078;
  --navy: var(--fumigest-charcoal);
  --navy-2: var(--fumigest-charcoal-2);
  --blue: var(--fumigest-green);
  --green: var(--fumigest-green);
  --ink: var(--fumigest-charcoal);
  --muted: var(--fumigest-muted);
  --bg: var(--fumigest-background);
  --line: var(--fumigest-line);
  --bs-primary: var(--fumigest-green);
  --bs-primary-rgb: 110, 165, 45;
  --bs-link-color: var(--fumigest-green-strong);
  --bs-link-hover-color: #496f1d;
}

body {
  background:
    radial-gradient(circle at 93% 5%, rgba(138, 184, 50, .08), transparent 24rem),
    var(--fumigest-background);
  color: var(--fumigest-charcoal);
}

::selection {
  color: #fff;
  background: var(--fumigest-green);
}

.sidebar {
  width: 250px;
  background:
    radial-gradient(circle at 16% 93%, rgba(110, 165, 45, .18), transparent 15rem),
    linear-gradient(165deg, #202e34 0%, var(--fumigest-charcoal) 55%, #1d2a30 100%);
  color: #dbe4df;
  box-shadow: 12px 0 34px rgba(27, 41, 46, .08);
}

.brand {
  height: 76px;
  padding: 9px 18px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.fumigest-logo-crop {
  position: relative;
  display: block;
  aspect-ratio: 1454 / 446;
  overflow: hidden;
}

.fumigest-logo-crop > img {
  position: absolute;
  top: -239.46%;
  left: -11.21%;
  display: block;
  width: 133.7%;
  height: auto;
  max-width: none;
}

.brand-logo {
  display: block;
  width: min(100%, 176px);
  height: auto;
  margin: 0 auto;
}

.sidebar-label {
  color: #85978e;
  font-weight: 750;
  letter-spacing: .15em;
}

.nav-item {
  position: relative;
  color: #c5d0ca;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.nav-item i {
  width: 20px;
  color: #90a29a;
  font-size: 1rem;
  text-align: center;
  transition: color .18s ease;
}

.nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, .065);
  transform: translateX(2px);
}

.nav-item.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(110, 165, 45, .28), rgba(110, 165, 45, .11));
  border-color: rgba(138, 184, 50, .2);
  box-shadow: inset 3px 0 0 var(--fumigest-green-light);
}

.nav-item:hover i,
.nav-item.active i {
  color: #9aca3c;
}

.app-shell {
  margin-left: 250px;
}

.topbar {
  height: 76px;
  border-color: var(--fumigest-line);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
}

.topbar .user-name {
  color: var(--fumigest-charcoal);
  font-weight: 650;
}

.main-content {
  max-width: 1800px;
  margin-inline: auto;
}

.page-heading h1 {
  color: #26363d;
  font-weight: 780;
  letter-spacing: -.025em;
}

.eyebrow {
  color: var(--fumigest-green-strong) !important;
}

.panel,
.filter-bar,
.metric-card,
.form-panel {
  border-color: var(--fumigest-line);
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(40, 56, 64, .055);
}

.panel-title {
  border-color: var(--fumigest-line);
}

.panel-title h2,
.form-panel h2 {
  color: var(--fumigest-charcoal);
  font-weight: 750;
}

.metric-card {
  transition: transform .18s ease, box-shadow .18s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 13px 32px rgba(40, 56, 64, .09);
}

.metric-card.green > span {
  background: linear-gradient(150deg, var(--fumigest-green-light), var(--fumigest-green-strong));
}

.metric-card.blue > span {
  background: linear-gradient(150deg, var(--fumigest-charcoal-3), var(--fumigest-charcoal));
}

.metric-card.orange > span {
  background: linear-gradient(150deg, #d5a234, #b77b18);
}

.metric-card.tax > span {
  background: linear-gradient(150deg, #7a8d4c, #566635);
}

.btn {
  border-radius: 9px;
  font-weight: 650;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--fumigest-green-strong);
  --bs-btn-border-color: var(--fumigest-green-strong);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #416a19;
  --bs-btn-hover-border-color: #416a19;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #527f1f;
  --bs-btn-active-border-color: #527f1f;
  --bs-btn-disabled-bg: #9bbf70;
  --bs-btn-disabled-border-color: #9bbf70;
  box-shadow: 0 5px 14px rgba(92, 142, 34, .16);
}

.btn-outline-primary {
  --bs-btn-color: var(--fumigest-green-strong);
  --bs-btn-border-color: #83ad52;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--fumigest-green);
  --bs-btn-hover-border-color: var(--fumigest-green);
  --bs-btn-active-bg: var(--fumigest-green-strong);
  --bs-btn-active-border-color: var(--fumigest-green-strong);
}

.btn-outline-secondary {
  --bs-btn-color: #52646b;
  --bs-btn-border-color: #bdcac3;
  --bs-btn-hover-bg: var(--fumigest-charcoal);
  --bs-btn-hover-border-color: var(--fumigest-charcoal);
}

.form-label {
  color: #46575e;
  font-size: .84rem;
  font-weight: 650;
}

.form-control,
.form-select {
  border-color: #cedbd2;
  border-radius: 9px;
  color: var(--fumigest-charcoal);
}

.form-control:focus,
.form-select:focus,
.searchable-select:focus-within .searchable-select-input {
  border-color: #8ab95a;
  box-shadow: 0 0 0 .22rem rgba(110, 165, 45, .16);
}

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

.table {
  --bs-table-color: var(--fumigest-charcoal);
  --bs-table-border-color: #e4ebe1;
}

.table > thead th {
  color: #5d6c64;
  font-size: .74rem;
  font-weight: 780;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.table > tbody > tr {
  transition: background .15s ease;
}

.table > tbody > tr:hover {
  --bs-table-hover-bg: #f6faf2;
  background: #f6faf2;
}

.analytics-table thead th {
  background: var(--fumigest-charcoal-2);
}

.progress-bar {
  background: linear-gradient(90deg, var(--fumigest-green-strong), var(--fumigest-green-light));
}

.status.activo {
  color: #477519;
  background: #eaf5dd;
}

.status.suspendido {
  color: #896213;
  background: #fff3d8;
}

.alert-success {
  --bs-alert-color: #3f6d18;
  --bs-alert-bg: #edf7e3;
  --bs-alert-border-color: #cde5b5;
}

.pagination {
  --bs-pagination-color: var(--fumigest-green-strong);
  --bs-pagination-active-bg: var(--fumigest-green);
  --bs-pagination-active-border-color: var(--fumigest-green);
}

.category-heading,
.service-check-card,
.application-card {
  background: #f7faf4;
}

.category-pests i,
.empty-module > span,
.calendar-map-link {
  color: var(--fumigest-green-strong);
}

.empty-module > span {
  background: var(--fumigest-green-soft);
}

.report-actions {
  background: rgba(244, 247, 241, .95);
}

.report-check:has(input:checked),
.application-card.is-active {
  border-color: #9bc271;
  background: #f4f9ee;
  color: #4f791f;
}

.report-check input,
.service-check-title input {
  accent-color: var(--fumigest-green);
}

.application-card.is-active .application-selector span {
  color: var(--fumigest-green);
}

.searchable-select-menu {
  border-color: #ccd9d0;
  box-shadow: 0 12px 30px rgba(40, 56, 64, .16);
}

.searchable-select-option:hover,
.searchable-select-option.selected {
  color: #486f1c;
  background: var(--fumigest-green-soft);
}

.login-page {
  min-height: 100vh;
  grid-template-columns: minmax(0, 1.08fr) minmax(460px, .92fr);
  background: #fff;
}

.login-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(138, 184, 50, .2), transparent 18rem),
    radial-gradient(circle at 92% 86%, rgba(110, 165, 45, .15), transparent 22rem),
    linear-gradient(145deg, #1d2b31, #2e4249 58%, #223238);
}

.login-visual::before,
.login-visual::after {
  position: absolute;
  z-index: -1;
  content: "";
  border: 1px solid rgba(138, 184, 50, .13);
  border-radius: 50%;
}

.login-visual::before {
  width: 34rem;
  height: 34rem;
  right: -13rem;
  top: -12rem;
}

.login-visual::after {
  width: 27rem;
  height: 27rem;
  left: -12rem;
  bottom: -14rem;
}

.login-visual-content {
  width: min(620px, 100%);
}

.login-hero-logo {
  display: block;
  width: min(430px, 82%);
  height: auto;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: 18px;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .16));
}

.login-kicker {
  margin: 46px 0 8px !important;
  color: #a6cf72 !important;
  font-size: .74rem !important;
  font-weight: 800;
  letter-spacing: .17em;
}

.login-visual h1 {
  margin: 0 0 20px;
  font-size: clamp(2.7rem, 4vw, 4.4rem);
  font-weight: 790;
  letter-spacing: -.045em;
}

.login-visual h1 span {
  color: #94c54a;
}

.login-visual p {
  color: #cfdbd5;
}

.login-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.login-benefits span {
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: #e5ece8;
  background: rgba(255, 255, 255, .055);
  font-size: .83rem;
}

.login-benefits i {
  margin-right: 6px;
  color: #9dcc5a;
}

.login-panel {
  position: relative;
  background:
    radial-gradient(circle at 100% 0, rgba(138, 184, 50, .09), transparent 20rem),
    #fff;
}

.login-card {
  width: min(430px, 100%);
  padding: 38px;
  border: 1px solid var(--fumigest-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 24px 70px rgba(40, 56, 64, .12);
}

.login-card h2 {
  color: var(--fumigest-charcoal);
  font-weight: 780;
  letter-spacing: -.025em;
}

.login-mobile-logo {
  display: none;
  width: 240px;
  height: auto;
  margin: 0 auto 32px;
}

.login-input {
  position: relative;
}

.login-input > i {
  position: absolute;
  z-index: 2;
  left: 15px;
  top: 50%;
  color: #829088;
  transform: translateY(-50%);
}

.login-input .form-control {
  padding-left: 42px;
}

.login-support {
  margin: 22px 0 0;
  color: var(--fumigest-muted);
  font-size: .77rem;
  text-align: center;
}

.error-page h1 {
  color: var(--fumigest-green);
}

@media (max-width: 900px) {
  .sidebar {
    width: 270px;
  }

  .app-shell {
    margin-left: 0;
  }

  .login-page {
    grid-template-columns: 1fr;
    min-height: 100svh;
    background:
      radial-gradient(circle at 100% 0, rgba(138, 184, 50, .12), transparent 20rem),
      #f5f8f2;
  }

  .login-panel {
    padding: 28px 20px;
    background: transparent;
  }

  .login-mobile-logo {
    display: block;
  }
}

@media (max-width: 560px) {
  .brand {
    height: 80px;
  }

  .login-card {
    padding: 27px 22px;
    border-radius: 18px;
  }

  .login-mobile-logo {
    width: 205px;
    margin-bottom: 24px;
  }

  .topbar {
    padding-inline: 14px;
  }
}

.impersonation-sidebar {
  margin: 12px 12px 4px;
  padding: 14px;
  border: 1px solid rgba(255, 193, 7, .42);
  border-radius: 14px;
  background: rgba(255, 193, 7, .12);
  color: #fff;
}

.impersonation-sidebar small,
.impersonation-sidebar strong,
.impersonation-sidebar span {
  display: block;
}

.impersonation-sidebar small {
  color: #d8f09d;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.impersonation-sidebar strong {
  margin-top: 4px;
  line-height: 1.2;
}

.impersonation-sidebar span {
  margin: 3px 0 11px;
  color: rgba(255, 255, 255, .72);
  font-size: .76rem;
}

.impersonation-banner {
  position: sticky;
  top: 86px;
  z-index: 1015;
  border-color: #e3a719;
  box-shadow: 0 8px 24px rgba(91, 65, 6, .13);
}

@media (max-width: 900px) {
  .impersonation-banner {
    top: 70px;
  }
}
/* Portal de clientes */
.portal-choice {
  border: 1px solid var(--bs-border-color);
  border-radius: .65rem;
  padding: .65rem .85rem;
  background: #fff;
}
.portal-invitation { max-width: 920px; margin-inline: auto; }
.portal-public-card {
  width: min(480px, calc(100% - 2rem));
  margin: 7vh auto;
  padding: 2rem;
  border: 1px solid #d8e2d1;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 20px 55px rgba(34, 56, 64, .12);
}
.portal-public-logo { display: block; width: 190px; height: 72px; margin-bottom: 1.5rem; }
.portal-public-logo img { width: 100%; height: 100%; object-fit: contain; }
.portal-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .portal-metrics { grid-template-columns: 1fr; } }
