/* ============================================================================
   SisÁgua Controle — sac-redesign.css
   Componentes de layout do redesign (dashboard, stepper, toolbars, stat cards).
   Depende de tokens.css (--sac-*) e complementa app.css. Importe DEPOIS de app.css:
       <link rel="stylesheet" href="app.css" />
       <link rel="stylesheet" href="sac-redesign.css" />
   (ou cole este conteúdo no fim de app.css).
   ========================================================================== */

/* ------------------------------------------------------------ toolbar / título */
.sac-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.sac-count {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    background: var(--sac-slate-100);
    border-radius: var(--sac-radius-pill);
    font-family: var(--sac-font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--sac-slate-500);
}

.sac-subtitle {
    font-size: 14.5px;
    color: var(--sac-slate-500);
    margin: 0;
}

.sac-eyebrow {
    font-family: var(--sac-font-mono);
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--sac-slate-500);
}

/* seção com título + ação (ex.: "Formas de abastecimento") */
.sac-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sac-section-title {
    font-family: var(--sac-font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sac-ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ------------------------------------------------------------ chips de filtro */
.sac-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sac-chip {
    padding: 6px 14px;
    background: #fff;
    border: 1px solid var(--sac-slate-200);
    color: var(--sac-slate-700);
    border-radius: var(--sac-radius-pill);
    font-family: var(--sac-font-body);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

    .sac-chip:hover {
        border-color: var(--sac-blue-300);
    }

    /* selecionado acompanha o accent (verde-água), não mais o preto da barra */
    .sac-chip.is-active {
        background: var(--sac-teal-700);
        border-color: var(--sac-teal-700);
        color: #fff;
    }

/* rótulo mono de papel do usuário / código */
.sac-tag {
    font-family: var(--sac-font-mono);
    font-size: 11px;
    padding: 2px 9px;
    background: var(--sac-slate-100);
    color: var(--sac-slate-700);
    border-radius: 6px;
}

    .sac-tag.is-admin {
        background: var(--sac-blue-100);
        color: var(--sac-blue-900);
    }

/* ------------------------------------------------------------ dashboard: cabeçalho */
.sac-dash-head {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.sac-dash-greeting {
    font-family: var(--sac-font-display);
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--sac-ink);
    margin: 2px 0 4px;
}

/* ------------------------------------------------------------ dashboard: KPIs */
.sac-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.sac-stat {
    background: #fff;
    border: 1px solid var(--sac-border);
    border-radius: var(--sac-radius-lg);
    box-shadow: var(--sac-shadow-sm);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Card de estatística clicável (triagem do admin global). */
.sac-stat--link {
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

    .sac-stat--link:hover {
        border-color: var(--sac-blue-500);
        box-shadow: var(--sac-shadow-md, 0 6px 18px rgba(15, 23, 42, .10));
        transform: translateY(-1px);
    }

.sac-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sac-stat-label {
    font-family: var(--sac-font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sac-slate-500);
}

.sac-stat-ic {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none;
}

    .sac-stat-ic.is-blue { background: var(--sac-blue-100); color: var(--sac-blue-700); }
    .sac-stat-ic.is-green { background: var(--sac-green-100); color: var(--sac-green-700); }
    .sac-stat-ic.is-amber { background: #F3E3D2; color: #B0781C; }

    .sac-stat-ic svg { width: 19px; height: 19px; fill: currentColor; }

.sac-stat-body {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.sac-stat-value {
    font-family: var(--sac-font-display);
    font-size: 34px;
    font-weight: 600;
    color: var(--sac-ink);
    line-height: 1;
}

.sac-stat-delta {
    font-size: 12px;
    margin-bottom: 5px;
    color: var(--sac-slate-500);
}

    .sac-stat-delta.is-green { color: var(--sac-green-700); }
    .sac-stat-delta.is-amber { color: #B0781C; }

/* ------------------------------------------------------------ dashboard: grade e painéis */
.sac-dash-grid {
    display: grid;
    grid-template-columns: 1.9fr minmax(0, 1fr);
    gap: 18px;
}

.sac-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* Âncora da faixa de atalhos rápidos da Home.
   A altura da linha do grid é a da coluna mais alta, então sem reserva os atalhos
   sobem e descem conforme o tamanho da tabela "Envios recentes": a coluna esquerda
   cresce ~49px por linha e passa a mandar na altura já a partir da 4ª (o painel de
   distribuição tem 262px fixos — são sempre 5 barras, mesmo zeradas).
   Reservamos o pior caso, as 6 linhas do Take(6) da Home, e a faixa fica parada em
   qualquer quantidade de envios:
       cabeçalho da seção 24,5px + margem 12px
       + cabeçalho da tabela 33,5px + 6 linhas × 49,4px  =  366,3px  ->  367px
   Só no layout de duas colunas: empilhado (<=1180px) a tabela e o painel viram uma
   coluna só, a reserva viraria um vão morto entre os dois e não há altura a disputar. */
@media (min-width: 1181px) {
    .sac-col--recentes {
        min-height: 367px;
    }
}

/* A reserva acima só fecha se a linha tiver altura fixa, e uma razão social longa
   quebra em 2-3 linhas (49px vira 82px, ou 118px em coluna estreita) — o suficiente
   para estourar a âncora sozinha. O corte fica numa caixa interna, não na célula:
   mudar o display do <td> tiraria ele do table-layout, e usar nowrap faria a largura
   mínima da coluna virar o nome inteiro, espremendo as outras. Com line-clamp o
   cálculo de largura das colunas continua o de hoje e só a altura fica presa a uma
   linha. Vale em qualquer largura: na Home a tabela nunca deve crescer na vertical. */
.sac-cel-corte {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
}

.sac-panel {
    background: #fff;
    border: 1px solid var(--sac-border);
    border-radius: var(--sac-radius-lg);
    box-shadow: var(--sac-shadow-sm);
    overflow: hidden;
}

.sac-panel-pad { padding: 18px 20px; }

.sac-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--sac-slate-100);
}

.sac-panel-title {
    font-family: var(--sac-font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--sac-ink);
}

.sac-panel-link {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sac-blue-700);
    text-decoration: none;
}

/* barras de distribuição por status */
.sac-bars {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.sac-bar-top {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    margin-bottom: 5px;
    color: var(--sac-slate-700);
}

    .sac-bar-top b {
        font-family: var(--sac-font-mono);
        color: var(--sac-ink);
    }

.sac-bar-track {
    height: 6px;
    background: var(--sac-slate-100);
    border-radius: 3px;
    overflow: hidden;
}

.sac-bar-fill { height: 100%; }
    .sac-bar-fill.is-green { background: var(--sac-green-500); }
    .sac-bar-fill.is-blue { background: var(--sac-blue-500); }
    .sac-bar-fill.is-blue-soft { background: var(--sac-blue-300); }
    .sac-bar-fill.is-slate { background: var(--sac-slate-300); }
    .sac-bar-fill.is-danger { background: var(--sac-danger); }

/* cartão de prazo do semestre */
.sac-deadline {
    position: relative;
    overflow: hidden;
    border: 1px solid #CDE3F2;
    border-radius: var(--sac-radius-lg);
    background: var(--sac-blue-100);
    padding: 18px 20px;
}

    .sac-deadline .sac-deadline-wm {
        position: absolute;
        right: -10px;
        bottom: -14px;
        font-size: 96px;
        color: rgba(11, 92, 138, .10);
        pointer-events: none;
    }

    .sac-deadline > * { position: relative; }

.sac-deadline-k {
    font-family: var(--sac-font-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sac-blue-700);
    margin-bottom: 8px;
}

.sac-deadline-v {
    font-family: var(--sac-font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--sac-blue-900);
    line-height: 1;
}

.sac-deadline-sub {
    font-size: 12.5px;
    color: var(--sac-blue-700);
    margin-top: 6px;
}

/* ações rápidas */
.sac-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.sac-action {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--sac-border);
    border-radius: var(--sac-radius-lg);
    box-shadow: var(--sac-shadow-sm);
    padding: 16px 18px;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .sac-action:hover {
        border-color: var(--sac-blue-300);
        box-shadow: var(--sac-shadow-md);
    }

.sac-action-ic {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex: none;
}

    .sac-action-ic.is-blue { background: var(--sac-blue-100); color: var(--sac-blue-700); }
    .sac-action-ic.is-green { background: var(--sac-green-100); color: var(--sac-green-700); }
    .sac-action-ic.is-slate { background: var(--sac-slate-100); color: var(--sac-slate-500); }
    .sac-action-ic svg { width: 21px; height: 21px; fill: currentColor; }

.sac-action-title {
    font-family: var(--sac-font-display);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--sac-ink);
}

.sac-action-sub {
    font-size: 12px;
    color: var(--sac-slate-500);
}

/* hero para visitante não autenticado */
.sac-hero {
    max-width: 560px;
    padding: 20px 0;
}

/* ------------------------------------------------------------ envio: stepper */
.sac-stepper {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--sac-border);
    border-radius: var(--sac-radius-lg);
    box-shadow: var(--sac-shadow-sm);
    padding: 22px 26px;
}

.sac-step {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: none;
}

.sac-step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    font-family: var(--sac-font-mono);
    font-size: 12px;
}

    .sac-step-dot svg { width: 19px; height: 19px; }

.sac-step-pip {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.sac-step-num {
    display: block;
    font-family: var(--sac-font-mono);
    font-size: 10px;
    letter-spacing: .08em;
}

.sac-step-label {
    display: block;
    font-size: 13.5px;
}

.sac-step-line {
    flex: 1;
    height: 2px;
    background: var(--sac-border);
    margin: 0 14px;
    min-width: 16px;
}

    .sac-step-line.is-done { background: var(--sac-green-500); }
    .sac-step-line.is-active { background: var(--sac-blue-300); }

/* estados dos passos */
.sac-step.is-done .sac-step-dot { background: var(--sac-green-500); color: #fff; }
.sac-step.is-done .sac-step-dot svg { fill: #fff; }
.sac-step.is-done .sac-step-num { color: var(--sac-slate-300); }
.sac-step.is-done .sac-step-label { color: var(--sac-green-700); font-weight: 600; }

.sac-step.is-active .sac-step-dot { background: #fff; border: 2px solid var(--sac-blue-700); }
.sac-step.is-active .sac-step-pip { background: var(--sac-blue-700); }
.sac-step.is-active .sac-step-num { color: var(--sac-blue-300); }
.sac-step.is-active .sac-step-label { color: var(--sac-ink); font-weight: 600; }

.sac-step.is-todo .sac-step-dot { background: var(--sac-slate-50); border: 1px solid var(--sac-slate-200); color: var(--sac-slate-300); }
.sac-step.is-todo .sac-step-num { color: #CBD5DA; }
.sac-step.is-todo .sac-step-label { color: var(--sac-slate-300); font-weight: 500; }

.sac-step.is-error .sac-step-dot { background: var(--sac-danger); color: #fff; }
.sac-step.is-error .sac-step-dot svg { fill: #fff; }
.sac-step.is-error .sac-step-num { color: var(--sac-slate-300); }
.sac-step.is-error .sac-step-label { color: #7A1E26; font-weight: 600; }

/* ------------------------------------------------------------ envio: cartões de info */
.sac-info-card {
    background: #fff;
    border: 1px solid var(--sac-border);
    border-radius: var(--sac-radius-lg);
    box-shadow: var(--sac-shadow-sm);
    padding: 18px 20px;
}

.sac-info-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

    .sac-info-head svg { width: 19px; height: 19px; }

.sac-info-title {
    font-family: var(--sac-font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--sac-ink);
}

/* lista de definição (chave/valor) */
.sac-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sac-meta-k {
    font-family: var(--sac-font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sac-slate-400, #8A98A0);
    margin-bottom: 5px;
}

.sac-meta-v {
    font-size: 13.5px;
    color: var(--sac-slate-700);
}

/* caixa de retorno OK da integração */
.sac-integration-ok {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 13px;
    background: var(--sac-green-100);
    border-radius: 9px;
    font-size: 12.5px;
    color: var(--sac-green-900);
    line-height: 1.6;
}

    .sac-integration-ok svg { width: 17px; height: 17px; fill: var(--sac-green-700); margin-top: 1px; flex: none; }

/* célula de arquivo (PDF) */
.sac-file-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .sac-file-cell svg { width: 17px; height: 17px; fill: var(--sac-danger); flex: none; }

/* botão de upload discreto */
.sac-upload {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: #fff;
    border: 1px dashed var(--sac-slate-300);
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sac-slate-700);
    cursor: pointer;
}

    .sac-upload:hover { border-color: var(--sac-blue-500); color: var(--sac-blue-700); }

/* ------------------------------------------------------------ tabelas simples (envio) */
.tabela-simples,
.tabela-analises {
    border-collapse: collapse;
    width: 100%;
    font-size: 13.5px;
    background: #fff;
    border: 1px solid var(--sac-border);
    border-radius: var(--sac-radius-lg);
    overflow: hidden;
}

    .tabela-simples th,
    .tabela-analises th {
        font-family: var(--sac-font-mono);
        font-size: 10.5px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--sac-slate-500);
        background: var(--sac-slate-50);
        padding: 11px 16px;
        text-align: left;
        border-bottom: 1px solid var(--sac-slate-100);
    }

    .tabela-simples td,
    .tabela-analises td {
        border-bottom: 1px solid var(--sac-slate-100);
        padding: 10px 16px;
        text-align: left;
        vertical-align: middle;
        color: var(--sac-slate-700);
    }

    .tabela-simples tbody tr:last-child td,
    .tabela-analises tbody tr:last-child td { border-bottom: none; }

    .tabela-simples tbody tr:hover,
    .tabela-analises tbody tr:hover { background: var(--sac-slate-50); }

    .tabela-analises thead th { position: sticky; top: 0; z-index: 1; }

/* ------------------------------------------------------------ grade de análises por ponto
   Seção recolhível por ponto de monitoramento, com cabeçalho fixo (sticky) durante a rolagem
   e linhas separadoras por grupo de parâmetro dentro da tabela — espelha a estrutura
   (ponto × grupo) do formulário do SISAGUA e dos lotes de transmissão. */
.sac-ponto {
    width: 100%;
    box-sizing: border-box;
}

.sac-ponto-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--sac-border);
    border-radius: var(--sac-radius-lg);
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(15, 34, 46, .05);
}

    .sac-ponto-head:hover { background: var(--sac-slate-50); }

.sac-ponto-titulo {
    font-family: var(--sac-font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sac-ink);
}

/* linha separadora de grupo de parâmetro (mesma linguagem dos cabeçalhos de tabela) */
.sac-grupo-linha td {
    font-family: var(--sac-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--sac-green-700);
    background: var(--sac-slate-50);
    padding: 7px 16px;
}

.sac-grupo-qtde {
    font-weight: 500;
    color: var(--sac-slate-400, #8A98A0);
    margin-left: 6px;
}

/* inputs inline das análises */
.campo {
    width: 110px;
    padding: 5px 9px;
    font-size: 13px;
    font-family: var(--sac-font-mono);
    border: 1px solid var(--sac-slate-200);
    border-radius: 7px;
    background: #fff;
    color: var(--sac-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .campo:focus {
        outline: none;
        border-color: var(--sac-teal-700);
        box-shadow: 0 0 0 1px var(--sac-teal-700);
    }

    .campo:disabled {
        background: transparent;
        border-color: transparent;
        color: var(--sac-slate-700);
    }

.campo-data { width: 104px; }

/* mini-badge inline (editado / manual / data!) — usa SacPill quando possível */
.sac-inline-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--sac-radius-pill);
    font-size: 10px;
    font-weight: 600;
    margin-left: 6px;
}

    .sac-inline-badge.is-edit { background: var(--sac-blue-100); color: var(--sac-blue-900); }
    .sac-inline-badge.is-manual { background: var(--sac-slate-100); color: var(--sac-slate-700); }

/* ------------------------------------------------------------ enquadramento */
/* Os pais imediatos são FluentStack verticais (align-items: start): sem largura
   explícita os blocos encolhem ao conteúdo e a página fica "solta" em 1920px. */
.sac-dash-head,
.sac-stat-grid,
.sac-dash-grid,
.sac-actions-grid,
.sac-stepper,
.sac-info-card,
.sac-section-head,
.sac-filters,
.sac-deadline,
.sac-panel {
    width: 100%;
    box-sizing: border-box;
}

/* --------------------------------------------- lista que preenche a tela */
/* Telas de lista (Clientes, Envios semestrais) em que quem rola é a lista, não a
   página: a barra fica à direita do quadro e o topo — título, contagem, busca,
   chips e o painel de filtros avançados — nunca sai de vista. Abrir os filtros
   avançados encolhe a lista em vez de empurrar tudo para baixo.

   Quem rola hoje é o .body-content do FluentBodyContent, que tem height: 100% de
   calc(100dvh - 58px) (ver MainLayout). Para o quadro herdar essa altura a corrente
   inteira precisa ser flex com min-height: 0 — sem isso o item de flex assume a
   altura do conteúdo e a página volta a crescer em vez de rolar por dentro.

   Só a partir de 1181px, o mesmo ponto de corte do resto do arquivo: em tela baixa
   a caixa de rolagem interna vira uma fresta de três linhas, pior que rolar. */
@media (min-width: 1181px) {
    /* O :has evita mexer nas outras telas — o wrapper é o mesmo elemento do layout.
       height (definido), não min-height: com min-height a altura segue indefinida, o
       flex não tem espaço livre a distribuir e o quadro volta a crescer com o
       conteúdo em vez de rolar por dentro. */
    .sac-conteudo:has(> .sac-tela-lista) {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* o FluentStack raiz da página (div.stack-vertical) */
    .sac-tela-lista {
        flex: 1;
        min-height: 0;
    }

    .sac-card--lista {
        flex: 1;
        /* Só a vertical. Com "overflow: auto" os dois eixos ficam roláveis e aparece
           uma barra horizontal: o grid tem conteúdo alguns pixels mais largo que o
           quadro (os popups de opção de coluna do Fluent, com min-width: 250px, ficam
           no fluxo mesmo invisíveis, e as faixas em fr não encolhem abaixo do
           min-content das células). Isso já existia antes — o "overflow: hidden" do
           .sac-card apenas escondia. Aqui mantemos esse recorte na horizontal. */
        overflow-y: auto;
        overflow-x: hidden;
        /* Piso: em janela baixa a lista para de encolher e a página volta a rolar,
           em vez de a lista virar uma fresta. */
        min-height: 240px;
    }

    /* O cabeçalho fixo é do próprio grid (GenerateHeaderOption.Sticky), mas vem com
       um fundo do tema Fluent por cima. Aqui devolvemos o cinza usado no resto do
       app; o bundle de CSS scoped carrega depois destas folhas, então a regra
       precisa de mais especificidade que a dele para valer. */
    .sac-card--lista thead tr[row-type='sticky-header'] > th {
        background: var(--sac-slate-50);
    }
}

/* ------------------------------------------------------------ responsivo */
@media (max-width: 1180px) {
    .sac-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sac-dash-grid { grid-template-columns: minmax(0, 1fr); }
    .sac-actions-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .sac-stat-grid { grid-template-columns: minmax(0, 1fr); }
    .sac-stepper { overflow-x: auto; }
}

/* ------------------------------------------------------------ estado vazio (SacEstadoVazio) */
.sac-vazio {
    width: 100%;
    padding: 38px 24px;
    background: #fff;
    border: 1.5px dashed var(--sac-slate-200);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.sac-vazio-ic {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--sac-slate-50);
    border: 1px solid var(--sac-slate-100);
    display: grid;
    place-items: center;
    margin-bottom: 4px;
}

.sac-vazio-titulo {
    font-family: var(--sac-font-display);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--sac-ink);
}

.sac-vazio-texto {
    max-width: 520px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sac-slate-500);
}

.sac-vazio-acao {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

/* ------------------------------------------------------------ links de entidade */
/* Toda menção a uma entidade navega até ela: o link herda o visual da célula e
   só se revela no hover/foco, para o grid não virar um tapete azul. */
a.sac-cel-link {
    color: inherit;
    text-decoration: none;
}

    a.sac-cel-link:hover,
    a.sac-cel-link:focus-visible {
        color: var(--sac-blue-700);
        text-decoration: underline;
    }

/* ------------------------------------------------------------ página de novidades */
.sac-nov-card {
    width: 100%;
    max-width: 780px;
}

.sac-nov-data {
    font-family: var(--sac-font-mono);
    font-size: 12px;
    color: var(--sac-slate-500);
}

.sac-nov-resumo {
    margin: 0 0 4px;
    font-size: 13.5px;
    color: var(--sac-slate-700);
}

.sac-nov-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

    .sac-nov-lista li {
        display: flex;
        align-items: baseline;
        gap: 10px;
        font-size: 13.5px;
        line-height: 1.5;
        color: var(--sac-ink);
    }

    /* O pill não encolhe nem quebra; o texto flui ao lado. */
    .sac-nov-lista li > :first-child {
        flex: none;
    }

/* barras de distribuição do dashboard viram links com o filtro de status aplicado */
a.sac-bar-link {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    padding: 4px 6px;
    margin: -4px -6px;
}

    a.sac-bar-link:hover,
    a.sac-bar-link:focus-visible {
        background: var(--sac-slate-50);
    }