:root {
  --mt-orange: #ff8126;
  --mt-orange-dark: #df6410;
  --mt-green: #008247;
  --mt-green-dark: #005f36;
  --danken: #72bf00;
  --ink: #17231d;
  --muted: #6e7b74;
  --bg: #f3f6f4;
  --line: #dfe8e3;
  --sidebar: #073b2a;
  --white: #fff;
  --shadow: 0 12px 34px rgba(10, 54, 36, .09)
}

* {
  box-sizing: border-box
}

html,
body {
  min-height: 100%
}

body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink)
}

a {
  color: var(--mt-green);
  text-decoration: none
}

a:hover {
  color: var(--mt-orange-dark)
}

.section-label,
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 1rem;
  font-weight: 800;
  color: var(--mt-orange);
  display: inline-block;
  margin-bottom: .55rem
}

.page-heading h2,
.page-heading h3 {
  font-weight: 800;
  margin-top: 0;
  margin-bottom: .25rem
}

/* Login */
.auth-body {
  margin: 0;
  background: #122219
}

.auth-page {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 92px 24px 56px
}

.auth-background {
  position: absolute;
  inset: 0;
  background: url('../img/login-agro-bg.png') center center/cover no-repeat;
  transform: scale(1.01)
}

.auth-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 40, 25, .28), rgba(0, 0, 0, .08) 50%, rgba(3, 40, 25, .24)), linear-gradient(0deg, rgba(0, 32, 19, .28), transparent 50%)
}

.auth-header {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 34px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  border-bottom: 3px solid var(--mt-orange);
  box-shadow: 0 5px 24px rgba(0, 0, 0, .12)
}

.auth-header img {
  width: 235px;
  height: 52px;
  object-fit: contain;
  object-position: left
}

.auth-header span {
  font-weight: 700;
  color: var(--mt-green-dark);
  font-size: .88rem
}

.auth-card-wrap {
  position: relative;
  z-index: 2;
  width: min(540px, 100%)
}

.auth-card {
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 24px;
  padding: 30px 34px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .32);
  backdrop-filter: blur(12px)
}

.auth-logo-box {
  text-align: center;
  margin: -8px auto 8px
}

.auth-logo-box img {
  width: 210px;
  height: 108px;
  object-fit: contain
}

.auth-title {
  font-size: 1.65rem;
  font-weight: 800;
  margin: .35rem 0
}

.auth-subtitle {
  font-size: .91rem;
  color: var(--muted);
  margin: 0
}

.form-label {
  font-weight: 700;
  font-size: .86rem
}

.input-icon-wrap {
  position: relative
}

.input-icon-wrap>i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: var(--mt-green)
}

.input-icon-wrap .form-control {
  padding-left: 43px
}

.form-control {
  border: 1px solid #d4dfd9;
  border-radius: 11px;
  min-height: 49px;
  font-size: .95rem
}

.form-control:focus {
  border-color: var(--mt-green);
  box-shadow: 0 0 0 .22rem rgba(0, 130, 71, .13)
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #6f7a74
}

.forgot-link {
  font-size: .86rem;
  font-weight: 600
}

.btn-brand {
  background: linear-gradient(135deg, var(--mt-green), var(--mt-green-dark));
  border: 0;
  color: white;
  border-radius: 11px;
  font-weight: 800;
  box-shadow: 0 9px 18px rgba(0, 104, 57, .22)
}

.btn-brand:hover {
  color: white;
  background: linear-gradient(135deg, var(--mt-green-dark), var(--mt-green));
  transform: translateY(-1px)
}

.login-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 17px;
  color: #668077;
  font-size: .78rem
}

.login-security i {
  color: var(--mt-green)
}

.auth-footer {
  position: absolute;
  z-index: 2;
  bottom: 17px;
  color: white;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
  font-size: .77rem
}

/* Application */
.app-body {
  margin: 0;
  background: var(--bg)
}

.app-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr)
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: linear-gradient(180deg, #fff 0, #fff 138px, var(--sidebar) 138px);
  display: flex;
  flex-direction: column;
  z-index: 40;
  box-shadow: 5px 0 24px rgba(5, 40, 27, .08)
}

.sidebar-head {
  height: 82px;
  display: flex;
  align-items: center;
  padding: 10px 18px
}

.sidebar-brand {
  display: block
}

.sidebar-brand img {
  width: 215px;
  height: 60px;
  object-fit: contain;
  object-position: left
}

.sidebar-close {
  margin-left: auto;
  border: 0;
  background: transparent
}

.sidebar-product {
  height: 56px;
  padding: 1px 20px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  display: flex;
  align-items: center
}

.sidebar-product img {
  width: 145px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .12));
  background: white;
  border-radius: 8px;
  padding: 3px 8px
}

.sidebar-nav {
  padding: 15px 13px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px
}

.nav-caption {
  color: #7eaa95;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .64rem;
  font-weight: 800;
  margin: 13px 12px 5px
}

.sidebar-nav a {
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d6e4dd;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 600
}

.sidebar-nav a i {
  font-size: 1.06rem;
  width: 20px;
  text-align: center
}

.sidebar-nav a.active,
.sidebar-nav a:hover {
  background: linear-gradient(90deg, var(--mt-green), #0b9454);
  color: #fff;
  box-shadow: 0 7px 15px rgba(0, 0, 0, .13)
}

.sidebar-nav a.active:before {
  content: "";
  width: 4px;
  height: 25px;
  background: var(--mt-orange);
  border-radius: 4px;
  margin-left: -12px
}

.sidebar-nav a small {
  margin-left: auto;
  font-size: .59rem;
  background: rgba(255, 255, 255, .1);
  padding: 3px 6px;
  border-radius: 99px;
  color: #aac4b8
}

.module-soon {
  cursor: not-allowed
}

.sidebar-footer {
  margin-top: auto;
  padding: 17px 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  gap: 10px;
  color: white
}

.sidebar-footer .system-dot {
  width: 10px;
  height: 10px;
  background: #7ee647;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(126, 230, 71, .1)
}

.sidebar-footer div {
  display: flex;
  flex-direction: column
}

.sidebar-footer strong {
  font-size: .75rem
}

.sidebar-footer small {
  font-size: .65rem;
  color: #8fb0a0
}

.sidebar-backdrop {
  display: none
}

.main-area {
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column
}

.topbar {
  height: 86px;
  background: white;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 30px;
  position: sticky;
  top: 0;
  z-index: 30
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px
}

.topbar h1 {
  font-size: 1.32rem;
  margin: 2px 0 0;
  font-weight: 800
}

.menu-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  color: var(--mt-green);
  font-size: 1.35rem
}

.topbar-actions,
.user-dropdown {
  display: flex;
  align-items: center
}

.topbar-actions {
  gap: 15px
}

.topbar-icon {
  position: relative;
  border: 0;
  background: #f1f6f3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--mt-green)
}

.topbar-icon span {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--mt-orange);
  border-radius: 50%;
  top: 8px;
  right: 8px
}

.user-dropdown {
  gap: 10px;
  border-left: 1px solid var(--line);
  padding-left: 15px
}

.user-avatar,
.account-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mt-green), var(--danken));
  color: #fff;
  font-weight: 800
}

.user-avatar {
  width: 40px;
  height: 40px
}

.user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25
}

.user-meta strong {
  font-size: .82rem
}

.user-meta small {
  font-size: .7rem;
  color: var(--muted)
}

.logout-button {
  border: 0;
  background: transparent;
  color: #7a8580;
  font-size: 1.1rem
}

.content-area {
  flex: 1 0 auto;
  padding: 27px 30px 40px
}

.app-footer {
  flex: 0 0 auto;
  padding: 10px 20px 16px;
  color: #678076;
  font-size: .72rem;
  line-height: 1.35;
  text-align: center
}

.hero-dashboard {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--mt-green-dark), var(--mt-green) 62%, #1b9f5d);
  border-radius: 18px;
  color: #fff;
  padding: 28px 31px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 14px 30px rgba(0, 101, 56, .16)
}

.hero-dashboard:after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border: 48px solid rgba(255, 255, 255, .06);
  border-radius: 50%;
  right: -65px;
  top: -100px
}

.hero-kicker {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 800;
  color: #baf490
}

.hero-dashboard h2 {
  font-size: 1.75rem;
  font-weight: 800;
  margin: 6px 0
}

.hero-dashboard p {
  margin: 0;
  max-width: 660px;
  opacity: .87;
  font-size: .91rem
}

.hero-actions {
  margin-top: 18px;
  display: flex;
  gap: 9px
}

.hero-visual {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-right: 35px
}

.hero-visual i {
  font-size: 4.1rem;
  color: #b6ed83
}

.hero-visual span {
  font-size: .72rem
}

.metric-card,
.panel-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: 0 6px 19px rgba(10, 54, 36, .045)
}

.metric-card {
  position: relative;
  min-height: 126px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease
}

.metric-card:hover {
  color: inherit;
  transform: translateY(-2px);
  box-shadow: 0 9px 24px rgba(10, 54, 36, .1)
}

.metric-card:focus-visible {
  outline: 3px solid rgba(255, 107, 31, .3);
  outline-offset: 2px
}

.metric-card:hover .metric-arrow,
.metric-card:focus-visible .metric-arrow {
  color: var(--mt-orange);
  transform: translate(2px, -2px)
}

.metric-card:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px
}

.metric-green:before {
  background: var(--mt-green)
}

.metric-orange:before {
  background: var(--mt-orange)
}

.metric-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 1.35rem;
  background: #edf8f1;
  color: var(--mt-green)
}

.metric-orange .metric-icon {
  background: #fff2e8;
  color: var(--mt-orange)
}

.metric-content {
  display: flex;
  flex-direction: column
}

.metric-content span {
  font-size: .78rem;
  font-weight: 700;
  color: #53645b
}

.metric-content strong {
  font-size: 1.8rem;
  line-height: 1.15
}

.metric-content small {
  font-size: .65rem;
  color: #8a9790
}

.metric-arrow {
  position: absolute;
  right: 15px;
  top: 15px;
  color: #aab6b0;
  transition: color .2s ease, transform .2s ease
}

.panel-card {
  padding: 22px
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px
}

.panel-header h3 {
  font-size: 1.08rem;
  font-weight: 800;
  margin: 4px 0 0
}

.phase-badge,
.role-badge {
  border-radius: 99px;
  font-size: .7rem;
  font-weight: 800;
  padding: 6px 10px
}

.phase-badge {
  background: #fff0e5;
  color: var(--mt-orange-dark)
}

.role-badge {
  background: #edf8f1;
  color: var(--mt-green-dark)
}

.module-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px
}

.module-card {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px
}

.module-card>i {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 1.12rem
}

.module-card.completed {
  background: #f4fbf7;
  border-color: #c5e4d2
}

.module-card.completed>i {
  background: var(--mt-green);
  color: #fff
}

.module-card.pending>i {
  background: #f2f5f3;
  color: #78877f
}

.module-card div {
  display: flex;
  flex-direction: column
}

.module-card strong {
  font-size: .82rem
}

.module-card small {
  font-size: .68rem;
  color: var(--muted)
}

.module-card>span {
  font-size: .62rem;
  font-weight: 800;
  color: var(--mt-green)
}

.module-card.pending>span {
  color: #8a9690
}

.account-avatar {
  width: 43px;
  height: 43px
}

.account-list {
  margin: 0
}

.account-list dt {
  color: #86928c;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 14px
}

.account-list dd {
  font-size: .84rem;
  font-weight: 600;
  margin: 3px 0 0;
  word-break: break-word
}

.btn-soft {
  background: #edf7f1;
  color: var(--mt-green);
  border: 0;
  font-weight: 700
}

.activity-empty {
  text-align: center;
  padding: 20px 15px 12px
}

.activity-empty>div {
  width: 57px;
  height: 57px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #f0f6f3;
  color: var(--mt-green);
  font-size: 1.35rem
}

.activity-empty strong {
  font-size: .9rem
}

.activity-empty p {
  font-size: .77rem;
  color: var(--muted);
  margin: 5px auto 0;
  max-width: 580px
}

@media(min-width:1200px) {
  .menu-toggle {
    display: none
  }
}

@media(max-width:1199.98px) {
  .app-layout {
    display: block
  }

  .sidebar {
    position: fixed;
    left: -290px;
    width: 280px;
    transition: left .25s ease
  }

  .app-layout.sidebar-open .sidebar {
    left: 0
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 25, 15, .5);
    z-index: 35
  }

  .app-layout.sidebar-open .sidebar-backdrop {
    display: block
  }

  .topbar {
    padding: 12px 18px
  }

  .content-area {
    padding: 20px
  }

  .module-grid {
    grid-template-columns: 1fr
  }
}

@media(max-width:650px) {
  .auth-header {
    padding: 9px 15px
  }

  .auth-header img {
    width: 190px
  }

  .auth-header span {
    display: none
  }

  .auth-page {
    padding: 85px 14px 48px
  }

  .auth-card {
    padding: 23px 21px;
    border-radius: 18px
  }

  .auth-logo-box img {
    height: 92px
  }

  .topbar-icon,
  .user-meta {
    display: none
  }

  .content-area {
    padding: 14px
  }

  .hero-dashboard {
    padding: 23px;
    align-items: flex-start
  }

  .hero-visual {
    display: none
  }

  .hero-dashboard h2 {
    font-size: 1.45rem
  }

  .hero-actions {
    flex-wrap: wrap
  }

  .module-card {
    grid-template-columns: 38px 1fr
  }

  .module-card>span {
    display: none
  }

  .module-card>i {
    width: 38px;
    height: 38px
  }

  .panel-card {
    padding: 17px
  }
}

/*Titulo Empresa*/
.titleempresa {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 20px;
  font-weight: 800;
  color: var(--mt-orange)
}

/*Fecha Actual*/
.current-date {
  margin: 2px 0 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}

/* Visor Leaflet y mapas base */
.viewer-shell {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 7px 22px rgba(10, 54, 36, .06);
  overflow: hidden
}

.viewer-toolbar {
  min-height: 78px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line)
}

.viewer-toolbar h2 {
  font-size: 1.18rem;
  font-weight: 800;
  margin: 2px 0 0
}

.main-map {
  height: calc(100vh - 235px);
  min-height: 540px;
  background: #e9efec
}

.map-status {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 500;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #d5e2db;
  border-radius: 10px;
  padding: 8px 12px;
  color: #52665c;
  font-size: .75rem;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .1)
}

.map-status i {
  color: var(--mt-green);
  margin-right: 5px
}

.leaflet-control-layers {
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .16) !important;
  font-family: Inter, sans-serif
}

.leaflet-control-layers-expanded {
  padding: 12px 14px !important;
  min-width: 220px
}

.leaflet-control-layers-separator {
  border-top-color: #d9e5de !important
}

.geo-popup {
  max-height: 250px;
  overflow: auto
}

.geo-popup table {
  border-collapse: collapse;
  font-size: 11px;
  width: 100%
}

.geo-popup th,
.geo-popup td {
  border-bottom: 1px solid #e4ebe7;
  padding: 5px;
  text-align: left;
  vertical-align: top
}

.geo-popup th {
  color: var(--mt-green-dark);
  font-weight: 700
}

.base-layer-table thead th {
  font-size: .72rem;
  text-transform: uppercase;
  color: #6f8178;
  white-space: nowrap
}

.base-layer-table td {
  vertical-align: middle
}

.attribution-row td {
  background: #f8faf9;
  padding-top: 9px;
  padding-bottom: 14px
}

.font-monospace.small {
  font-size: .72rem !important
}

@media(max-width:767px) {
  .viewer-toolbar {
    align-items: flex-start;
    flex-direction: column
  }

  .main-map {
    height: 70vh;
    min-height: 480px
  }

  .leaflet-control-layers-expanded {
    max-width: 210px
  }

  .map-status {
    display: none
  }
}

/* Capas GeoJSON: formulario y tabla */
.style-section {
  border: 1px solid #d8e2dd;
  border-radius: 16px;
  background: #fff;
  overflow: hidden
}

.style-section-title {
  padding: 16px 20px;
  border-bottom: 1px solid #e4ebe7;
  font-size: 1.05rem;
  font-weight: 800;
  color: #17362b;
  background: #fbfdfc
}

.style-section>.row {
  padding: 20px
}

.color-control {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: #17362b
}

.color-control .form-control-color {
  width: 54px;
  height: 44px;
  padding: 4px;
  border-radius: 10px;
  cursor: pointer
}

.category-pill {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef6f1;
  color: #087a43;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap
}

.layer-style-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 145px;
  font-size: .78rem;
  white-space: nowrap
}

.layer-style-summary span {
  display: flex;
  align-items: center;
  gap: 7px
}

.layer-style-summary i {
  display: inline-block;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, .12)
}

.status-off {
  background: #f1f3f2 !important;
  color: #6c7872 !important
}

.layers-table td {
  vertical-align: middle
}

@media (max-width:767.98px) {
  .style-section>.row {
    padding: 15px
  }

  .style-section-title {
    padding: 14px 16px
  }

  .page-heading {
    gap: 14px
  }

  .page-heading>div:last-child,
  .page-heading>.d-flex {
    width: 100%
  }

  .page-heading .btn {
    flex: 1
  }
}

/* ===== Corrección permanente del encabezado y logo Danken Agro ===== */
.topbar-actions {
  min-width: 0;
  flex-shrink: 0
}

.user-dropdown {
  min-width: 0;
  max-width: 100%;
  overflow: hidden
}

.user-meta {
  min-width: 0;
  max-width: 220px
}

.user-meta strong,
.user-meta small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.topbar-danken-wrap {
  width: 126px !important;
  height: 46px !important;
  max-width: 126px !important;
  flex: 0 0 126px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-left: 1px solid var(--line) !important;
  margin-left: 4px !important;
  padding-left: 12px !important;
}

.topbar-danken-logo {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 112px !important;
  max-height: 40px !important;
  object-fit: contain !important;
  object-position: center !important;
  flex: none !important;
}

@media (max-width:1199.98px) {
  .topbar {
    padding-left: 20px;
    padding-right: 20px
  }

  .topbar-danken-wrap {
    width: 108px !important;
    max-width: 108px !important;
    flex-basis: 108px !important
  }

  .topbar-danken-logo {
    max-width: 94px !important;
    max-height: 34px !important
  }

  .user-meta {
    max-width: 165px
  }
}

@media (max-width:991.98px) {
  .topbar {
    height: 76px
  }

  .topbar h1 {
    font-size: 1.12rem
  }

  .topbar-danken-wrap {
    width: 94px !important;
    max-width: 94px !important;
    flex-basis: 94px !important;
    height: 40px !important
  }

  .topbar-danken-logo {
    max-width: 80px !important;
    max-height: 30px !important
  }

  .user-meta {
    max-width: 135px
  }
}

@media (max-width:767.98px) {
  .topbar {
    padding: 10px 12px;
    gap: 8px
  }

  .topbar-left {
    gap: 8px;
    min-width: 0
  }

  .topbar-left>div {
    min-width: 0
  }

  .topbar h1 {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 42vw
  }

  .topbar .eyebrow {
    font-size: .58rem
  }

  .topbar-actions {
    gap: 7px
  }

  .user-dropdown {
    gap: 7px;
    padding-left: 8px
  }

  .user-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px
  }

  .topbar-danken-wrap {
    display: none !important
  }
}

@media (max-width:479.98px) {
  .topbar-icon {
    display: none !important
  }

  .topbar h1 {
    max-width: 48vw
  }

  .logout-button {
    padding: 4px
  }
}

/* Acciones CRUD corporativas */
.btn-edit {
  background: #e8f6ee !important;
  border: 1px solid #b9dfc8 !important;
  color: #08733f !important;
  font-weight: 700
}

.btn-edit:hover {
  background: #d7efdf !important;
  color: #075f35 !important
}

.btn-delete {
  background: #fff1e8 !important;
  border: 1px solid #ffc49e !important;
  color: #e56817 !important;
  font-weight: 700
}

.btn-delete:hover {
  background: #ffe2cf !important;
  color: #bd4f0b !important
}

/* =========================================================
   DANKEN AGRO / MAPTERRA - MENÚ LATERAL CORPORATIVO BLANCO
   Mantener este bloque al final del archivo.
   ========================================================= */
:root {
  --sidebar-bg: #ffffff;
  --sidebar-text: #006b3d;
  --sidebar-muted: #5f8f78;
  --sidebar-hover: #edf8f2;
  --sidebar-active: #079b55;
  --sidebar-border: #dfe8e3;
}

.sidebar {
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
  border-right: 1px solid var(--sidebar-border);
  box-shadow: 5px 0 24px rgba(5, 40, 27, .07);
  overflow: hidden;
}

.sidebar-head {
  flex: 0 0 90px;
  height: 90px;
  background: #fff !important;
  border-bottom: 1px solid var(--sidebar-border);
  position: relative;
  z-index: 2;
}

.sidebar-brand img {
  width: 215px;
  max-width: 100%;
  height: 58px;
  object-fit: contain;
  object-position: left center;
}

.sidebar-product {
  display: none !important;
}

.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 13px 22px;
  background: #fff !important;
  scrollbar-width: thin;
  scrollbar-color: #bfd8cb transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 7px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: #bfd8cb;
  border-radius: 10px;
}

.nav-caption {
  color: var(--sidebar-muted) !important;
  margin: 15px 12px 7px;
  padding-top: 2px;
  line-height: 1.3;
  background: #fff;
}

.sidebar-nav .nav-caption:first-child {
  margin-top: 2px;
}

.sidebar-nav a {
  color: var(--sidebar-text) !important;
  background: #fff;
  min-height: 48px;
  margin: 1px 0;
}

.sidebar-nav a i {
  color: #009554 !important;
}

.sidebar-nav a:hover {
  color: var(--sidebar-text) !important;
  background: var(--sidebar-hover) !important;
  box-shadow: none !important;
}

.sidebar-nav a.active {
  color: #fff !important;
  background: linear-gradient(90deg, var(--sidebar-active), #0aa35e) !important;
  box-shadow: 0 7px 15px rgba(0, 130, 71, .16) !important;
}

.sidebar-nav a.active i {
  color: #fff !important;
}

.sidebar-nav a.active:before {
  background: var(--mt-orange) !important;
}

.sidebar-nav a small {
  color: #087444 !important;
  background: #e5f4eb !important;
}

.sidebar-nav a.active small {
  color: #fff !important;
  background: rgba(255, 255, 255, .18) !important;
}

.sidebar-footer {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 14px 17px;
  background: #fff !important;
  color: var(--sidebar-text) !important;
  border-top: 1px solid var(--sidebar-border) !important;
  position: relative;
  z-index: 2;
}

.sidebar-footer strong {
  color: #075f39 !important;
}

.sidebar-footer small {
  color: #67917d !important;
}

/* Botones corporativos */
.btn-primary,
.btn-success,
.btn-register,
button[type="submit"] {
  background: #008247;
  border-color: #008247;
  color: #fff;
}

.btn-primary:hover,
.btn-success:hover,
.btn-register:hover,
button[type="submit"]:hover {
  background: #006f3d;
  border-color: #006f3d;
  color: #fff;
}

.btn-outline-secondary,
.btn-outline-secondary.btn-sm {
  background: transparent;
  border-color: #ced4da;
  color: #495057;
}

.btn-outline-secondary:hover,
.btn-outline-secondary.btn-sm:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
  color: #212529;
}

.btn-edit,
.btn-soft,
.btn-outline-success {
  background: #e8f6ee;
  border-color: #b9dfc9;
  color: #00733f;
}

.btn-edit:hover,
.btn-soft:hover,
.btn-outline-success:hover {
  background: #d8efdf;
  border-color: #8bc7a5;
  color: #005f35;
}

.btn-delete,
.btn-danger,
.btn-outline-danger {
  background: #fff1e8;
  border-color: #ffb17e;
  color: #d95d0b;
}

.btn-delete:hover,
.btn-danger:hover,
.btn-outline-danger:hover {
  background: #f58220;
  border-color: #f58220;
  color: #fff;
}

@media(max-width:1199.98px) {
  .sidebar {
    background: #fff !important;
  }

  .sidebar-head {
    height: 82px;
    flex-basis: 82px;
  }

  .sidebar-nav {
    padding-top: 14px;
  }
}

/* Módulo Clientes */
.client-form .form-section-title,
.form-section-title {
  display: flex;
  align-items: flex-start;
  gap: .85rem
}

.form-section-title>i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #e9f7ef;
  color: #087a43;
  font-size: 1.15rem
}

.form-section-title h3 {
  font-size: 1.05rem;
  margin: 0 0 .2rem;
  font-weight: 800
}

.form-section-title p {
  margin: 0;
  color: #738078;
  font-size: .9rem
}

.client-form .form-label {
  font-weight: 700;
  color: #173127
}

.client-form .form-control,
.client-form .form-select {
  min-height: 48px;
  border-radius: 12px
}

.client-form textarea.form-control {
  min-height: 110px
}

.pagination .page-link {
  color: #087a43
}

.pagination .page-item.active .page-link {
  background: #087a43;
  border-color: #087a43;
  color: #fff
}

@media(max-width:767.98px) {
  .page-heading {
    align-items: flex-start
  }

  .page-heading>.btn,
  .page-heading>div+.btn {
    width: 100%
  }

  .client-form {
    padding: 1rem
  }

  .admin-table td,
  .admin-table th {
    white-space: nowrap
  }
}


/* Submenú Mapas PDF por categoría para Danken Agro y Técnico */
.sidebar-submenu {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 4px;
}

.sidebar-submenu:not(.open) .sidebar-submenu-link {
  display: none !important;
}

.sidebar-submenu-title {
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #08733f;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.sidebar-submenu-title.active {
  background: linear-gradient(90deg, var(--sidebar-active), #0aa35e);
  color: #fff;
}

.sidebar-submenu-title.active>i:first-child {
  color: #fff;
}

.sidebar-submenu-title.active .submenu-chevron {
  color: #fff;
}

.sidebar-submenu.open .sidebar-submenu-title .submenu-chevron {
  transform: rotate(180deg);
}

.sidebar-submenu-title>i:first-child {
  font-size: 1.06rem;
  width: 20px;
  text-align: center;
  color: #009554;
}

.sidebar-submenu-title .submenu-chevron {
  margin-left: auto;
  font-size: .75rem;
  color: #7b9b8b;
  transition: transform .25s ease;
}

.sidebar-submenu.open .sidebar-submenu-title .submenu-chevron {
  transform: rotate(180deg);
}

.sidebar-submenu.open .sidebar-submenu-link {
  display: flex !important;
}

.sidebar-nav .sidebar-submenu-link {
  min-height: 38px;
  margin-left: 22px;
  padding: 8px 10px 8px 14px;
  font-size: .8rem;
  border-left: 2px solid #d9ebe1;
  border-radius: 0 9px 9px 0;
  color: #08733f !important;
}

.sidebar-nav .sidebar-submenu-link i {
  font-size: .92rem !important;
  width: 17px;
  color: #009554 !important;
}

.sidebar-nav .sidebar-submenu-link:hover {
  background: #eef8f2 !important;
  color: #08733f !important;
  box-shadow: none !important;
}

.sidebar-nav .sidebar-submenu-link.active {
  background: #e7f5ed !important;
  color: #08733f !important;
  box-shadow: none !important;
  border-left-color: var(--mt-orange) !important;
}

.sidebar-nav .sidebar-submenu-link.active:before {
  display: none !important;
}

.sidebar-nav .sidebar-submenu-link.active i {
  color: #08733f !important;
}

@media(max-width:1199.98px) {
  .sidebar-nav .sidebar-submenu-link {
    margin-left: 14px;
  }
}

.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.page-heading .section-label {
  display: inline-block;
  margin-bottom: .7rem;
}

/* Estándar visual para tablas administrativas */
.content-area .table {
  --bs-table-bg: transparent;
  --bs-table-border-color: #e1e8e4;
  margin-bottom: 0
}

.content-area .table thead th {
  padding: .9rem .8rem;
  border-bottom: 1px solid #dce6e0;
  background: #f8faf9;
  color: #587066;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
  vertical-align: middle
}

.content-area .table tbody td {
  padding: .85rem .8rem;
  border-color: #e7ede9;
  vertical-align: middle
}

.content-area .table tbody tr:last-child td {
  border-bottom: 0
}

.content-area .table tbody tr:hover {
  background: rgba(248, 250, 249, .75)
}

.content-area .table .badge {
  font-weight: 700
}

.content-area .table.admin-table tbody tr:hover {
  background: transparent
}

.sidebar-nav .nav-caption--group {
  margin-top: 18px;
  margin-bottom: 2px;
  color: #86a797;
  font-size: .59rem
}

/* Mensajes globales de acciones */
.action-feedback {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease
}

.action-feedback.is-visible {
  opacity: 1;
  visibility: visible
}

.action-feedback__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 28, 22, .45);
  backdrop-filter: blur(2px)
}

.action-feedback__card {
  position: relative;
  width: min(100%, 620px);
  overflow: hidden;
  border-radius: 9px;
  background: #fff;
  padding: 42px 46px 0;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  transform: translateY(18px) scale(.97);
  transition: transform .25s ease
}

.action-feedback.is-visible .action-feedback__card {
  transform: translateY(0) scale(1)
}

.action-feedback__icon {
  width: 110px;
  height: 110px;
  margin: 5px auto 28px;
  display: grid;
  place-items: center;
  border: 5px solid #dff2d5;
  border-radius: 50%;
  color: #9cd778;
  font-size: 4.1rem;
  line-height: 1
}

.action-feedback__card h2 {
  margin: 0;
  color: #515151;
  font-size: 2rem;
  font-weight: 700
}

.action-feedback__card p {
  margin: 18px 0 34px;
  color: #5d5d5d;
  font-size: 1.35rem
}

.action-feedback__progress {
  height: 5px;
  margin: 0 -46px;
  background: #edf0ed
}

.action-feedback__progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: #9cd778;
  transform-origin: left;
  animation: action-feedback-progress 3s linear forwards
}

.action-feedback__close {
  position: absolute;
  top: 14px;
  right: 16px;
  border: 0;
  background: transparent;
  color: #879088;
  font-size: 1.1rem;
  line-height: 1;
  opacity: .7
}

.action-feedback__close:hover {
  color: #3f4a43;
  opacity: 1
}

.action-feedback__card--error .action-feedback__icon {
  border-color: #f7c7c7;
  color: #e26c6c
}

.action-feedback__card--error .action-feedback__progress span {
  background: #e26c6c
}

@keyframes action-feedback-progress {
  from {
    transform: scaleX(1)
  }

  to {
    transform: scaleX(0)
  }
}

@media(max-width:575px) {
  .action-feedback__card {
    padding: 35px 25px 0
  }

  .action-feedback__icon {
    width: 90px;
    height: 90px;
    margin-bottom: 22px;
    font-size: 3.35rem
  }

  .action-feedback__card h2 {
    font-size: 1.7rem
  }

  .action-feedback__card p {
    font-size: 1.05rem;
    margin: 14px 0 28px
  }

  .action-feedback__progress {
    margin: 0 -25px
  }
}

/* Responsive shell and content safeguards */
html {
  overflow-x: hidden
}

img,
svg,
canvas {
  max-width: 100%
}

.content-area {
  min-width: 0;
  overflow-x: hidden
}

.table-responsive {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch
}

.table-responsive>table {
  min-width: 100%
}

.form-control,
.form-select,
textarea {
  max-width: 100%
}

@media (max-width: 767.98px) {
  .content-area {
    padding-left: 14px;
    padding-right: 14px
  }

  .page-heading,
  .panel-header,
  .viewer-toolbar {
    align-items: flex-start;
    flex-direction: column
  }

  .page-heading>*,
  .panel-header>* {
    max-width: 100%
  }

  .page-heading .btn,
  .page-heading a.btn,
  .panel-header .btn {
    width: 100%
  }

  .hero-dashboard {
    padding: 22px 18px
  }

  .hero-actions .btn {
    flex: 1 1 100%
  }

  .panel-card {
    padding: 16px
  }

  .form-section-title {
    gap: .65rem
  }

  .main-map {
    min-height: 420px
  }

  .sidebar {
    z-index: 1100
  }

  .sidebar-backdrop {
    z-index: 1050
  }

  .leaflet-control-layers-expanded {
    width: min(250px, calc(100vw - 32px));
    max-height: calc(100% - 24px);
    overflow-y: auto;
    overflow-x: hidden
  }
}

@media (max-width: 479.98px) {
  .auth-page {
    padding-left: 10px;
    padding-right: 10px
  }

  .auth-card {
    padding-left: 16px;
    padding-right: 16px
  }

  .topbar {
    padding-left: 10px;
    padding-right: 10px
  }

  .titleempresa {
    font-size: 16px
  }

  .current-date {
    font-size: .7rem
  }

  .table-responsive {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: #a9cbbb #f2f7f4
  }

  .table-responsive::-webkit-scrollbar {
    height: 8px
  }

  .table-responsive::-webkit-scrollbar-track {
    background: #f2f7f4
  }

  .table-responsive::-webkit-scrollbar-thumb {
    background: #a9cbbb;
    border-radius: 8px
  }

  .table-responsive>.admin-table {
    width: max-content;
    min-width: 720px;
    table-layout: auto !important
  }

  .table-responsive>.admin-table th,
  .table-responsive>.admin-table td {
    padding: .68rem .62rem;
    font-size: .78rem;
    white-space: normal;
    vertical-align: middle
  }

  .table-responsive>.admin-table th {
    font-size: .66rem;
    white-space: nowrap
  }

  .table-responsive>.admin-table th:first-child,
  .table-responsive>.admin-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    box-shadow: 4px 0 7px rgba(23, 55, 39, .07)
  }

  .table-responsive>.admin-table thead th:first-child {
    z-index: 2;
    background: #f8faf9
  }

  .table-responsive>.admin-table td:last-child {
    min-width: 190px
  }

  .table-responsive>.admin-table td:last-child .d-flex {
    flex-wrap: nowrap;
    min-width: max-content
  }

  .table-responsive>.admin-table td:last-child form {
    display: flex;
    flex: 0 0 auto
  }

  .table-responsive>.admin-table .btn {
    width: 38px;
    min-width: 38px;
    height: 36px;
    padding: .35rem
  }

  .table-responsive>.dashboard-activity-table {
    min-width: 620px
  }

  .table-responsive>.audit-log-table {
    width: 100% !important;
    min-width: 0;
    table-layout: auto !important;
    border-collapse: separate;
    border-spacing: 0
  }

  .table-responsive>.audit-log-table th,
  .table-responsive>.audit-log-table td {
    white-space: normal;
    overflow-wrap: anywhere
  }

  .table-responsive>.audit-log-table th:nth-child(1),
  .table-responsive>.audit-log-table td:nth-child(1) {
    width: 78px;
    min-width: 78px
  }

  .table-responsive>.audit-log-table th:nth-child(2),
  .table-responsive>.audit-log-table td:nth-child(2) {
    min-width: 105px
  }

  .table-responsive>.audit-log-table th:nth-child(4),
  .table-responsive>.audit-log-table td:nth-child(4) {
    min-width: 78px
  }

  .table-responsive>.audit-log-table th:nth-child(5),
  .table-responsive>.audit-log-table td:nth-child(5) {
    min-width: 88px
  }

  .table-responsive>.audit-log-table th:nth-child(8),
  .table-responsive>.audit-log-table td:nth-child(8) {
    width: 78px;
    min-width: 78px
  }

  .table-responsive>.audit-log-table th:nth-child(3),
  .table-responsive>.audit-log-table td:nth-child(3),
  .table-responsive>.audit-log-table th:nth-child(6),
  .table-responsive>.audit-log-table td:nth-child(6),
  .table-responsive>.audit-log-table th:nth-child(7),
  .table-responsive>.audit-log-table td:nth-child(7) {
    display: none
  }

  .table-responsive>.audit-log-table td:nth-child(8) .d-flex {
    flex-wrap: nowrap;
    min-width: max-content
  }
}

@media (max-width: 767.98px) {
  .table-responsive>.audit-log-table,
  .table-responsive>.audit-log-table tbody,
  .table-responsive>.audit-log-table tr {
    display: block
  }

  .table-responsive>.audit-log-table thead {
    display: none
  }

  .table-responsive>.audit-log-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .65rem 1rem;
    padding: .9rem .75rem;
    border-bottom: 1px solid var(--line)
  }

  .table-responsive>.audit-log-table tr:last-child {
    border-bottom: 0
  }

  .table-responsive>.audit-log-table td,
  .table-responsive>.audit-log-table td:first-child,
  .table-responsive>.audit-log-table td:last-child {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: left !important
  }

  .table-responsive>.audit-log-table td:nth-child(1)::before,
  .table-responsive>.audit-log-table td:nth-child(2)::before,
  .table-responsive>.audit-log-table td:nth-child(4)::before,
  .table-responsive>.audit-log-table td:nth-child(5)::before,
  .table-responsive>.audit-log-table td:nth-child(8)::before {
    display: block;
    margin-bottom: .2rem;
    color: #718279;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase
  }

  .table-responsive>.audit-log-table th:nth-child(3),
  .table-responsive>.audit-log-table td:nth-child(3),
  .table-responsive>.audit-log-table th:nth-child(6),
  .table-responsive>.audit-log-table td:nth-child(6),
  .table-responsive>.audit-log-table th:nth-child(7),
  .table-responsive>.audit-log-table td:nth-child(7) {
    display: none
  }

  .table-responsive>.audit-log-table td:nth-child(1)::before { content: "Fecha" }
  .table-responsive>.audit-log-table td:nth-child(2)::before { content: "Usuario" }
  .table-responsive>.audit-log-table td:nth-child(4)::before { content: "Módulo" }
  .table-responsive>.audit-log-table td:nth-child(5)::before { content: "Acción" }
  .table-responsive>.audit-log-table td:nth-child(8)::before { content: "Detalle" }

  .table-responsive>.audit-log-table td:nth-child(8) {
    grid-column: 1 / -1;
    padding-top: .2rem
  }

  .table-responsive>.audit-log-table td:nth-child(8) .d-flex {
    justify-content: flex-start;
    min-width: 0
  }

  .table-responsive>.audit-log-table tr:has(td[colspan]) {
    display: block
  }
}

/* =========================================================
   RESPONSIVE SYSTEM LAYER
   Shared behavior for phones, tablets, laptops and touch UI.
   ========================================================= */
:root {
  --app-gutter: clamp(14px, 2.1vw, 30px);
  --mobile-control-height: 44px;
}

html {
  width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
.app-layout,
.main-area,
.content-area {
  min-width: 0;
  max-width: 100%;
}

body {
  width: 100%;
  overflow-x: hidden;
}

.main-area {
  width: 100%;
  overflow-x: clip;
}

.content-area {
  padding-inline: var(--app-gutter);
}

.content-area > *,
.content-area .row > *,
.panel-card > *,
.card-panel > * {
  min-width: 0;
}

.content-area h1,
.content-area h2,
.content-area h3,
.content-area h4,
.content-area p,
.alert,
.badge,
.form-text,
.text-muted {
  overflow-wrap: anywhere;
}

.content-area h2 {
  font-size: clamp(1.45rem, 2.3vw, 2rem);
}

.content-area h3 {
  font-size: clamp(1.08rem, 1.8vw, 1.45rem);
}

pre,
code {
  max-width: 100%;
}

pre {
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.table-responsive {
  position: relative;
  width: 100%;
  overscroll-behavior-inline: contain;
}

.table-responsive table {
  margin-bottom: 0;
}

.form-control,
.form-select,
.input-group,
.form-check-label {
  min-width: 0;
}

textarea.form-control {
  resize: vertical;
}

.btn,
.form-control,
.form-select,
.form-check-input,
.sidebar-nav a,
.sidebar-submenu-title {
  touch-action: manipulation;
}

.leaflet-container {
  max-width: 100%;
  font-family: inherit;
}

/* Leaflet renders vector GeoJSON layers on an oversized canvas. A responsive
   max-width collapses that canvas because its map panes have no layout width. */
.leaflet-container canvas {
  max-width: none !important;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-content {
  max-width: calc(100vw - 72px);
}

.leaflet-popup-content {
  overflow-wrap: anywhere;
}

.leaflet-control-layers-expanded {
  max-width: min(290px, calc(100vw - 44px));
  max-height: min(520px, calc(100dvh - 150px));
  overflow: auto;
}

.property-import-map {
  width: 100%;
  height: clamp(430px, 65dvh, 620px);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #dfe8e3;
}

@media (max-width: 1199.98px) {
  .content-area {
    padding-block: 22px 34px;
  }

  body .gee-grid,
  body .rain-grid {
    gap: .85rem;
  }
}

@media (max-width: 1199.98px) {
  .app-layout {
    display: block;
    min-height: 100dvh;
  }

  .sidebar {
    left: 0 !important;
    width: min(280px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px);
    height: 100dvh;
    z-index: 1200 !important;
    transform: translate3d(-105%, 0, 0);
    transition: transform .25s ease;
    will-change: transform;
    box-shadow: 12px 0 35px rgba(5, 40, 27, .2);
  }

  .app-layout.sidebar-open .sidebar {
    left: 0 !important;
    transform: translate3d(0, 0, 0);
  }

  .sidebar-backdrop {
    display: block !important;
    z-index: 1150 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
  }

  .app-layout.sidebar-open .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.sidebar-is-open {
    overflow: hidden;
    touch-action: none;
  }

  .sidebar-head {
    height: 74px;
    flex-basis: 74px;
    padding-inline: 12px;
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .sidebar-brand img {
    width: 180px;
    height: 50px;
  }

  .sidebar-close {
    display: inline-grid !important;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 11px;
    color: var(--mt-green-dark);
  }

  .sidebar-nav {
    gap: 2px;
    padding: 10px 9px max(18px, env(safe-area-inset-bottom));
  }

  .sidebar-nav .nav-caption {
    margin: 10px 10px 4px;
  }

  .sidebar-nav a,
  .sidebar-submenu-title {
    min-height: 44px;
    padding: 8px 10px;
    font-size: .84rem;
  }

  .sidebar-footer {
    padding: 11px 13px;
  }

  .topbar {
    min-height: 72px;
    height: auto;
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .menu-toggle {
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
  }

  body .gee-grid,
  body .rain-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .gee-panel,
  body .gee-map-card {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
  }

  body .gee-map-wrap {
    height: clamp(480px, 68dvh, 650px) !important;
    min-height: 480px !important;
  }

  body .rain-map-wrap {
    height: clamp(380px, 56dvh, 520px) !important;
  }

  body .chart-wrap {
    height: clamp(340px, 48dvh, 440px) !important;
  }

  body .cadastre-map,
  .main-map,
  .property-import-map,
  body #property-map,
  body .property-map-large {
    height: clamp(460px, 66dvh, 650px) !important;
    min-height: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .table-responsive {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #91a99d #eef4f0;
  }

  .table-responsive::-webkit-scrollbar {
    height: 9px;
  }

  .table-responsive::-webkit-scrollbar-track {
    background: #eef4f0;
    border-radius: 999px;
  }

  .table-responsive::-webkit-scrollbar-thumb {
    background: #91a99d;
    border-radius: 999px;
  }

  .table-responsive > .admin-table {
    width: max-content;
    min-width: 960px;
    table-layout: auto !important;
  }

  .table-responsive > .audit-log-table {
    width: 1120px !important;
    min-width: 1120px;
    table-layout: fixed !important;
  }

  .table-responsive > .audit-log-table th,
  .table-responsive > .audit-log-table td {
    overflow-wrap: normal;
    word-break: normal;
  }

  .table-responsive > .audit-log-table .badge {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.15;
  }

  .table-responsive > .audit-log-table td:nth-child(4),
  .table-responsive > .audit-log-table td:nth-child(5) {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 767.98px) {
  :root {
    --app-gutter: 14px;
  }

  .content-area {
    padding-top: 16px;
    padding-bottom: max(26px, env(safe-area-inset-bottom));
  }

  .content-area .row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
  }

  .page-heading,
  .panel-header,
  .viewer-toolbar,
  body .gee-map-head {
    width: 100%;
    gap: .8rem;
    align-items: stretch !important;
  }

  .page-heading > *,
  .panel-header > *,
  .viewer-toolbar > *,
  body .gee-map-head > * {
    width: 100%;
    max-width: 100%;
  }

  .page-heading .d-flex,
  .panel-header .d-flex,
  .viewer-toolbar .d-flex,
  body .gee-toolbar {
    width: 100%;
    flex-wrap: wrap;
  }

  .page-heading .d-flex > .btn,
  .panel-header .d-flex > .btn,
  .viewer-toolbar .d-flex > .btn,
  .viewer-toolbar .d-flex > a.btn {
    flex: 1 1 190px;
  }

  .panel-card,
  .content-area .card-panel {
    border-radius: 14px;
  }

  .content-area .card-panel.p-4,
  .content-area .panel-card {
    padding: 16px !important;
  }

  .hero-dashboard {
    border-radius: 14px;
  }

  .hero-actions {
    width: 100%;
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .module-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .module-card {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .table-responsive > .admin-table,
  .table-responsive > .base-layer-table,
  .table-responsive > .layers-table,
  .table-responsive > .dashboard-activity-table {
    width: max-content;
    min-width: 720px;
    table-layout: auto !important;
  }

  .modal-dialog {
    max-width: calc(100vw - 1rem);
  }

  body .gee-panel,
  body .gee-map-card,
  body .rain-card {
    border-radius: 14px;
  }

  body .gee-map-head {
    flex-direction: column;
  }

  body .gee-toolbar .form-select {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100%;
  }

  body .gee-toolbar .btn {
    flex: 1 1 130px;
  }

  body .gee-legend,
  body .gee-legends,
  body .rain-legend {
    max-width: calc(100% - 20px) !important;
  }

  body .gee-legends {
    left: 8px !important;
    bottom: 8px !important;
    max-height: 55% !important;
  }

  body .rain-legend {
    right: 8px !important;
    top: 8px !important;
  }

  body .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body .stat {
    padding: .8rem;
  }

  body .stat strong {
    font-size: clamp(1rem, 4vw, 1.35rem);
  }

  body .cadastre-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .cadastre-actions {
    grid-column: auto !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .property-tabs {
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .property-tab {
    scroll-snap-align: start;
  }

  .property-basemap-select {
    min-width: 0 !important;
    width: 100%;
  }

  .main-map {
    height: clamp(430px, 65dvh, 600px) !important;
  }

  .map-status {
    display: block !important;
    left: 8px;
    right: 8px;
    bottom: 8px;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .leaflet-control-layers-expanded {
    font-size: .78rem;
    max-height: 45dvh;
  }

  .viewer-shell .leaflet-control-layers-expanded {
    width: min(235px, calc(100vw - 105px));
    min-width: 0;
    max-height: min(46dvh, 350px);
    padding: 8px 10px !important;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: .7rem;
    line-height: 1.25;
  }

  .viewer-shell .leaflet-control-layers-expanded label {
    margin-bottom: 2px;
  }

  .viewer-shell .leaflet-control-layers-toggle {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 575.98px) {
  .topbar {
    padding-inline: max(10px, env(safe-area-inset-left));
  }

  .topbar-left {
    flex: 1 1 auto;
    overflow: hidden;
  }

  .titleempresa {
    display: block;
    max-width: 48vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .92rem;
  }

  .current-date {
    font-size: .64rem;
    white-space: nowrap;
  }

  .topbar-actions,
  .user-dropdown {
    gap: 5px;
  }

  .user-dropdown {
    border-left: 0;
    padding-left: 0;
  }

  .user-avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: .85rem;
  }

  .logout-button {
    width: 36px;
    height: 40px;
    display: grid;
    place-items: center;
  }

  .auth-page {
    min-height: 100dvh;
    padding-top: 82px;
    padding-bottom: max(42px, env(safe-area-inset-bottom));
  }

  .auth-header {
    height: 68px;
    padding-inline: 14px;
  }

  .auth-header img {
    width: min(185px, 62vw);
    height: 46px;
  }

  .auth-card-wrap {
    width: 100%;
  }

  .auth-card {
    padding: 20px 16px;
    border-radius: 16px;
  }

  .auth-logo-box img {
    width: min(180px, 65vw);
    height: 82px;
  }

  .auth-title {
    font-size: 1.35rem;
  }

  .content-area form .row > .col-6,
  .content-area form .row > [class*="col-sm-"],
  .content-area form .row > [class*="col-md-"] {
    flex: 0 0 auto;
    width: 100%;
  }

  .content-area form .col-12.d-flex.justify-content-end {
    flex-wrap: wrap;
  }

  .content-area form .col-12.d-flex.justify-content-end > .btn,
  .content-area form .col-12.d-flex.justify-content-end > button {
    flex: 1 1 150px;
  }

  .page-heading .btn,
  .page-heading a.btn,
  .panel-header .btn {
    white-space: normal;
  }

  .module-card {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 11px;
  }

  .module-card > span {
    display: none;
  }

  body .gee-panel,
  body .rain-card {
    padding: .85rem !important;
  }

  body .gee-results {
    height: min(52dvh, 420px) !important;
    min-height: 300px !important;
  }

  body .gee-map-wrap,
  body .rain-map-wrap,
  body .cadastre-map,
  .main-map,
  .property-import-map,
  body #property-map,
  body .property-map-large {
    height: clamp(360px, 58dvh, 500px) !important;
    min-height: 360px !important;
  }

  body .property-map-summary {
    height: 300px !important;
  }

  body .gee-image-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .gee-preview-btn {
    width: 100%;
  }

  body .stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body .cadastre-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  body .cadastre-actions .btn {
    width: 100%;
  }

  .leaflet-control-zoom a {
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
  }

  .leaflet-control-attribution {
    max-width: 72vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 8px !important;
  }
}

/* GeoJSON Municipios: controles legibles y acciones compactas en tablet. */
@media (min-width: 576px) and (max-width: 1399.98px) {
  .municipality-page-heading .municipality-heading-actions,
  .page-heading .layers-heading-actions {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
  }

  .municipality-page-heading .municipality-heading-actions > .btn,
  .page-heading .layers-heading-actions > .btn {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  #municipality-filter-form > .municipality-filter-wide {
    flex: 0 0 auto;
    width: 50%;
  }

  #municipality-filter-form > .municipality-filter-compact {
    flex: 0 0 auto;
    width: 33.333333%;
  }

  #layers-filter-form > .layers-filter-search,
  #layers-filter-form > .layers-filter-reset {
    flex: 0 0 auto;
    width: 100%;
  }

  #layers-filter-form > .layers-filter-field {
    flex: 0 0 auto;
    width: 50%;
  }

  #documents-filter-form > .documents-filter-search,
  #documents-filter-form > .documents-filter-reset {
    flex: 0 0 auto;
    width: 100%;
  }

  #documents-filter-form > .documents-filter-field {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* Análisis satelital: evita que el resumen del mapa se comprima contra los filtros. */
body .satellite-map-card .gee-map-title {
  min-width: min(220px, 100%);
}

body .satellite-map-card .gee-map-title strong {
  display: block;
  line-height: 1.25;
  word-break: normal;
}

body .satellite-map-card .gee-map-title small {
  margin-top: .2rem;
  overflow-wrap: anywhere;
}

body .satellite-map-card .gee-toolbar {
  min-width: 0;
}

@media (min-width: 768px) {
  body .satellite-map-card .gee-map-title {
    flex: 1 1 220px;
  }

  body .satellite-map-card .gee-toolbar {
    width: auto;
    flex: 0 1 auto;
    justify-content: flex-end;
    margin-left: auto;
  }

  body .topography-map-card .gee-map-title {
    flex: 1 1 auto;
    min-width: 0;
  }

  body .topography-map-card .gee-toolbar {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin-left: auto;
  }
}

@media (max-width: 767.98px) {
  body .satellite-map-card .gee-map-title {
    flex: 0 0 auto;
  }

  body .satellite-map-card .gee-toolbar {
    flex: 0 0 auto;
    align-content: flex-start;
  }
}

/* Capas GeoJSON: tabla utilizable en tablets horizontales con menú fijo. */
@media (min-width: 768px) and (max-width: 1399.98px) {
  #layers-results .table-responsive {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #91a99d #eef4f0;
  }

  #layers-results .table-responsive::-webkit-scrollbar {
    height: 9px;
  }

  #layers-results .table-responsive::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #eef4f0;
  }

  #layers-results .table-responsive::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #91a99d;
  }

  #layers-results .layers-table {
    width: 960px !important;
    min-width: 960px !important;
    table-layout: fixed !important;
  }

  #layers-results .layers-table th:nth-child(1) { width: 190px; }
  #layers-results .layers-table th:nth-child(2) { width: 105px; }
  #layers-results .layers-table th:nth-child(3) { width: 135px; }
  #layers-results .layers-table th:nth-child(4) { width: 105px; }
  #layers-results .layers-table th:nth-child(5) { width: 180px; }
  #layers-results .layers-table th:nth-child(6) { width: 95px; }
  #layers-results .layers-table th:nth-child(7) { width: 150px; }

  #layers-results .layers-table th,
  #layers-results .layers-table td {
    word-break: normal;
    overflow-wrap: normal;
  }

  #layers-results .layers-table th:first-child,
  #layers-results .layers-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 1px 0 0 #e1e8e4;
  }

  #layers-results .layers-table th:first-child {
    z-index: 3;
    background: #f8faf9;
  }

  #layers-results .layers-table td:first-child small {
    overflow-wrap: anywhere;
  }

  #layers-results .layers-table td:last-child .d-flex {
    min-width: max-content;
    flex-wrap: nowrap !important;
  }
}

@media (max-width: 379.98px) {
  :root {
    --app-gutter: 10px;
  }

  .content-area .card-panel.p-4,
  .content-area .panel-card {
    padding: 13px !important;
  }

  .sidebar {
    width: min(272px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px);
  }

  .menu-toggle {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .titleempresa {
    max-width: 42vw;
    font-size: .82rem;
  }

  .user-avatar {
    display: none;
  }

  body .gee-map-wrap,
  body .rain-map-wrap,
  body .cadastre-map,
  .main-map,
  .property-import-map,
  body #property-map,
  body .property-map-large {
    min-height: 330px !important;
    height: 55dvh !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .btn,
  .menu-toggle,
  .logout-button,
  .sidebar-close,
  .pagination .page-link {
    min-height: var(--mobile-control-height);
  }

  .btn-sm {
    padding-block: .55rem;
  }

  .form-check-input {
    width: 1.15em;
    height: 1.15em;
  }
}

@media (max-width: 575.98px) {
  .auth-card-wrap {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    min-width: 0;
    justify-self: center;
  }

  .auth-card,
  .auth-card form,
  .auth-card .input-icon-wrap,
  .auth-card .form-control {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .auth-subtitle,
  .forgot-link,
  .login-security {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Desktop application shell: only the visible content area scrolls. */
@media (min-width: 1200px) {
  html,
  body.app-body {
    height: 100%;
    overflow: hidden;
  }

  .app-layout {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .sidebar {
    position: relative;
    top: auto;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .sidebar-nav {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }

  .main-area {
    height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .topbar {
    position: relative;
    top: auto;
    flex: 0 0 auto;
  }

  .content-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }
}

/* Consistent visible date format: DD/MM/YY; native values remain YYYY-MM-DD. */
.date-display-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

.date-display-input {
  width: 100%;
  padding-right: 42px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  background-color: #fff;
}

.date-display-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  z-index: 2;
  transform: translateY(-50%);
  color: #53645b;
  pointer-events: none;
}

.date-native-source {
  position: absolute !important;
  inset: 0;
  z-index: 3;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  opacity: 0;
  cursor: pointer;
}

.date-display-wrap:focus-within .date-display-input {
  border-color: var(--mt-green);
  box-shadow: 0 0 0 .22rem rgba(0, 130, 71, .13);
}

.date-native-source:disabled {
  cursor: not-allowed;
}

.date-display-input:disabled {
  color: #6c757d;
  background-color: #e9ecef;
}

@media (max-width: 379.98px) {
  .auth-card-wrap {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}

@media (max-height: 700px) and (max-width: 767.98px) {
  .auth-page {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
  }

  .auth-card-wrap {
    margin-block: auto;
  }

  .auth-footer {
    position: relative;
    bottom: auto;
    margin-top: 18px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 767.98px) {
  .table-responsive>.admin-table td:last-child .d-flex {
    gap: .35rem !important
  }

  .table-responsive>.admin-table .btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: .2rem;
    font-size: .82rem;
    line-height: 1
  }

  .table-responsive>.admin-table td:last-child {
    min-width: 165px
  }
}

/* Responsive behavior shared by every modal */
.modal {
  --bs-modal-width: 900px;
}

.modal-dialog {
  width: calc(100% - 2rem);
  max-width: var(--bs-modal-width);
  margin: 1rem auto
}

.modal-content {
  max-height: calc(100dvh - 2rem);
  display: flex;
  overflow: hidden
}

.modal-header,
.modal-footer {
  flex-shrink: 0
}

.modal-body {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden
}

.audit-detail-modal,
.client-detail-modal,
#permissions-modal-backdrop {
  z-index: 1200 !important;
  padding: 1rem
}

.audit-detail-modal__shell,
.client-detail-modal__shell {
  width: min(100%, 980px) !important;
  max-width: calc(100vw - 2rem) !important;
  max-height: calc(100dvh - 2rem) !important;
}

.permissions-modal-shell {
  width: min(calc(100% - 3rem), 720px) !important;
  max-width: 720px !important;
  max-height: min(72dvh, 640px) !important;
}

.audit-detail-modal__shell,
.client-detail-modal__shell,
.permissions-modal-shell {
  overflow: hidden !important
}

.audit-detail-modal-card,
.client-detail-card,
.user-permissions-modal-card {
  min-height: 0;
  max-height: inherit;
  display: flex;
  flex-direction: column
}

.audit-detail-modal-body,
.client-detail-card__body,
.user-permissions-modal-body {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden
}

body:has(.audit-detail-modal:not(.d-none)),
body:has(.client-detail-modal:not(.d-none)),
body:has(#permissions-modal-backdrop:not(.d-none)) {
  overflow: hidden
}

.client-detail-modal__shell {
  overflow: hidden !important
}

.swal2-popup {
  width: min(32rem, calc(100vw - 2rem)) !important;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto
}

@media (max-width: 575.98px) {
  .modal-dialog {
    width: calc(100% - 1rem);
    margin: .5rem auto
  }

  .modal-content {
    max-height: calc(100dvh - 1rem)
  }

  .modal-header,
  .modal-footer {
    padding: .85rem 1rem
  }

  .modal-header {
    align-items: flex-start;
    gap: .75rem
  }

  .modal-header .modal-title {
    font-size: 1rem
  }

  .modal-body {
    padding: 1rem
  }

  .modal-footer {
    gap: .5rem
  }

  .modal-footer .btn {
    flex: 1 1 100%;
    margin: 0 !important
  }

  .audit-detail-modal,
  .client-detail-modal,
  #permissions-modal-backdrop {
    padding: .5rem
  }

  .audit-detail-modal__shell,
  .client-detail-modal__shell,
  .permissions-modal-shell {
    max-width: calc(100vw - 1rem) !important;
    max-height: calc(100dvh - 1rem) !important;
    border-radius: 14px
  }

  .audit-detail-modal-header,
  .audit-detail-modal-footer,
  .audit-detail-modal-body,
  .client-detail-card__header,
  .client-detail-card__body {
    padding: 1rem
  }

  .client-detail-card__header h3 {
    font-size: 1.15rem
  }

  .client-detail-highlights {
    grid-template-columns: 1fr
  }

  .permissions-modal-shell {
    width: calc(100vw - 1rem) !important;
    max-width: 420px !important;
    max-height: min(78dvh, 600px) !important;
    overflow: hidden !important
  }

  .user-permissions-modal-body {
    max-height: none !important;
    padding: 1rem 1rem 0
  }

  .user-permissions-modal-footer {
    padding: 1rem !important;
  }

  .user-permissions-modal-footer .btn {
    width: 100%
  }
}

/* Compact client detail modal on phones */
@media (max-width: 575.98px) {
  .client-detail-modal {
    padding: 1rem
  }

  .client-detail-modal__shell {
    width: min(340px, calc(100vw - 2rem)) !important;
    max-width: 340px !important;
    max-height: 78dvh !important;
    border-radius: 16px
  }

  .client-detail-card__header {
    padding: .85rem 1rem .75rem
  }

  .client-detail-card__header .section-label {
    margin-bottom: .25rem;
    font-size: .72rem
  }

  .client-detail-card__header h3 {
    font-size: 1.05rem
  }

  .client-detail-card__header p {
    font-size: .78rem
  }

  .client-detail-card__body {
    padding: .75rem 1rem
  }

  .client-detail-highlights {
    gap: .55rem;
    margin-bottom: .75rem
  }

  .client-detail-highlights>div,
  .client-detail-section {
    border-radius: 11px
  }

  .client-detail-highlights>div {
    padding: .65rem .75rem
  }

  .client-detail-highlights span,
  .client-detail-grid span {
    font-size: .66rem
  }

  .client-detail-highlights strong,
  .client-detail-grid strong {
    font-size: .8rem
  }

  .client-detail-section {
    padding: .8rem .85rem;
    margin-top: .65rem
  }

  .client-detail-section h4 {
    margin-bottom: .65rem;
    font-size: .82rem
  }

  .client-detail-card__footer {
    padding: .65rem 1rem
  }

  .client-detail-card__footer .btn {
    width: 100%;
    padding: .4rem .75rem
  }
}

/* Compact audit detail modal on phones */
@media (max-width: 575.98px) {
  .audit-detail-modal {
    padding: 1rem
  }

  .audit-detail-modal__shell {
    width: min(340px, calc(100vw - 2rem)) !important;
    max-width: 340px !important;
    max-height: 78dvh !important;
    border-radius: 16px
  }

  .audit-detail-modal-header {
    padding: .8rem 1rem
  }

  .audit-detail-modal-header .section-label {
    margin-bottom: .25rem;
    font-size: .72rem
  }

  .audit-detail-modal-header h4 {
    font-size: .95rem
  }

  .audit-detail-modal-header p {
    font-size: .76rem
  }

  .audit-detail-modal-body {
    padding: .75rem 1rem
  }

  .audit-detail-grid {
    gap: .55rem
  }

  .audit-detail-grid>div,
  .audit-detail-block {
    padding: .62rem .7rem;
    border-radius: 10px
  }

  .audit-detail-grid small,
  .audit-detail-block>small {
    font-size: .62rem
  }

  .audit-detail-grid strong,
  .audit-detail-block p,
  .audit-detail-block li {
    font-size: .78rem;
    overflow-wrap: anywhere
  }

  .audit-detail-modal-footer {
    padding: .65rem 1rem;
    gap: .45rem
  }

  .audit-detail-modal-footer .btn {
    flex: 1 1 100%;
    padding: .4rem .65rem;
    font-size: .78rem
  }
}

/* Compact pagination stays readable regardless of the total page count. */
.pagination.pagination-compact {
  width: 100%;
  max-width: 100%;
  flex-wrap: nowrap;
  justify-content: center !important;
  gap: .3rem;
}

.pagination.pagination-compact .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: .35rem .55rem;
  border: 1px solid #d8e4dc;
  border-radius: 8px !important;
  color: #087a43;
  background: #fff;
  font-size: .82rem;
  font-weight: 700;
}

.pagination.pagination-compact .page-item.active .page-link {
  border-color: #087a43;
  color: #fff;
  background: #087a43;
}

.pagination.pagination-compact .page-item.disabled .page-link {
  border-color: #e8eeea;
  color: #91a099;
  background: #f5f8f6;
}

.pagination.pagination-compact .pagination-ellipsis {
  min-width: 28px;
  padding-inline: .25rem;
  border-color: transparent !important;
  background: transparent !important;
}

/* Auditoría: pagination density follows the available screen width. */
.audit-pagination--mobile {
  display: none !important;
}

@media (min-width: 992px) {
  .pagination.audit-pagination--desktop {
    gap: .4rem;
  }

  .pagination.audit-pagination--desktop .page-link {
    min-width: 40px;
    height: 38px;
  }
}

@media (max-width: 991.98px) {
  .audit-pagination--desktop {
    display: none !important;
  }

  .audit-pagination--mobile {
    display: flex !important;
  }
}

/* Responsive pagination for every table module */
@media (max-width: 767.98px) {
  .panel-card nav[aria-label*="Paginación"] {
    max-width: 100%;
    overflow-x: hidden
  }

  .panel-card .pagination,
  .pagination.pagination-mapterra {
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: .3rem;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto
  }

  .panel-card .pagination .page-item,
  .pagination.pagination-mapterra .page-item {
    flex: 0 0 auto
  }

  .panel-card .pagination .page-link,
  .pagination.pagination-mapterra .page-link {
    min-width: 32px;
    height: 32px;
    padding: .25rem .45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px !important;
    font-size: .78rem
  }
}

/* Audit table follows the same mobile pattern as clients */
@media (max-width: 767.98px) {
  .table-responsive>.audit-log-table,
  .table-responsive>.audit-log-table tbody {
    display: table !important
  }

  .table-responsive>.audit-log-table tbody {
    display: table-row-group !important
  }

  .table-responsive>.audit-log-table tr {
    display: table-row !important
  }

  .table-responsive>.audit-log-table {
    display: table !important;
    width: max-content !important;
    min-width: 760px !important;
    table-layout: auto !important;
    border-collapse: collapse;
    border-spacing: 0
  }

  .table-responsive>.audit-log-table thead {
    display: table-header-group !important
  }

  .table-responsive>.audit-log-table tbody tr {
    display: table-row !important;
    padding: 0;
    border-bottom: 0
  }

  .table-responsive>.audit-log-table th,
  .table-responsive>.audit-log-table td,
  .table-responsive>.audit-log-table td:first-child,
  .table-responsive>.audit-log-table td:last-child {
    display: table-cell !important;
    width: auto;
    min-width: 0;
    padding: .68rem .62rem;
    border: 0;
    border-bottom: 1px solid #e7ede9;
    background: transparent;
    box-shadow: none;
    text-align: left !important;
    white-space: normal
  }

  .table-responsive>.audit-log-table th {
    background: #f8faf9;
    white-space: nowrap
  }

  .table-responsive>.audit-log-table th:nth-child(3),
  .table-responsive>.audit-log-table td:nth-child(3),
  .table-responsive>.audit-log-table th:nth-child(6),
  .table-responsive>.audit-log-table td:nth-child(6),
  .table-responsive>.audit-log-table th:nth-child(7),
  .table-responsive>.audit-log-table td:nth-child(7) {
    display: table-cell !important
  }

  .table-responsive>.audit-log-table th:first-child,
  .table-responsive>.audit-log-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    box-shadow: 4px 0 7px rgba(23, 55, 39, .07)
  }

  .table-responsive>.audit-log-table thead th:first-child {
    z-index: 2;
    background: #f8faf9
  }

  .table-responsive>.audit-log-table td:last-child {
    min-width: 110px;
    text-align: center !important
  }

  .table-responsive>.audit-log-table td:last-child .d-flex {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: .35rem !important;
    min-width: max-content
  }

  .table-responsive>.audit-log-table td:last-child form {
    display: flex !important;
    align-items: center
  }

  .table-responsive>.audit-log-table .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1
  }

  .panel-card .pagination.pagination-compact {
    flex-wrap: nowrap;
    overflow: visible;
  }
}

/* Mobile tables scroll as one unit; no column remains pinned in place. */
@media (max-width: 767.98px) {
  .table-responsive > table th:first-child,
  .table-responsive > table td:first-child {
    position: static !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
  }

  .panel-header .account-avatar {
    width: 54px !important;
    height: 64px;
    min-width: 54px;
    flex: 0 0 64px;
    align-self: flex-start;
    border-radius: 999px;
    font-size: 1rem;
  }
}

/* Compact, consistently scrollable modals on phones and small tablets. */
@media (max-width: 767.98px) {
  .modal-dialog {
    width: min(330px, calc(100vw - 2rem)) !important;
    max-width: 330px !important;
    margin: max(.75rem, env(safe-area-inset-top)) auto !important;
  }

  .modal-content {
    max-height: min(76dvh, 640px) !important;
    border-radius: 15px !important;
  }

  .modal-header,
  .modal-footer {
    padding: .7rem .85rem !important;
  }

  .modal-header {
    align-items: center;
  }

  .modal-header .section-label {
    font-size: .7rem;
  }

  .modal-header .modal-title {
    font-size: .92rem !important;
  }

  .modal-header .btn-close {
    flex: 0 0 auto;
    padding: .55rem;
    margin: 0 0 0 auto;
    align-self: flex-start;
  }

  .modal-body {
    padding: .75rem .85rem !important;
    overscroll-behavior: contain;
  }

  .modal-footer {
    gap: .4rem;
  }

  .modal-footer .btn {
    padding: .4rem .65rem;
    font-size: .78rem;
  }

  .audit-detail-modal,
  .client-detail-modal,
  #permissions-modal-backdrop {
    padding: 1rem !important;
  }

  .audit-detail-modal__shell,
  .client-detail-modal__shell,
  .permissions-modal-shell {
    width: min(330px, calc(100vw - 2rem)) !important;
    max-width: 330px !important;
    max-height: min(76dvh, 640px) !important;
    border-radius: 15px !important;
  }

  .audit-detail-modal-header,
  .audit-detail-modal-footer,
  .client-detail-card__header,
  .client-detail-card__footer,
  .user-permissions-modal-footer {
    padding: .7rem .85rem !important;
  }

  .audit-detail-modal-body,
  .client-detail-card__body,
  .user-permissions-modal-body {
    padding: .75rem .85rem !important;
    overscroll-behavior: contain;
  }

  .dashboard-activity-detail-grid,
  .audit-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .45rem !important;
  }

  .dashboard-activity-detail-item,
  .audit-detail-grid > div,
  .audit-detail-block {
    padding: .52rem .6rem !important;
    border-radius: 9px !important;
  }

  .dashboard-activity-detail-item small,
  .audit-detail-grid small,
  .audit-detail-block > small {
    font-size: .6rem !important;
  }

  .dashboard-activity-detail-item strong,
  .dashboard-activity-detail-item div,
  .dashboard-activity-detail-item li,
  .audit-detail-grid strong,
  .audit-detail-block p,
  .audit-detail-block li {
    font-size: .75rem !important;
    overflow-wrap: anywhere;
  }

  .swal2-popup {
    width: min(320px, calc(100vw - 2rem)) !important;
    max-height: min(76dvh, 620px) !important;
    padding: 1rem !important;
  }

  .action-feedback {
    padding: 1rem;
  }

  .action-feedback__card {
    width: min(320px, calc(100vw - 2rem));
    padding: 24px 18px 0;
  }

  .action-feedback__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-width: 4px;
    font-size: 2.35rem;
  }

  .action-feedback__card h2 {
    font-size: 1.25rem;
  }

  .action-feedback__card p {
    margin: 10px 0 18px;
    font-size: .86rem;
  }

  .action-feedback__progress {
    margin-inline: -18px;
  }
}

@media (max-width: 359.98px) {
  .dashboard-activity-detail-grid,
  .audit-detail-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* A modal owns the only vertical scroll while it is open. */
@media (max-width: 767.98px) {
  body.modal-open,
  body.modal-open .app-layout,
  body.modal-open .main-area,
  body.modal-open .content-area,
  body:has(.audit-detail-modal:not(.d-none)) .app-layout,
  body:has(.audit-detail-modal:not(.d-none)) .main-area,
  body:has(.audit-detail-modal:not(.d-none)) .content-area,
  body:has(.client-detail-modal:not(.d-none)) .app-layout,
  body:has(.client-detail-modal:not(.d-none)) .main-area,
  body:has(.client-detail-modal:not(.d-none)) .content-area,
  body:has(#permissions-modal-backdrop:not(.d-none)) .app-layout,
  body:has(#permissions-modal-backdrop:not(.d-none)) .main-area,
  body:has(#permissions-modal-backdrop:not(.d-none)) .content-area {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .modal,
  .audit-detail-modal,
  .client-detail-modal,
  #permissions-modal-backdrop,
  .swal2-container {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .modal-dialog {
    max-height: min(76dvh, 640px);
  }

  .modal-body,
  .audit-detail-modal-body,
  .client-detail-card__body,
  .user-permissions-modal-body,
  .swal2-html-container {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #91a99d transparent;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .modal-body::-webkit-scrollbar,
  .audit-detail-modal-body::-webkit-scrollbar,
  .client-detail-card__body::-webkit-scrollbar,
  .user-permissions-modal-body::-webkit-scrollbar,
  .swal2-html-container::-webkit-scrollbar {
    width: 5px;
  }

  .modal-body::-webkit-scrollbar-track,
  .audit-detail-modal-body::-webkit-scrollbar-track,
  .client-detail-card__body::-webkit-scrollbar-track,
  .user-permissions-modal-body::-webkit-scrollbar-track,
  .swal2-html-container::-webkit-scrollbar-track {
    background: transparent;
  }

  .modal-body::-webkit-scrollbar-thumb,
  .audit-detail-modal-body::-webkit-scrollbar-thumb,
  .client-detail-card__body::-webkit-scrollbar-thumb,
  .user-permissions-modal-body::-webkit-scrollbar-thumb,
  .swal2-html-container::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #91a99d;
  }
}

/* Center every action control and icon inside responsive tables. */
.table-responsive table td:has(.btn) {
  text-align: center !important;
  vertical-align: middle !important;
}

.table-responsive table td:has(.btn) > .d-flex {
  width: 100%;
  align-items: center !important;
  justify-content: center !important;
}

.table-responsive table td:has(.btn) form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.table-responsive table .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.table-responsive table .btn > i {
  display: block;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Keep every user record and its action controls on one visual row. */
.table-responsive > .users-table {
  width: 100%;
  min-width: 1040px;
  table-layout: fixed !important;
}

.table-responsive > .users-table th,
.table-responsive > .users-table td,
.table-responsive > .users-table td:nth-child(2) strong,
.table-responsive > .users-table td:nth-child(2) small,
.table-responsive > .users-table .category-pill,
.table-responsive > .users-table .badge {
  white-space: nowrap !important;
}

.table-responsive > .users-table td:last-child .d-flex {
  min-width: max-content;
  flex-wrap: nowrap !important;
}

.table-responsive > .users-table td:last-child form {
  flex: 0 0 auto;
}

/* Keep GeoJSON row actions together at every responsive width. */
.table-responsive table td.geojson-actions-cell {
  width: 165px;
  min-width: 165px;
  text-align: center !important;
}

.table-responsive table .geojson-row-actions {
  width: 100%;
  min-width: max-content;
  align-items: center;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: .4rem !important;
}

.table-responsive table .geojson-row-actions > a,
.table-responsive table .geojson-row-actions > form {
  flex: 0 0 auto;
}

/* Permissions modals: fixed header/footer with one scrollable permission list. */
.permissions-modal-shell {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.permissions-modal-shell > #permissions-modal-content {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  max-height: inherit;
  overflow: hidden;
}

.permissions-modal-shell .user-permissions-modal-card {
  width: 100%;
  min-height: 0;
  max-height: inherit;
  flex: 1 1 auto;
  overflow: hidden;
}

.user-permissions-modal-card > .border-bottom,
.user-permissions-modal-footer {
  flex: 0 0 auto;
}

.permissions-modal-shell .user-permissions-modal-body {
  min-height: 0;
  max-height: none !important;
  flex: 1 1 auto;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.permissions-modal-shell .user-permissions-modal-footer {
  position: relative !important;
  bottom: auto !important;
}

@media (min-width: 768px) {
  .table-responsive table .btn:has(> i:only-child) {
    width: 38px;
    min-width: 38px;
    height: 34px;
    padding: 0;
  }
}

/* Final cascade safeguards for fullscreen maps and touch devices. */
body .gee-map-card:fullscreen {
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  border: 0;
  border-radius: 0;
  position: fixed !important;
  inset: 0;
}

body .gee-map-card:fullscreen .gee-map-wrap {
  height: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto;
}

@media (hover: none) and (pointer: coarse) {
  .content-area .btn,
  .topbar .menu-toggle,
  .topbar .logout-button,
  .sidebar .sidebar-close,
  .content-area .pagination .page-link {
    min-height: var(--mobile-control-height) !important;
  }

  .table-responsive>.admin-table .btn,
  .table-responsive>.audit-log-table .btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }
}

/* One consistent close action across every modal. */
.btn.btn-brand.modal-close-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-width: 120px;
  min-height: 40px;
  padding: .5rem 1rem;
  border-radius: .5rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25
}

@media (max-width: 575.98px) {
  .btn.btn-brand.modal-close-action {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%
  }
}