/* =======================================================================
   SAUDE.CSS — estilos do módulo Saúde da Obra (DRE de materiais).
   Reusa o design system do app (styles.css): .card .btn .badge .kpi .grid
   .table-wrap .field .chip .muted. Aqui só o que não existe lá.
   ======================================================================= */

.saude { max-width: 1180px; margin: 0 auto; }

/* topo */
.sau-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-bottom: 14px; }
.sau-top-tit { flex: 1; min-width: 220px; }
.sau-top-tit h1 { font-size: var(--fs-page); line-height: var(--lh-title); letter-spacing: var(--tracking-title); color: var(--azul); }
.sau-top-ctrls .field { margin-bottom: 0; }
.sau-obra { min-width: 240px; }
.sau-selo { width: 100%; }

/* sub-navegação */
.sau-subnav { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--borda); margin-bottom: 16px; padding-bottom: 2px; }
.sau-subnav button { border: 0; background: transparent; color: var(--cinza-texto);
  padding: 10px 14px; border-radius: 10px 10px 0 0; font-weight: 700; font-size: .9rem;
  white-space: nowrap; cursor: pointer; border-bottom: 3px solid transparent; }
.sau-subnav button:hover { background: var(--cinza-claro); color: var(--azul); }
.sau-subnav button.active { color: var(--azul); border-bottom-color: var(--azul); background: var(--azul-bg); }

.kpi-lbl { font-size: .78rem; color: var(--cinza-texto); text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }

/* nota informativa */
.sau-nota { font-size: .85rem; background: var(--azul-bg); border: 1px solid var(--accent-soft-border);
  border-radius: 10px; padding: 10px 12px; margin: 12px 0; color: var(--cinza-texto); }

/* barra comprado (clara) com o consumido por dentro (escuro) */
.sau-bar { height: 8px; border-radius: 999px; background: var(--cinza-claro); margin-top: 5px; overflow: hidden; }
.sau-bar-comp { display: block; height: 100%; background: var(--azul-bg); border-radius: 999px; position: relative; }
.sau-bar-cons { position: absolute; left: 0; top: 0; height: 100%; background: var(--azul); border-radius: 999px; }
.sau-bar-casa { background: var(--cobre); }

/* linha de total */
.sau-total td { border-top: 2px solid var(--borda); background: var(--cinza-claro); }

/* deixa a grade encolher no celular (tabelas rolam dentro do .table-wrap) */
.saude .grid > * { min-width: 0; }

@media (max-width: 780px) {
  .saude .grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .sau-top-ctrls { width: 100%; }
  .sau-obra { flex: 1; min-width: 0; }
}