/*
  PratikMix Base
  Camada leve de acabamento para telas internas, sem dependencias externas.
  Os seletores legados foram preservados para compatibilidade com as views.
*/
:root {
  --jd-creme: #f4f1ec;
  --jd-bege: #e6ddd2;
  --jd-oliva: #2e523f;
  --jd-cafe: #2b2b2b;
  --jd-caramelo: #d96b2b;
  --jd-dourado: #d96b2b;
  --jd-card: #ffffff;
  --jd-line: rgba(15, 61, 99, .12);
  --jd-shadow-soft: 0 18px 48px rgba(15, 61, 99, .08);
}

body {
  background:
    radial-gradient(circle at 18% 8%, rgba(217, 107, 43, .08), transparent 28rem),
    linear-gradient(180deg, #ffffff 0%, var(--jd-creme) 100%);
}

main.container,
main.container-fluid {
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}

.jd-premium-hero,
.premium-hero,
.hero-premium {
  background:
    linear-gradient(135deg, rgba(15, 61, 99, .96), rgba(43, 43, 43, .92)),
    linear-gradient(135deg, #0f3d63, #2b2b2b);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  box-shadow: var(--jd-shadow-soft);
}

.jd-premium-card,
.metric-card,
.atalho-card,
.card {
  border-color: var(--jd-line) !important;
}

.jd-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.jd-action-grid .btn,
.jd-touch-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: normal;
}

.btn-primary,
.btn-success {
  box-shadow: 0 10px 24px rgba(15, 61, 99, .18);
}

.btn-outline-primary {
  --bs-btn-color: #0f3d63;
  --bs-btn-border-color: rgba(15, 61, 99, .45);
  --bs-btn-hover-bg: #0f3d63;
  --bs-btn-hover-border-color: #0f3d63;
}

.table {
  --bs-table-bg: transparent;
}

.table thead th {
  color: rgba(43, 43, 43, .70);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom-color: var(--jd-line);
}

.table tbody td {
  vertical-align: middle;
}

.form-control,
.form-select {
  min-height: 44px;
}

img[loading="lazy"] {
  content-visibility: auto;
}

@media (max-width: 680px) {
  main.container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .jd-premium-hero,
  .premium-hero,
  .hero-premium {
    border-radius: 14px;
  }

  .table-responsive {
    border: 1px solid var(--jd-line);
    border-radius: 14px;
  }

  .btn,
  .form-control,
  .form-select {
    font-size: .95rem;
  }
}