/* ==========================================================================
   BI de SMS: só o que é exclusivo deste painel. O resto (tokens, painéis, tabelas, filtros)
   vem do ../css/style.css da plataforma.
   ========================================================================== */

/* Cores das seções do .pbix (faixas do Início) e de situação (sempre com texto ou ícone ao lado) */
:root {
  --sms-seg: #1E88E5; --sms-amb: #22A04B; --sms-sau: #D32F2F; --sms-soc: #F57C00;
  --sms-ok: #12C760; --sms-ok-forte: #1E9E4A; --sms-ruim: #D64545; --sms-fora: #E6A23C; --sms-trilho: #E2E8F0;
  --sms-azul: #118DFF; --sms-azul-esc: #12239E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sms-ok: #34D399; --sms-ok-forte: #4ADE80; --sms-ruim: #F87171; --sms-fora: #FBBF24; --sms-trilho: #334155;
    --sms-azul: #3B9EFF; --sms-azul-esc: #6C7CF0;
  }
}
:root[data-theme="dark"] {
  --sms-ok: #34D399; --sms-ok-forte: #4ADE80; --sms-ruim: #F87171; --sms-fora: #FBBF24; --sms-trilho: #334155;
  --sms-azul: #3B9EFF; --sms-azul-esc: #6C7CF0;
}

/* Cards */
.sms-card {
  display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; padding: 12px 14px;
  border-radius: 13px; border: 1px solid var(--line-soft); background: linear-gradient(160deg, var(--surface-2), var(--surface));
  text-align: center;
}
.sms-card .nome { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.sms-card strong { font: 700 26px/1.15 var(--font-num); color: var(--text); }
.sms-card small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.sms-card small.sms-agua { margin-top: 2px; padding: 3px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); }
.sms-card small.sms-agua.ok { background: color-mix(in srgb, var(--sms-ok) 16%, transparent); color: var(--sms-ok-forte); }
.sms-card small.sms-agua.ruim { background: color-mix(in srgb, var(--sms-ruim) 14%, transparent); color: var(--sms-ruim); }

/* Início: uma faixa por seção, com o título levando à página */
.sms-secao { border-top: 4px solid var(--sec); margin-bottom: 18px; }
.sms-secao .panel-head h2 { margin: 0; }
.sms-ir { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.sms-ir .head-icon { background: var(--sec); color: #fff; }
.sms-ir:hover { color: var(--brand); }
.sms-ir:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
.sms-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

/* Segurança */
.sms-resumo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.sms-resumo .sms-card { border-left: 6px solid var(--band, var(--line)); text-align: left; align-items: flex-start; }
.sms-resumo .sms-card strong { font-size: 30px; }
.sms-resumo .r-amarelo { --band: #F9B233; }
.sms-resumo .r-verde { --band: #43B649; }
.sms-resumo .r-laranja { --band: #F26A1B; }
.sms-resumo .r-azul { --band: #14B8E8; }
.sms-resumo .r-cinza { --band: #94A3B8; }
.sms-grid-seg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 18px 0; }
.sms-dono { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: center; }
.sms-rosca { position: relative; width: 160px; height: 160px; }
.sms-rosca b { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 700 24px var(--font-num); color: var(--text); pointer-events: none; }
.sms-rosca b small { font: 600 12px var(--font); color: var(--text-2); }
.sms-legenda { display: flex; gap: 14px; justify-content: flex-end; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.sms-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.sms-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.sms-dot.ok { background: var(--sms-ok); }
.sms-dot.fora { background: var(--sms-fora); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sms-indic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sms-indic .sms-card strong { font-size: 20px; }
.sms-com-lado { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 12px; align-items: center; }
.sms-lado { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 13px; background: var(--surface-2); text-align: center; }
.sms-lado span { font-size: 12.5px; font-weight: 700; color: var(--brand-ink); }
.sms-lado strong { font: 700 28px var(--font-num); color: var(--text); }
.sms-lado em { font: 700 17px var(--font-num); font-style: normal; }
.sms-lado em.sobe { color: #209A36; }
.sms-lado em.desce { color: #E66C37; }
.sms-lado small { font-size: 11px; color: var(--muted); }
tr.clicavel { cursor: pointer; }

/* Meio Ambiente */
.sms-cards-amb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sms-nota { margin: 4px 0 0; text-align: center; font-size: 12px; color: var(--text-2); }
.sms-tab-piv td:first-child { white-space: nowrap; }

/* Saúde */
.sms-cards-sau { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.sms-cards-sau .panel { padding: 8px; }
.sms-cards-sau .sms-card { border: 0; background: none; }
.sms-card-duplo { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.sms-prazo { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--text-2); font-weight: 600; border-left: 1px solid var(--line-soft); padding-left: 12px; }
.sms-prazo strong { display: block; font: 700 18px var(--font-num); color: var(--text); }
.sms-grid-sau { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); margin-bottom: 18px; }
.sms-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sms-bolhas { min-height: 420px; }

/* Responsabilidade Social */
.sms-grid-soc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.sms-censo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.sms-censo-g { gap: 12px; }
.sms-h3 { margin: 12px 0 4px; font: 700 13px var(--font); color: var(--text); }
.sms-param { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-3); }
.sms-param button { border: 0; border-radius: 9px; padding: 6px 14px; background: none; color: var(--text-2); font: 600 12.5px var(--font); cursor: pointer; }
.sms-param button[aria-pressed="true"] { background: var(--surface); color: var(--brand-ink); box-shadow: var(--shadow-sm); }
.sms-param button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.sms-conleste { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 12px 0 4px; font-size: 14px; color: var(--text); font-weight: 500; }
.sms-mapa { min-height: 300px; }

@media (max-width: 1280px) {
  .sms-resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sms-grid-seg, .sms-grid-sau, .sms-grid-soc { grid-template-columns: 1fr; }
  .sms-cards-sau { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sms-resumo, .sms-cards-amb, .sms-indic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sms-dono, .sms-com-lado, .sms-card-duplo { grid-template-columns: 1fr; }
  .sms-cards-sau { grid-template-columns: 1fr; }
}