:root {

  --brand-ink: #1a2e24;

  --brand-mid: #2f5d4a;

  --brand-accent: #c4a35a;

  --brand-sand: #f3efe6;

  --brand-card: #ffffff;

  --brand-muted: #6b7c74;

  --touch-min: 44px;

  --radius: 14px;

  --shadow: 0 10px 28px rgba(26, 46, 36, 0.08);

}



html, body {

  height: 100%;

}



body.app-body {

  margin: 0;

  background:

    radial-gradient(circle at top left, rgba(196, 163, 90, 0.18), transparent 40%),

    linear-gradient(180deg, #eef4f0 0%, var(--brand-sand) 100%);

  color: var(--brand-ink);

  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  padding-bottom: 88px;

}



/* ---- Topbar ---- */

.app-topbar {

  position: sticky;

  top: 0;

  z-index: 1030;

  background: linear-gradient(135deg, var(--brand-ink), var(--brand-mid));

  color: #fff;

  box-shadow: var(--shadow);

}



.app-topbar-row {

  max-width: 960px;

  margin: 0 auto;

  padding: 0.7rem 1rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

}



.brand-link {

  display: flex;

  align-items: center;

  gap: 0.65rem;

  color: #fff;

  text-decoration: none;

  min-width: 0;

}



.brand-link:hover {

  color: #fff;

}



.brand-mark {

  flex: 0 0 auto;

  width: 36px;

  height: 36px;

  border-radius: 10px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: rgba(196, 163, 90, 0.95);

  color: var(--brand-ink);

  font-size: 0.78rem;

  font-weight: 800;

  letter-spacing: 0.02em;

}



.brand-text {

  display: flex;

  flex-direction: column;

  line-height: 1.15;

  min-width: 0;

}



.brand-name {

  font-weight: 700;

  font-size: 1rem;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.brand-tag {

  font-size: 0.72rem;

  font-weight: 600;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.72);

}



.topbar-actions {

  display: flex;

  align-items: center;

  gap: 0.65rem;

  flex: 0 0 auto;

}



.user-chip {

  font-size: 0.82rem;

  opacity: 0.88;

}



.btn-logout {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.4rem;

  min-height: 36px;

  padding: 0.35rem 0.8rem;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.28);

  background: rgba(255, 255, 255, 0.08);

  color: #fff;

  font-size: 0.85rem;

  font-weight: 600;

  line-height: 1;

  cursor: pointer;

  transition: background 0.15s ease, border-color 0.15s ease;

}



.btn-logout:hover {

  background: rgba(255, 255, 255, 0.16);

  border-color: rgba(255, 255, 255, 0.45);

  color: #fff;

}



.app-nav-desktop {

  border-top: 1px solid rgba(255, 255, 255, 0.12);

}



.app-nav-desktop .app-topbar-row {

  padding-top: 0;

  padding-bottom: 0;

}



.app-nav-desktop .nav-link {

  color: rgba(255, 255, 255, 0.78);

  font-weight: 600;

  padding: 0.75rem 0.9rem;

  border-bottom: 2px solid transparent;

}



.app-nav-desktop .nav-link:hover,

.app-nav-desktop .nav-link.active {

  color: #fff;

}



.app-nav-desktop .nav-link.active {

  border-bottom-color: var(--brand-accent);

}



.app-main {

  max-width: 960px;

  margin: 0 auto;

  padding-top: 1rem;

  padding-bottom: 1.5rem;

}



.page-title {

  font-size: 1.55rem;

  font-weight: 750;

  margin: 0.4rem 0 0.25rem;

}



.page-subtitle {

  color: var(--brand-muted);

  margin-bottom: 1rem;

}



/* ---- Buttons ---- */

.btn {

  min-height: var(--touch-min);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  line-height: 1.25;

  padding: 0.5rem 1rem;

}



.btn-sm {

  min-height: 34px;

  padding: 0.3rem 0.65rem;

  font-size: 0.85rem;

  line-height: 1.2;

}



.btn-primary {

  --bs-btn-bg: var(--brand-mid);

  --bs-btn-border-color: var(--brand-mid);

  --bs-btn-hover-bg: var(--brand-ink);

  --bs-btn-hover-border-color: var(--brand-ink);

  --bs-btn-active-bg: var(--brand-ink);

  --bs-btn-active-border-color: var(--brand-ink);

}



.btn-accent {

  background: var(--brand-accent);

  border-color: var(--brand-accent);

  color: var(--brand-ink);

  font-weight: 700;

}



.btn-accent:hover {

  background: #b89345;

  border-color: #b89345;

  color: var(--brand-ink);

}



/* ---- Inputs / native fallback ---- */

.form-control,

.form-select {

  min-height: var(--touch-min);

  height: var(--touch-min);

  padding: 0 0.9rem;

  line-height: calc(var(--touch-min) - 2px);

  border-color: rgba(26, 46, 36, 0.16);

  border-radius: 12px;

  color: var(--brand-ink);

}



.form-control:focus,

.form-select:focus {

  border-color: var(--brand-mid);

  box-shadow: 0 0 0 0.2rem rgba(47, 93, 74, 0.18);

}



.form-select {

  padding-right: 2.4rem;

  background-position: right 0.85rem center;

  background-size: 14px 10px;

}



/* ---- Custom select ---- */

.app-select {

  position: relative;

  width: 100%;

}



.app-select-native {

  position: absolute !important;

  width: 1px !important;

  height: 1px !important;

  padding: 0 !important;

  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;

  white-space: nowrap !important;

  border: 0 !important;

  min-height: 0 !important;

  pointer-events: none;

}



.app-select-trigger {

  width: 100%;

  min-height: var(--touch-min);

  height: var(--touch-min);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.5rem;

  padding: 0 0.85rem 0 0.9rem;

  border: 1px solid rgba(26, 46, 36, 0.16);

  border-radius: 12px;

  background: #fff;

  color: var(--brand-ink);

  font-size: 1rem;

  line-height: 1.25;

  text-align: left;

  cursor: pointer;

  transition: border-color 0.15s ease, box-shadow 0.15s ease;

}



.app-select-trigger:hover {

  border-color: rgba(47, 93, 74, 0.45);

}



.app-select.is-open .app-select-trigger,

.app-select-trigger:focus {

  outline: none;

  border-color: var(--brand-mid);

  box-shadow: 0 0 0 0.2rem rgba(47, 93, 74, 0.18);

}



.app-select-trigger.is-placeholder .app-select-text {

  color: var(--brand-muted);

}



.app-select-text {

  flex: 1;

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.app-select-caret {

  flex: 0 0 auto;

  color: var(--brand-muted);

  transition: transform 0.15s ease;

}



.app-select.is-open .app-select-caret {

  transform: rotate(180deg);

  color: var(--brand-mid);

}



.app-select-menu {

  display: none;

  position: absolute;

  left: 0;

  right: 0;

  top: calc(100% + 6px);

  z-index: 1060;

  max-height: 240px;

  overflow-y: auto;

  background: #fff;

  border: 1px solid rgba(26, 46, 36, 0.12);

  border-radius: 12px;

  box-shadow: 0 14px 32px rgba(26, 46, 36, 0.14);

  padding: 0.35rem;

}



.app-select.is-open .app-select-menu {

  display: block;

}



.app-select-option {

  width: 100%;

  display: block;

  border: 0;

  background: transparent;

  text-align: left;

  padding: 0.65rem 0.75rem;

  border-radius: 8px;

  color: var(--brand-ink);

  font-size: 0.95rem;

  line-height: 1.25;

  cursor: pointer;

}



.app-select-option:hover:not(:disabled) {

  background: rgba(47, 93, 74, 0.08);

}



.app-select-option.is-selected {

  background: rgba(47, 93, 74, 0.14);

  color: var(--brand-mid);

  font-weight: 650;

}



.app-select-option.is-placeholder-opt {

  color: var(--brand-muted);

}



.app-select-option:disabled {

  opacity: 0.45;

  cursor: not-allowed;

}



.app-select.is-disabled .app-select-trigger {

  opacity: 0.65;

  cursor: not-allowed;

  background: #f3f4f3;

}



.stack-card {

  background: var(--brand-card);

  border: none;

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  padding: 1rem;

  margin-bottom: 0.85rem;

}



.stack-card h3 {

  font-size: 1.05rem;

  margin: 0 0 0.35rem;

}



.meta-line {

  color: var(--brand-muted);

  font-size: 0.92rem;

}



.form-section {

  background: var(--brand-card);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  padding: 1rem;

  margin-bottom: 1rem;

}



.form-section h2 {

  font-size: 1.05rem;

  margin-bottom: 0.85rem;

}



.nav-tabs {

  border-bottom-color: rgba(26, 46, 36, 0.1);

}



.nav-tabs .nav-link {

  min-height: var(--touch-min);

  display: flex;

  align-items: center;

  color: var(--brand-mid);

  font-weight: 600;

  border: none;

  border-bottom: 3px solid transparent;

  border-radius: 0;

  background: transparent;

}



.nav-tabs .nav-link.active {

  color: var(--brand-ink);

  background: transparent;

  border-bottom-color: var(--brand-accent);

}



/* ---- Bottom nav ---- */

.bottom-nav {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 1040;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  background: rgba(255, 255, 255, 0.96);

  backdrop-filter: blur(10px);

  border-top: 1px solid rgba(26, 46, 36, 0.08);

  box-shadow: 0 -8px 24px rgba(26, 46, 36, 0.08);

  padding: 0.3rem 0.25rem calc(0.3rem + env(safe-area-inset-bottom));

}

.bottom-nav-admin {
  grid-template-columns: repeat(5, 1fr);
}

.bottom-nav-item {

  text-decoration: none;

  color: var(--brand-muted);

  text-align: center;

  padding: 0.4rem 0.2rem 0.35rem;

  font-size: 0.7rem;

  font-weight: 700;

  min-height: 58px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 0.2rem;

  border-radius: 12px;

  transition: color 0.15s ease, background 0.15s ease;

}



.bn-icon {

  width: 22px;

  height: 22px;

  display: block;

}



.bn-label {

  line-height: 1.1;

}



.bottom-nav-item:hover,

.bottom-nav-item:focus {

  color: var(--brand-mid);

}



.bottom-nav-item.active {

  color: var(--brand-mid);

  background: rgba(47, 93, 74, 0.1);

}



.bottom-nav-item.active .bn-icon {

  stroke: var(--brand-mid);

}



.table-responsive-soft {

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

}



.preview-thumb {

  width: 88px;

  height: 88px;

  object-fit: cover;

  border-radius: 12px;

  border: 2px solid rgba(47, 93, 74, 0.2);

}



.dash-placeholder {

  min-height: 42vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  background: var(--brand-card);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  padding: 1.5rem;

}



.dash-placeholder h1 {

  font-size: clamp(1.6rem, 5vw, 2.2rem);

  margin-bottom: 0.4rem;

}



.badge-status {

  display: inline-block;

  padding: 0.25rem 0.55rem;

  border-radius: 999px;

  font-size: 0.78rem;

  font-weight: 700;

}



.badge-ativo {

  background: rgba(47, 93, 74, 0.12);

  color: var(--brand-mid);

}



.badge-inativo {

  background: rgba(120, 50, 50, 0.1);

  color: #8a3030;

}



.login-wrap {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1.25rem;

}



.login-card {

  width: 100%;

  max-width: 420px;

  background: #fff;

  border-radius: 18px;

  box-shadow: var(--shadow);

  padding: 1.5rem;

}



.login-card h1 {

  font-size: 1.6rem;

  margin-bottom: 0.25rem;

}



@media (min-width: 768px) {

  body.app-body {

    padding-bottom: 1.5rem;

  }

}



/* ---- Portal cliente ---- */

.portal-delta-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0.75rem;

}



.portal-delta-grid-single {

  grid-template-columns: 1fr;

}

@media (min-width: 576px) {

  .portal-delta-grid-single {

    grid-template-columns: minmax(0, 320px);

  }

}



.portal-delta-card {

  background: var(--brand-card);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  padding: 1rem 1.1rem;

}



.portal-delta-card .delta-label {

  font-size: 0.78rem;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  color: var(--brand-muted);

  margin-bottom: 0.25rem;

}



.portal-delta-card .delta-value {

  font-size: 1.45rem;

  font-weight: 700;

  color: var(--brand-ink);

  line-height: 1.2;

}



.portal-delta-card .delta-value.delta-down {

  color: #2f5d4a;

}



.portal-delta-card .delta-value.delta-up {

  color: #8a5030;

}



.portal-chart-wrap {

  background: var(--brand-card);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  padding: 1rem;

  position: relative;

  min-height: 260px;

}



.portal-measure-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0.65rem 1rem;

}



.portal-measure-item .measure-label {

  display: block;

  font-size: 0.78rem;

  color: var(--brand-muted);

}



.portal-measure-item .measure-value {

  font-weight: 600;

  color: var(--brand-ink);

}



.portal-photos {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem;

}



.portal-photos img {

  max-width: 140px;

  border-radius: 10px;

}