/* Estilos dos widgets próprios do SisMetas (Painel do Prefeito). Usam as variáveis de cor do Filament. */

.sm-barra { display: flex; gap: 2px; height: .75rem; width: 100%; overflow: hidden; border-radius: .25rem; }
.sm-barra a { height: 100%; }

.sm-lista { list-style: none; margin: 1rem 0 0; padding: 0; }
.sm-lista li + li { border-top: 1px solid var(--gray-100); }
.dark .sm-lista li + li { border-top-color: rgb(255 255 255 / .05); }
.sm-linha { display: flex; align-items: center; gap: .75rem; padding: .5rem; border-radius: .5rem; color: inherit; text-decoration: none; }
.sm-linha:hover { background: var(--gray-50); }
.dark .sm-linha:hover { background: rgb(255 255 255 / .05); }
.sm-linha .sm-icone { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.sm-linha .sm-texto { flex: 1; min-width: 0; }
.sm-titulo { display: block; font-size: .875rem; font-weight: 500; color: var(--gray-950); }
.dark .sm-titulo { color: #fff; }
.sm-sub { display: block; font-size: .75rem; color: var(--gray-500); }
.dark .sm-sub { color: var(--gray-400); }
.sm-num { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.sm-tabela { width: 100%; border-collapse: collapse; font-size: .875rem; }
.sm-tabela th { text-align: left; font-size: .75rem; font-weight: 500; color: var(--gray-500); padding: .5rem; border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
.dark .sm-tabela th { border-bottom-color: rgb(255 255 255 / .1); }
.sm-tabela td { padding: .5rem; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.dark .sm-tabela td { border-bottom-color: rgb(255 255 255 / .05); }
.sm-tabela tr.sm-clicavel { cursor: pointer; }
.sm-tabela tr.sm-clicavel:hover td { background: var(--gray-50); }
.dark .sm-tabela tr.sm-clicavel:hover td { background: rgb(255 255 255 / .05); }
.sm-tabela .sm-dir { text-align: right; font-variant-numeric: tabular-nums; }
.sm-rolagem { overflow-x: auto; }

.sm-progresso { position: relative; height: .5rem; min-width: 5rem; border-radius: .25rem; background: var(--gray-100); }
.dark .sm-progresso { background: rgb(255 255 255 / .1); }
.sm-progresso > i { position: absolute; inset: 0 auto 0 0; border-radius: .25rem; background: var(--primary-500); }
.sm-progresso > b { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--gray-700); }
.dark .sm-progresso > b { background: var(--gray-200); }
.sm-barra-valor { height: .375rem; margin-top: .25rem; border-radius: 0 .25rem .25rem 0; background: var(--primary-400); min-width: 2px; }

.sm-alerta + .sm-alerta { margin-top: 1rem; }
.sm-alerta h4 { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin: 0 0 .25rem; font-size: .8125rem; font-weight: 600; color: var(--gray-950); }
.dark .sm-alerta h4 { color: #fff; }
.sm-alerta h4 a { font-size: .75rem; font-weight: 500; color: var(--primary-600); text-decoration: none; }
.sm-vazio { font-size: .8125rem; color: var(--gray-500); padding: .25rem .5rem; }
.sm-sigla { font-size: .75rem; font-weight: 700; color: var(--primary-600); letter-spacing: .02em; }
.dark .sm-sigla { color: var(--primary-400); }