/* ============================================================
   Portal de Consulta Sis Água Itajuípe
   Camada de identidade visual sobre o Tabler.
   Paleta institucional "água tratada": azul profundo + ciano.
   ============================================================ */

:root {
  --agua-azul:        #0a4f8f;   /* azul institucional profundo */
  --agua-azul-escuro: #073a6b;
  --agua-ciano:       #1aa6c4;   /* água tratada / acento */
  --agua-ciano-claro: #e6f6fa;
  --agua-areia:       #f4f7f9;   /* fundo neutro */

  --status-ok:    #2fb344;
  --status-aten:  #f59f00;
  --status-fora:  #d63939;
  --status-sem:   #9aa4b2;

  --tblr-primary: var(--agua-azul);
}

body {
  background: var(--agua-areia);
}

/* ---------- Cabeçalho institucional ---------- */
.brand-bar {
  background: linear-gradient(100deg, var(--agua-azul-escuro), var(--agua-azul) 55%, var(--agua-ciano) 160%);
  color: #fff;
}
.brand-bar a { color: #fff; }
.brand-bar .navbar-brand-title { font-weight: 700; letter-spacing: .2px; }
.brand-bar .navbar-brand small { color: rgba(255,255,255,.78); font-weight: 500; }

.brand-mark {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,.14);
  margin-right: .6rem;
}
.brand-mark svg { width: 22px; height: 22px; }

.nav-portal .nav-link { color: rgba(255,255,255,.86); font-weight: 500; }
.nav-portal .nav-link:hover,
.nav-portal .nav-link.active { color: #fff; }
.nav-portal .nav-link.active { border-bottom: 2px solid var(--agua-ciano); }

/* ---------- Hero da página inicial ---------- */
.hero-agua {
  background:
    radial-gradient(1200px 400px at 80% -10%, rgba(26,166,196,.18), transparent),
    linear-gradient(180deg, #fff, var(--agua-ciano-claro));
  border-bottom: 1px solid #e3eaf0;
}
.hero-agua .display-6 { color: var(--agua-azul-escuro); font-weight: 700; }

/* ---------- Cards indicadores ---------- */
.card-indicador { border: 0; box-shadow: 0 1px 2px rgba(10,79,143,.06), 0 4px 16px rgba(10,79,143,.05); }
.card-indicador .num { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--agua-azul-escuro); }
.card-indicador .rotulo { color: #6b7785; font-size: .82rem; text-transform: uppercase; letter-spacing: .4px; }
.card-indicador .ico {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--agua-ciano-claro); color: var(--agua-azul);
}

/* ---------- Selo de situação (signature) ---------- */
.selo-situacao {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem .9rem; border-radius: 999px; font-weight: 600;
  border: 1px solid transparent;
}
.selo-situacao .dot { width: 12px; height: 12px; border-radius: 50%; }
.selo-ok   { background: #eafaf0; color: #1a7a32; border-color:#bdebcb; }
.selo-ok   .dot { background: var(--status-ok); }
.selo-aten { background: #fff7e6; color: #9a6700; border-color:#ffe1a3; }
.selo-aten .dot { background: var(--status-aten); }
.selo-fora { background: #fdecec; color: #a51c1c; border-color:#f6c4c4; }
.selo-fora .dot { background: var(--status-fora); }
.selo-sem  { background: #eef1f4; color: #5a6573; border-color:#dde3ea; }
.selo-sem  .dot { background: var(--status-sem); }

/* badges de situação em tabelas */
.badge-situacao { font-weight: 600; }
.badge-DENTRO_PADRAO { background: #eafaf0; color: #1a7a32; }
.badge-FORA_PADRAO   { background: #fdecec; color: #a51c1c; }
.badge-SEM_INFO      { background: #eef1f4; color: #5a6573; }

/* ---------- Mapa ---------- */
#mapa { height: 540px; border-radius: 12px; z-index: 0; }

/* ---------- Rodapé ---------- */
.rodape-portal { color: #6b7785; font-size: .85rem; }

/* ---------- Ajustes DataTables + Tabler ---------- */
table.dataTable { width: 100% !important; }
.dt-search input, .dt-length select { border-radius: 8px; }

/* Acessibilidade: foco visível */
a:focus-visible, button:focus-visible, .nav-link:focus-visible {
  outline: 3px solid var(--agua-ciano);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}