/*
  assets/css/custom.css
  --------------------
  Customizações de identidade visual e ajustes de UI.

  Regras de ouro:
  - Este arquivo deve ser carregado DEPOIS do app.css.
  - Use classes de página (ex.: .page-login, .page-public-home, .page-public-form)
    para evitar impactos globais.
*/

/* =========================================================
   Variáveis visuais (mantém coerência)
   ========================================================= */
:root{
  --crp-blue: #001070;            /* azul institucional (CRP-21) */
  --crp-blue-2: #0a2553;
  --crp-yellow: #f0b010;          /* dourado (aproximação) */
  --crp-ink: rgba(16, 24, 40, .86);
  --crp-muted: rgba(16, 24, 40, .62);
}

/* =========================================================
   Tema global CRP-21 (controles e botões)
   - Aplica no projeto inteiro (área pública + área logada)
   - Objetivo: padronizar feedback de foco/seleção em amarelo
   ========================================================= */

/* Inputs e selects nativos: foco amarelo (borda + anel) */
.form-control:focus,
.form-select:focus,
.form-check-input:focus{
  border-color: var(--crp-yellow) !important;
  box-shadow: 0 0 0 .25rem rgba(240,176,16,.25) !important;
}

/* Checkbox/Radio: cor de marcação (quando suportado pelo navegador) */
.form-check-input{
  accent-color: var(--crp-yellow);
}

/* Botões "Voltar" (bootstrap: outline-secondary) -> hover/focus amarelo */
.btn.btn-outline-secondary:hover,
.btn.btn-outline-secondary:focus,
.btn.btn-outline-secondary:active,
.btn.btn-outline-secondary.active{
  background-color: var(--crp-yellow) !important;
  border-color: var(--crp-yellow) !important;
  color: rgba(16,24,40,.92) !important;
}

.btn.btn-outline-secondary:focus{
  box-shadow: 0 0 0 .25rem rgba(240,176,16,.25) !important;
}

/* =========================================================
   Select customizado (crp_select.js)
   - Resolve a limitação do select nativo (item selecionado azul no Windows)
   - Mantém o select original para submissão
   ========================================================= */

.crp-select{
  position: relative;
}

.crp-select__native{
  /* Mantém no DOM para submissão, mas fora da tela */
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.crp-select__button{
  width: 100%;
  min-height: calc(2.375rem + 2px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: .375rem .75rem;
  border-radius: .5rem;
  border: 1px solid rgba(16,24,40,.18);
  background: #fff;
  color: rgba(16,24,40,.92);
}

.crp-select__button:focus{
  outline: none;
  border-color: var(--crp-yellow);
  box-shadow: 0 0 0 .25rem rgba(240,176,16,.25);
}

.crp-select__value{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crp-select__chev{
  opacity: .72;
  flex: 0 0 auto;
}

.crp-select__list{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1050;
  list-style: none;
  margin: 0;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(16,24,40,.14);
  background: #fff;
  box-shadow: 0 12px 30px rgba(16,24,40,.14);
  max-height: 280px;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* iOS: permite rolagem suave dentro do dropdown */
  overscroll-behavior: contain;      /* evita "puxar" a página ao rolar a lista */
  display: none;
}

.crp-select.is-open .crp-select__list{
  display: block;
}

.crp-select__item{
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  color: rgba(16,24,40,.92);
}

.crp-select__item.is-disabled{
  opacity: .52;
  cursor: not-allowed;
}

/* Item ativo (navegação) */
.crp-select__item.is-active{
  background: rgba(240,176,16,.20);
}

/* Item selecionado */
.crp-select__item.is-selected{
  background: rgba(240,176,16,.32);
  font-weight: 800;
}

.crp-select__item:hover:not(.is-disabled){
  background: rgba(240,176,16,.22);
}

/* Tipografia pública (Design institucional)
   - Aplica apenas no contexto público (header_public.php)
   - Mantém o painel interno intacto
*/
.public-shell{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.public-shell h1,
.public-shell h2,
.public-shell h3,
.public-shell .public-hero__title,
.public-shell .public-form-title,
.public-shell .portal-card__title,
.public-shell .protocol-card__title{
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* =========================================================
   1) Blindagens de logo (público)
   ========================================================= */

/* Navbar pública: impedir qualquer regra global de "img { width:100% }" */
.public-shell nav.navbar .navbar-brand .public-brand__logo{
  width: auto !important;
  height: 32px !important;
  max-height: 32px !important;
  max-width: 160px !important;
  object-fit: contain !important;
  display: block !important;
}

.public-shell .public-brand__text{
  font-weight: 600;
  color: var(--crp-ink);
}

@media (max-width: 576px){
  .public-shell .public-brand__text{
    max-width: calc(100vw - 180px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Links em rodapé azul: sempre legíveis */
.public-footer a{
  color: #fff !important;
}

/* =========================================================
   2) Login (público)
   ========================================================= */

.page-login img{
  max-width: 100% !important;
  height: auto !important;
}

.page-login .login-shell{
  flex: 1 0 auto;
  min-height: auto;
  display: flex;
  align-items: center;
  padding: 18px 0;
}

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

.page-login .login-brand{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px 0 14px 0;
}

.page-login .login-brand__img{
  width: auto !important;
  height: auto !important;
  max-height: 78px !important;
  max-width: 320px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

@media (max-width: 420px){
  .page-login .login-card{ padding: 18px 14px; border-radius: 12px; }
  .page-login .login-brand__img{ max-height: 70px !important; max-width: 260px !important; }
}

/* =========================================================
   3) Portal público (home)
   ========================================================= */

.page-public-home .public-hero{
  background: linear-gradient(135deg, var(--crp-blue) 0%, var(--crp-blue-2) 65%, #06193a 100%);
  color: #fff;
  padding: 34px 0;
}

.page-public-home .public-hero__title{
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 10px 0;
}

.page-public-home .public-hero__subtitle{
  margin: 0;
  max-width: 56ch;
  opacity: .95;
}

.page-public-home .public-hero__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.page-public-home .public-hero__panel{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 14px 14px;
  backdrop-filter: blur(6px);
}

.portal-card{
  background: #fff;
  border: 1px solid rgba(16, 24, 40, 0.10);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  padding: 18px 16px;
  transition: transform .12s ease, box-shadow .12s ease;
}

.portal-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16,24,40,.12);
}

.portal-card__icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  background: var(--crp-blue);
  margin-bottom: 10px;
}

.portal-card__icon--alt{ background: #6c757d; }
.portal-card__icon--dark{ background: #111827; }

.portal-card__title{
  font-size: 1.15rem;
  margin: 0 0 8px 0;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.portal-card__text{
  color: var(--crp-muted);
  margin: 0 0 10px 0;
}

.portal-card__list{
  color: var(--crp-muted);
  padding-left: 18px;
  margin: 0 0 14px 0;
}

.info-strip{
  background: #fff;
  border: 1px solid rgba(16, 24, 40, 0.10);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  padding: 16px 16px;
}

.info-strip__title{
  font-weight: 800;
  margin-bottom: 6px;
}

.info-strip__text{
  color: var(--crp-muted);
}

/* =========================================================
   4) Registro de demanda (form público)
   ========================================================= */

.page-public-form .form-card{
  border-radius: 14px;
}

/* Wizard (3 etapas) ---------------------------------------------------------
   Observação: estilos locais à página pública de registro de demanda.
*/
.page-public-form .wizard-steps, .page-interna-form .wizard-steps{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.page-public-form .wizard-step, .page-interna-form .wizard-step{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
}

.page-public-form .wizard-step__dot, .page-interna-form .wizard-step__dot{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  border: 1px solid rgba(16,24,40,.16);
  background: rgba(16,24,40,.06);
  color: rgba(16,24,40,.70);
  flex: 0 0 auto;
  transition: all .12s ease;
}

.page-public-form .wizard-step__dot.is-active, .page-interna-form .wizard-step__dot.is-active{
  background: rgba(0,16,112,.10);
  border-color: rgba(0,16,112,.22);
  color: var(--crp-blue);
}

.page-public-form .wizard-step__dot.is-done, .page-interna-form .wizard-step__dot.is-done{
  background: var(--crp-blue);
  border-color: var(--crp-blue);
  color: #fff;
}

.page-public-form .wizard-step__label, .page-interna-form .wizard-step__label{
  font-weight: 700;
  color: rgba(16,24,40,.80);
  font-size: .95rem;
  line-height: 1.15;
}

.page-public-form .wizard-step__line, .page-interna-form .wizard-step__line{
  height: 3px;
  background: rgba(16,24,40,.12);
  border-radius: 999px;
  flex: 1 1 auto;
  transition: background .12s ease;
}

.page-public-form .wizard-step__line.is-done, .page-interna-form .wizard-step__line.is-done{
  background: rgba(0,16,112,.70);
}

.page-public-form .wizard-panel, .page-interna-form .wizard-panel{ display: none; }
.page-public-form .wizard-panel.is-active, .page-interna-form .wizard-panel.is-active{ display: block; }

/* Upload visual -------------------------------------------------------------*/
.page-public-form .upload-drop, .page-interna-form .upload-drop{
  border: 1px dashed rgba(16,24,40,.28);
  border-radius: 14px;
  padding: 14px;
  background: rgba(16,24,40,.02);
}

.page-public-form .upload-list, .page-interna-form .upload-list{
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-public-form .upload-item, .page-interna-form .upload-item{
  border: 1px solid rgba(16,24,40,.10);
  border-radius: 12px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.page-public-form .upload-item__meta, .page-interna-form .upload-item__meta{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.page-public-form .upload-item__icon, .page-interna-form .upload-item__icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: var(--crp-blue);
  background: rgba(0,16,112,.08);
  flex: 0 0 auto;
}

.page-public-form .upload-item__name, .page-interna-form .upload-item__name{
  font-weight: 700;
  color: rgba(16,24,40,.86);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-public-form .upload-item__size, .page-interna-form .upload-item__size{
  color: var(--crp-muted);
  font-size: .86rem;
}

.page-public-form .wizard-actions, .page-interna-form .wizard-actions{
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 14px;
}

@media (max-width: 576px){
  .page-public-form .wizard-step__label, .page-interna-form .wizard-step__label{ display:none; }
  .page-public-form .wizard-actions, .page-interna-form .wizard-actions{ flex-direction: column; }
  .page-public-form .wizard-actions .btn, .page-interna-form .wizard-actions .btn{ width: 100%; }
}

.page-public-form .upload-total, .page-interna-form .upload-total{
  color: var(--crp-muted);
  font-size: .92rem;
  margin-top: 8px;
}

.page-public-form .form-section, .page-interna-form .form-section{
  padding: 0 0 6px 0;
}

.page-public-form .form-section + .form-section, .page-interna-form .form-section + .form-section{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(16, 24, 40, 0.18);
}

.page-public-form .form-section__title, .page-interna-form .form-section__title{
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.page-public-form .form-section__hint, .page-interna-form .form-section__hint{
  color: var(--crp-muted);
  margin-bottom: 12px;
}

.page-public-form #tipoOutrosGroup{
  display: none;
}

.page-public-form .privacy-note{
  background: rgba(11,46,107,.06);
  border: 1px solid rgba(11,46,107,.14);
  border-radius: 12px;
  padding: 12px 12px;
  color: rgba(16,24,40,.72);
  font-size: .92rem;
}

.page-public-form .side-card{
  position: sticky;
  top: 12px;
}

.page-public-form .side-card__title{
  font-weight: 800;
  margin-bottom: 8px;
}

.page-public-form .side-card__list{
  color: var(--crp-muted);
  padding-left: 18px;
  margin-bottom: 0;
}

.page-public-form .side-card__callout{
  background: rgba(240,176,16,.12);
  border: 1px solid rgba(240,176,16,.22);
  border-radius: 12px;
  padding: 12px 12px;
}

@media (max-width: 991.98px){
  .page-public-form .side-card{ position: static; }
}

/* =========================================================
   5) Consulta de protocolo (público)
   ========================================================= */

.page-public-protocol .protocol-card,
.page-public-confirm .confirm-card{
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
}

.page-public-protocol .protocol-card__header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.page-public-protocol .protocol-card__title{
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-public-protocol .protocol-card__hint{
  color: var(--crp-muted);
  font-size: .92rem;
}

.page-public-protocol .protocol-result{
  background: rgba(11,46,107,.04);
  border: 1px solid rgba(11,46,107,.12);
  border-radius: 14px;
  padding: 14px 14px;
}

.page-public-protocol .protocol-result__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.page-public-protocol .protocol-result__proto code{
  font-size: 1rem;
}

.page-public-protocol .protocol-result__note{
  color: var(--crp-muted);
  font-size: .92rem;
}

/* Status pill (reaproveitável) */
.status-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .86rem;
  border: 1px solid transparent;
  white-space: nowrap;
}

.status-pill--neutral{ background: rgba(108,117,125,.12); border-color: rgba(108,117,125,.22); color: #495057; }
.status-pill--info{ background: rgba(13,110,253,.10); border-color: rgba(13,110,253,.22); color: #0d6efd; }
.status-pill--warn{ background: rgba(240,176,16,.14); border-color: rgba(240,176,16,.28); color: #6b4d00; }
.status-pill--primary{ background: rgba(11,46,107,.10); border-color: rgba(11,46,107,.22); color: var(--crp-blue); }
.status-pill--ok{ background: rgba(25,135,84,.12); border-color: rgba(25,135,84,.24); color: #198754; }

/* Side card já entendido (sticky no desktop) */
.page-public-protocol .side-card,
.page-public-confirm .side-card{
  position: sticky;
  top: 12px;
  border-radius: 14px;
}

.page-public-protocol .side-card__title,
.page-public-confirm .side-card__title{
  font-weight: 800;
  margin-bottom: 8px;
}

.page-public-protocol .side-card__callout,
.page-public-confirm .side-card__callout{
  background: rgba(240,176,16,.12);
  border: 1px solid rgba(240,176,16,.22);
  border-radius: 12px;
  padding: 12px 12px;
}

.page-public-protocol .side-card__list-ol,
.page-public-confirm .side-card__list-ol{
  color: var(--crp-muted);
  padding-left: 18px;
  margin-bottom: 0;
}

.page-public-protocol .side-card__list,
.page-public-confirm .side-card__list{
  color: var(--crp-muted);
  padding-left: 18px;
  margin-bottom: 0;
}

@media (max-width: 991.98px){
  .page-public-protocol .side-card,
  .page-public-confirm .side-card{ position: static; }
}

/* =========================================================
   6) Confirmação de protocolo (público)
   ========================================================= */

.page-public-confirm .confirm-banner{
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(25,135,84,.10);
  border: 1px solid rgba(25,135,84,.18);
  border-radius: 14px;
  padding: 12px 12px;
}

.page-public-confirm .confirm-banner__icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #198754;
  background: rgba(25,135,84,.12);
}

.page-public-confirm .confirm-banner__title{
  font-weight: 900;
  letter-spacing: -0.01em;
}

.page-public-confirm .confirm-banner__subtitle{
  color: rgba(16,24,40,.70);
  font-size: .92rem;
}

.page-public-confirm .protocol-box{
  background: rgba(11,46,107,.04);
  border: 1px solid rgba(11,46,107,.12);
  border-radius: 14px;
  padding: 14px 14px;
}

.page-public-confirm .protocol-box__label{
  color: var(--crp-muted);
  font-size: .92rem;
  margin-bottom: 8px;
}

.page-public-confirm .protocol-box__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.page-public-confirm .protocol-box__value{
  font-size: 1.05rem;
  padding: 6px 8px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(16,24,40,.10);
}

.page-public-confirm .confirm-note{
  color: var(--crp-muted);
}

/* =========================================================
   4) Formulários públicos (registrar demanda / acompanhar)
   ========================================================= */

.page-public-form .public-form-shell{
  padding: 22px 0 34px 0;
}

.page-public-form .public-form-card{
  background: #fff;
  border: 1px solid rgba(16, 24, 40, 0.10);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  padding: 18px 16px;
  /* Legibilidade (principal reclamação recente): */
  font-size: 1.02rem;
  line-height: 1.35;
}

.page-public-form .public-form-card label.form-label{
  font-weight: 700;
}

.page-public-form .public-form-card .form-control,
.page-public-form .public-form-card .form-select{
  font-size: 1rem;
}

.page-public-form .public-form-card textarea.form-control{
  line-height: 1.45;
  min-height: 160px;
}

.page-public-form .public-form-card .form-text{
  line-height: 1.3;
}

/* Formulário interno (área logada): mesma pegada de legibilidade */
.page-interna-form .card{
  border-radius: 14px;
}

.page-interna-form .card-body{
  font-size: 1.02rem;
  line-height: 1.35;
}

.page-interna-form label.form-label{
  font-weight: 700;
}

.page-interna-form textarea.form-control{
  line-height: 1.45;
  min-height: 160px;
}

.page-public-form .public-form-title{
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-public-form .form-help{
  color: var(--crp-muted);
}

/* Campo condicional "Outros" */
.condicional-hidden{
  display: none !important;
}

/* Selects: robustez em mobile */
select.form-select{
  width: 100%;
  max-width: 100%;
}

/* =========================================================
   5) Rodapé público (azul)
   ========================================================= */

.public-footer{
  background: linear-gradient(135deg, var(--crp-blue) 0%, var(--crp-blue-2) 70%, #06193a 100%);
  color: rgba(255,255,255,.92);
  padding: 18px 0;
  margin-top: auto;
}

/* Rodapé interno - mesmo padrão visual do público */
.app-footer{
  background: linear-gradient(135deg, var(--crp-blue) 0%, var(--crp-blue-2) 70%, #06193a 100%);
  color: rgba(255,255,255,.92);
}

.public-footer .footer-title,
.app-footer .footer-title{
  font-weight: 600;
  color: rgba(255,255,255,.95);
}

.public-footer .footer-text,
.app-footer .footer-text{
  color: rgba(255,255,255,.82);
  line-height: 1.35;
}

.public-footer .footer-divider,
.app-footer .footer-divider{
  border-color: rgba(255,255,255,.18);
}

.public-footer .footer-link,
.app-footer .footer-link{
  color: rgba(255,255,255,.92);
  text-decoration: underline;
}

.public-footer .footer-link:hover,
.app-footer .footer-link:hover{
  color: #ffffff;
}

.public-footer .small{
  color: rgba(255,255,255,.82) !important;
}

/* =========================================================
   6) Ajustes específicos de navbar pública (altura/estouro)
   ========================================================= */

.public-shell nav.navbar{
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* =========================================================
   4) Detalhe da demanda (área interna)
   - Reduz densidade vertical do card de Resumo (list-group)
   ========================================================= */

.page-demanda-detalhe .demanda-resumo-card .list-group-item{
  padding-top: .50rem;
  padding-bottom: .50rem;
  line-height: 1.25;
}

.page-demanda-detalhe .demanda-resumo-card .list-group-item .small{
  line-height: 1.2;
}

/* Mantém o bloco 'Situação' compacto (secundário não cria "buracos") */
.page-demanda-detalhe .demanda-resumo-card .list-group-item .text-end .small{
  margin-top: .25rem;
}


/* =========================================================
   5) Ajustes finos de espaçamento no login
   - Evita "altura dupla" (navbar + 100vh)
   ========================================================= */

.page-login .login-shell{
  flex: 1 0 auto;
  min-height: 0;
  padding: 18px 0;
}

.page-login .app-navbar{
  margin-bottom: .5rem !important;
}




/* =========================================================
   6) Relatórios (interno)
   ========================================================= */

.page-relatorios .card-header{
  font-weight: 600;
}

/* KPI cards: consistência visual e leitura rápida */
.page-relatorios .kpi-card{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

.page-relatorios .kpi-title{
  font-size: .92rem;
  color: var(--crp-muted);
  margin-bottom: 6px;
}

.page-relatorios .kpi-value{
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--crp-ink);
}

.page-relatorios .kpi-sub{
  margin-top: 6px;
  font-size: .85rem;
  color: var(--crp-muted);
}

/* Bordas-coloridas suaves por "categoria" (sem perder padrão do Bootstrap) */
.page-relatorios .kpi-primary{ border-left: 4px solid rgba(13,110,253,.9); }
.page-relatorios .kpi-info{ border-left: 4px solid rgba(13,202,240,.9); }
.page-relatorios .kpi-warning{ border-left: 4px solid rgba(255,193,7,.9); }
.page-relatorios .kpi-success{ border-left: 4px solid rgba(25,135,84,.9); }
.page-relatorios .kpi-neutral{ border-left: 4px solid rgba(108,117,125,.6); }

/* Containers de gráfico com altura fixa (evita "puladas" e melhora leitura) */
.page-relatorios .chart-box{
  position: relative;
  width: 100%;
  height: 260px;
}

.page-relatorios .chart-box-sm{ height: 220px; }
.page-relatorios .chart-box-md{ height: 300px; }
.page-relatorios .chart-box-lg{ height: 340px; }

@media (max-width: 576px){
  .page-relatorios .chart-box{ height: 260px; }
  .page-relatorios .chart-box-lg{ height: 300px; }
}

/* Melhor espaçamento do formulário de filtros */
.page-relatorios .form-label{ font-weight: 500; }