/*
 * Design System v1 (Conceito A · "Workspace / Command Center") — fundação real do painel.
 *
 * Tradução do laboratório aprovado (public/ui-lab/lab.css, /ui-lab/a) para o painel Filament,
 * SEM depender dele: tokens --ds-* (equivalentes aos --ul-* do lab), shell (rail + coluna
 * contextual + topo), Home "Operação ISSOLUTEC" e a integração com o tema do Filament.
 * Documentação: docs/design/design-system-v1.md.
 *
 *   1. Tokens (claro/escuro)        4. Topo (topbar do Filament)      7. Integração Filament
 *   2. Shell: rail + coluna         5. Home: mapa, fila, pulso
 *   3. Responsivo                   6. Botões/utilitários do shell
 *
 * Dark = html.dark (convenção do Filament). Prefixo .ds- para não colidir com as classes fi-... do Filament e iss-... do painel.
 */

/* ───────────── 1. Tokens ───────────── */
:root {
    --ds-font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --ds-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    --ds-bg: #edf1f6;
    --ds-surface: #ffffff;
    --ds-surface-2: #f7f9fc;
    --ds-surface-3: #e8edf4;
    --ds-border: #dde4ed;
    --ds-border-2: #c3ccd9;
    --ds-ctl: #8798ae;           /* borda de controles: contraste ≥ 3:1 sobre o fundo */
    --ds-edge: #a6b4c8;
    --ds-text: #0e1a2b;
    --ds-text-2: #475670;
    --ds-text-3: #5b6b83;
    --ds-accent: #0a7f9f;
    --ds-accent-strong: #08657f;
    --ds-accent-soft: #e3f4f9;
    --ds-accent-ink: #ffffff;
    --ds-hover: rgba(10, 80, 120, .055);
    --ds-overlay: rgba(14, 26, 43, .38);
    --ds-shadow: 0 16px 44px rgba(20, 45, 80, .18), 0 2px 8px rgba(20, 45, 80, .08);
    --ds-panel-shadow: 0 1px 2px rgba(20, 45, 80, .06), 0 0 0 1px rgba(20, 45, 80, .02);
    --ds-ring: 0 0 0 3px rgba(10, 127, 159, .28);

    --ds-ok: #0c7a4f;    --ds-ok-bg: #e4f5ec;
    --ds-warn: #94600a;  --ds-warn-bg: #fdf1d8;
    --ds-bad: #b4233a;   --ds-bad-bg: #fde8eb;
    --ds-info: #1d5fc4;  --ds-info-bg: #e5eefc;
    --ds-mute: #5d6b82;  --ds-mute-bg: #eaeef4;

    --ds-radius: 6px;
    --ds-radius-lg: 10px;

    /* Dimensões do shell */
    --ds-rail-w: 56px;
    --ds-ctx-w: 244px;
    --ds-topbar-h: 48px;
    --ds-env-h: 0px;             /* vira 20px quando a faixa HOMOLOGAÇÃO está presente */
    --ds-ease: .16s ease;

    /* Camadas: abaixo dos modais/slide-overs do Filament (z-40), acima do conteúdo e do topo (z-30) */
    --ds-z-rail: 34;
    --ds-z-drawer: 60;
}

html.dark {
    --ds-bg: #0a101c;
    --ds-surface: #111a2a;
    --ds-surface-2: #0e1624;
    --ds-surface-3: #18233a;
    --ds-border: #1f2c44;
    --ds-border-2: #2c3c5a;
    --ds-ctl: #4a5f84;
    --ds-edge: #36496d;
    --ds-panel-shadow: none;
    --ds-text: #e8eef8;
    --ds-text-2: #a2b2ca;
    --ds-text-3: #7f92ae;
    --ds-accent: #3cc0e3;
    --ds-accent-strong: #7dd6ef;
    --ds-accent-soft: rgba(60, 192, 227, .13);
    --ds-accent-ink: #07202a;
    --ds-hover: rgba(255, 255, 255, .045);
    --ds-overlay: rgba(3, 7, 14, .62);
    --ds-shadow: 0 16px 48px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
    --ds-ring: 0 0 0 3px rgba(60, 192, 227, .32);

    --ds-ok: #4fd49c;   --ds-ok-bg: rgba(79, 212, 156, .12);
    --ds-warn: #f0b84f; --ds-warn-bg: rgba(240, 184, 79, .12);
    --ds-bad: #f77b8d;  --ds-bad-bg: rgba(247, 123, 141, .13);
    --ds-info: #7fb0ff; --ds-info-bg: rgba(127, 176, 255, .13);
    --ds-mute: #94a3bb; --ds-mute-bg: rgba(148, 163, 187, .12);
}

/* Faixa HOMOLOGAÇÃO presente → reserva a altura dela acima do rail/topo/conteúdo. */
body:has(> .ds-env) { --ds-env-h: 20px; }

/* ───────────── 2. Shell: rail + coluna contextual ───────────── */
.ds-shell { display: contents; }

/* O Filament continua dono do conteúdo: o shell é fixo e o body ganha o recuo correspondente. */
body.fi-body-has-topbar {
    padding-left: calc(var(--ds-rail-w) + var(--ds-ctx-w));
    padding-top: var(--ds-env-h);
    transition: padding-left var(--ds-ease);
}

html.iss-nav-collapsed body.fi-body-has-topbar { padding-left: var(--ds-rail-w); }

/* Notebook: recolhido por padrão enquanto não houver preferência explícita (html.iss-nav-expanded). */
@media (min-width: 821px) and (max-width: 1439px) {
    html:not(.iss-nav-expanded) body.fi-body-has-topbar { padding-left: var(--ds-rail-w); }
}

.ds-rail {
    position: fixed; top: var(--ds-env-h); bottom: 0; left: 0; width: var(--ds-rail-w); z-index: var(--ds-z-rail);
    background: var(--ds-surface-2); border-right: 1px solid var(--ds-border);
    display: flex; flex-direction: column; align-items: center; padding: .6rem 0; gap: .25rem;
    font-family: var(--ds-font);
}

.ds-logo { position: relative; width: 40px; height: 36px; display: grid; place-items: center; margin-bottom: .15rem; border-radius: 8px; }
.ds-logo-mark { width: 27px; height: 27px; display: block; background: url("../images/issolutec-logo-horizontal.png") left center / auto 100% no-repeat; }
html.dark .ds-logo-mark { background-image: url("../images/issolutec-logo-horizontal-white.png"); }

.ds-rail-nav { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.ds-sp { flex: 1; }

.ds-d {
    position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 9px;
    background: none; color: var(--ds-text-2); cursor: pointer; text-decoration: none;
}
.ds-d:hover { background: var(--ds-hover); color: var(--ds-text); }
.ds-d[aria-current="page"] { background: var(--ds-accent-soft); color: var(--ds-accent); }
.ds-d[aria-current="page"]::before { content: ""; position: absolute; left: -8px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ds-accent); }
.ds-d .ds-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-bad); border: 2px solid var(--ds-surface-2); }
.ds-d[aria-current="page"] .ds-dot { border-color: var(--ds-accent-soft); }

/* Tooltip no hover e no foco (data-tip) — o rótulo e o alerta ficam disponíveis a quem usa teclado. */
.ds-d::after, .ds-logo::after {
    content: attr(data-tip); position: absolute; left: 50px; top: 50%; transform: translateY(-50%);
    background: var(--ds-text); color: var(--ds-bg); font-size: 12px; font-weight: 500; line-height: 1.3;
    padding: .28rem .55rem; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none;
    transition: opacity .12s; z-index: 30; box-shadow: var(--ds-shadow);
}
.ds-d:hover::after, .ds-d:focus-visible::after, .ds-logo:hover::after, .ds-logo:focus-visible::after { opacity: 1; }
.ds-nav-toggle { color: var(--ds-text-3); }
.ds-nav-toggle-ico { transition: transform var(--ds-ease); }
html.iss-nav-collapsed .ds-nav-toggle-ico { transform: rotate(180deg); }
@media (min-width: 821px) and (max-width: 1439px) {
    html:not(.iss-nav-expanded) .ds-nav-toggle-ico { transform: rotate(180deg); }
}

.ds-rail :focus-visible, .ds-ctx :focus-visible, .ds-topbar-ctl:focus-visible, .ds-btn:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; border-radius: 6px; }

.ds-ico { width: 16px; height: 16px; flex: none; }
.ds-ico-lg { width: 20px; height: 20px; }

/* Coluna contextual (244 px) — recolhe por largura, com transição curta (160 ms). */
.ds-ctx {
    position: fixed; top: var(--ds-env-h); bottom: 0; left: var(--ds-rail-w); width: var(--ds-ctx-w); z-index: calc(var(--ds-z-rail) - 1);
    background: var(--ds-surface); border-right: 1px solid var(--ds-border); overflow: hidden;
    transition: width var(--ds-ease), visibility 0s linear 0s;
    font-family: var(--ds-font); font-size: 13px; line-height: 1.45; color: var(--ds-text);
}
.ds-ctx-in { width: var(--ds-ctx-w); height: 100%; overflow: auto; display: flex; flex-direction: column; }
html.iss-nav-collapsed .ds-ctx { width: 0; visibility: hidden; border-right-color: transparent; transition: width var(--ds-ease), visibility 0s linear var(--ds-ease); }
@media (min-width: 821px) and (max-width: 1439px) {
    html:not(.iss-nav-expanded) .ds-ctx { width: 0; visibility: hidden; border-right-color: transparent; transition: width var(--ds-ease), visibility 0s linear var(--ds-ease); }
}

.ds-ctx-h { padding: .9rem .75rem .5rem 1rem; display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.ds-ctx-t { min-width: 0; }
.ds-ctx-h h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ds-text); }
.ds-ctx-h p { margin: .15rem 0 0; font-size: 11.5px; color: var(--ds-text-3); }
.ds-ctx nav { display: flex; flex-direction: column; padding: .25rem .5rem 1rem; gap: 1px; }
.ds-grp { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ds-text-3); padding: .9rem .6rem .25rem; font-weight: 600; }
.ds-ctx nav a {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .6rem; min-height: 32px;
    border-radius: 6px; color: var(--ds-text-2); text-decoration: none;
}
.ds-ctx nav a:hover { background: var(--ds-hover); color: var(--ds-text); }
.ds-ctx nav a[aria-current="page"] { background: var(--ds-accent-soft); color: var(--ds-text); font-weight: 500; }
.ds-ctx nav a em { font-style: normal; font-size: 11px; color: var(--ds-text-3); font-variant-numeric: tabular-nums; }
.ds-ctx nav a em.ds-bad { color: var(--ds-bad); font-weight: 600; }
.ds-only-sm, .ds-nav-scrim, .ds-btn.ds-ctx-close, .ds-btn.ds-burger { display: none; }
/* O botão de recolher da coluna fica no rail; o recolher nativo do Filament não se aplica (navegação desligada). */
.fi-body .fi-topbar-collapse-sidebar-btn-ctn { display: none; }

/* ───────────── 3. Responsivo: tablet/mobile (≤ 820 px) — navegação sobreposta ───────────── */
@media (max-width: 820px) {
    body.fi-body-has-topbar { padding-left: 0; }
    .ds-rail { display: none; }
    .ds-ctx, html.iss-nav-collapsed .ds-ctx, html:not(.iss-nav-expanded) .ds-ctx {
        visibility: visible; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); z-index: var(--ds-z-drawer);
        transform: translateX(-102%); transition: transform .18s ease, visibility 0s linear .18s; visibility: hidden;
        box-shadow: var(--ds-shadow); border-right: 1px solid var(--ds-border-2);
    }
    .ds-ctx-in { width: 100%; }
    html.iss-nav-open .ds-ctx { transform: none; visibility: visible; transition: transform .18s ease; }
    .ds-only-sm { display: block; }
    .ds-btn.ds-ctx-collapse { display: none; }
    .ds-btn.ds-ctx-close, .ds-btn.ds-burger { display: inline-flex; }
    .ds-nav-scrim { display: block; position: fixed; inset: 0; z-index: calc(var(--ds-z-drawer) - 1); background: var(--ds-overlay); opacity: 0; pointer-events: none; transition: opacity .15s; }
    html.iss-nav-open .ds-nav-scrim { opacity: 1; pointer-events: auto; }
}

/* Skip link (primeiro foco da página) e utilitários de acessibilidade */
.ds-skip { position: fixed; left: .5rem; top: -3rem; z-index: 10000; background: var(--ds-accent); color: var(--ds-accent-ink); padding: .5rem .8rem; border-radius: 6px; font: 600 13px/1 var(--ds-font); text-decoration: none; }
.ds-skip:focus { top: calc(var(--ds-env-h) + .5rem); }
#ds-main:focus { outline: none; }
.ds-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────────── 4. Topo (nav.fi-topbar do Filament, no padrão do Conceito A) ───────────── */
.fi-body .fi-topbar-ctn { top: var(--ds-env-h); }
.fi-body .fi-topbar {
    min-height: var(--ds-topbar-h); padding-inline: 1rem; gap: .6rem;
    background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); box-shadow: none; --tw-ring-shadow: 0 0 #0000;
}
/* Breadcrumb + busca vivem em .fi-topbar-start (TOPBAR_LOGO_AFTER); a logo sai (o rail já tem a marca). */
.fi-body .fi-topbar-start { display: flex; flex: 1; min-width: 0; margin-inline-end: 0; gap: .6rem; align-items: center; }
.fi-body .fi-topbar-start > a { display: none; }

.ds-crumb { display: flex; align-items: center; gap: .4rem; color: var(--ds-text-3); min-width: 0; white-space: nowrap; font: 400 13px/1.45 var(--ds-font); }
.ds-crumb b { color: var(--ds-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ds-crumb-sep { color: var(--ds-text-3); }

/* Gatilho da busca global (command palette já existente): visual do Conceito A, centrado. */
.fi-body .fi-topbar-start .iss-global-search { flex: 0 1 380px; width: min(380px, 38vw); margin-inline: auto; min-width: 0; }
.fi-body .iss-global-search-trigger {
    width: 100%; height: 32px; padding: 0 .6rem; gap: .5rem; border: 1px solid var(--ds-ctl); border-radius: 8px;
    background: var(--ds-surface-2); color: var(--ds-text-3); font: 400 13px/1 var(--ds-font);
}
.fi-body .iss-global-search-trigger:hover, .fi-body .iss-global-search-trigger:focus-visible { border-color: var(--ds-accent); color: var(--ds-text); }
.fi-body .iss-global-search-trigger-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-body .iss-global-search-trigger-kbd, .fi-body .iss-global-search-esc {
    font: 500 10.5px var(--ds-mono); border: 1px solid var(--ds-border-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 .3rem; color: var(--ds-text-3); background: var(--ds-surface-2);
}
@media (max-width: 820px) {
    /* Telas estreitas: o breadcrumb ocupa o espaço e a busca vira só o ícone (a paleta abre igual). */
    .ds-crumb { flex: 1; overflow: hidden; }
    .ds-crumb b, .ds-crumb span { overflow: hidden; text-overflow: ellipsis; }
    .fi-body .fi-topbar-start .iss-global-search { flex: none; width: auto; margin-inline: 0; }
    .fi-body .iss-global-search-trigger { width: 32px; padding: 0; justify-content: center; }
}
/* Paleta aberta: mesmos tokens do Conceito A */
.iss-global-search-panel { background: var(--ds-surface) !important; border-color: var(--ds-border-2) !important; box-shadow: var(--ds-shadow) !important; border-radius: 12px !important; font-family: var(--ds-font); }
.iss-global-search-overlay { background: var(--ds-overlay) !important; }

/* ───────────── 5. Home "Operação ISSOLUTEC" (mapa operacional, Minha fila, Pulso) ───────────── */
.ds-ws { container: ds / inline-size; display: flex; flex-direction: column; gap: .75rem; min-width: 0; font-family: var(--ds-font); font-size: 13px; line-height: 1.45; color: var(--ds-text); }
.ds-ws-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ds-ws-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--ds-text); }
.ds-ws-sub { color: var(--ds-text-3); font-size: 12.5px; margin-top: .1rem; }
.ds-ws-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ds-ws a { color: inherit; text-decoration: none; }

.ds-panel { background: var(--ds-surface); border: 1px solid var(--ds-border); box-shadow: var(--ds-panel-shadow); border-radius: var(--ds-radius-lg); min-width: 0; overflow: hidden; }
.ds-pad { padding: .25rem .9rem .5rem; }
.ds-card-t { display: flex; justify-content: space-between; align-items: baseline; padding: .65rem .9rem; border-bottom: 1px solid var(--ds-border); font-weight: 600; }
.ds-card-t span { font-weight: 400; color: var(--ds-text-3); font-size: 12px; }

.ds-home { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.ds-home-main, .ds-home-side { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.ds-map-panel { padding: 1rem .5rem; }

/* A Home usa a densidade do Conceito A (corpo com 1,1rem/1,5rem), não o respiro padrão das páginas do Filament. */
.fi-body .fi-main:has(.ds-ws) { padding-inline: 1.5rem; }
.fi-body .fi-page-header-main-ctn:has(.ds-ws) { padding-block: 1.1rem 1.5rem; row-gap: 0; }
@media (max-width: 820px) { .fi-body .fi-main:has(.ds-ws) { padding-inline: .75rem; } .fi-body .fi-page-header-main-ctn:has(.ds-ws) { padding-block: .75rem 1.25rem; } }

/* Mapa: nós + linhas estáticas (sem movimento, sem glow) */
.ds-map { --node-w: 176px; position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 360px; max-height: 620px; }
.ds-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ds-edge { stroke: var(--ds-edge); stroke-width: 1.2; fill: none; vector-effect: non-scaling-stroke; }
.ds-edge.hot { stroke: var(--ds-bad); opacity: .8; stroke-dasharray: 4 4; }
.ds-edge.warm { stroke: var(--ds-warn); opacity: .85; stroke-dasharray: 4 4; }
.ds-edge-l { position: absolute; transform: translate(-50%, -50%); font-size: 10.5px; color: var(--ds-text-3); background: var(--ds-surface); padding: 0 .35rem; letter-spacing: .02em; white-space: nowrap; cursor: help; z-index: 1; }
.ds-node {
    position: absolute; transform: translate(-50%, -50%); width: var(--node-w); background: var(--ds-surface); border: 1px solid var(--ds-border-2);
    border-radius: var(--ds-radius-lg); padding: .6rem .7rem; display: flex; flex-direction: column; gap: .3rem; transition: border-color .12s, box-shadow .12s;
}
.ds-node:hover, .ds-node:focus-within { border-color: var(--ds-accent); box-shadow: 0 0 0 1px var(--ds-accent), var(--ds-shadow); z-index: 3; }
.ds-node-t { display: flex; align-items: center; gap: .45rem; font-weight: 600; font-size: 13.5px; }
.ds-node-t .ds-ico { color: var(--ds-accent); }
.ds-node-t a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* o nó inteiro é clicável; o nome é o link */
.ds-node-t a:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; border-radius: 4px; }
.ds-node-s { display: flex; flex-direction: column; gap: .15rem; font-size: 12px; padding-top: .3rem; border-top: 1px solid var(--ds-border); }
.ds-node-s span { display: flex; gap: .35rem; align-items: baseline; }
.ds-node-s b { font-variant-numeric: tabular-nums; font-weight: 600; }
.ds-node.alert::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--ds-bad); border: 2px solid var(--ds-bg); }
.ds-t-bad { color: var(--ds-bad); } .ds-t-warn { color: var(--ds-warn); } .ds-t-ok { color: var(--ds-ok); } .ds-t-n { color: var(--ds-text-2); }
.ds-node-s .ds-t-n:not(b) { color: var(--ds-text-3); }

/* Configurações: infraestrutura, fora do mapa */
.ds-infra { display: flex; align-items: center; gap: 1rem; padding: .6rem .9rem; border: 1px dashed var(--ds-border-2); border-radius: var(--ds-radius-lg); color: var(--ds-text-2); flex-wrap: wrap; }
.ds-infra:hover { border-color: var(--ds-accent); color: var(--ds-text); }
.ds-infra b { color: var(--ds-text); }
.ds-spacer { flex: 1; }

/* Minha fila / Pulso */
.ds-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-feed li { display: flex; gap: .65rem; padding: .55rem 0; border-bottom: 1px solid var(--ds-border); }
.ds-feed li:last-child { border-bottom: 0; }
.ds-feed i { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--ds-mute); flex: none; }
.ds-feed .ok i { background: var(--ds-ok); } .ds-feed .warn i { background: var(--ds-warn); } .ds-feed .bad i { background: var(--ds-bad); }
.ds-feed small { color: var(--ds-text-3); display: block; }
.ds-feed a:hover { color: var(--ds-accent); }
.ds-feed-empty { color: var(--ds-text-3); }

/* Landing de domínio (?section=module): indicadores + lista de áreas */
.ds-kpis { display: flex; flex-wrap: wrap; border: 1px solid var(--ds-border); box-shadow: var(--ds-panel-shadow); background: var(--ds-surface); border-radius: var(--ds-radius-lg); overflow: hidden; }
.ds-kpi { flex: 1 1 160px; padding: .7rem 1rem; border-right: 1px solid var(--ds-border); }
.ds-kpi:last-child { border-right: 0; }
.ds-kpi-l { display: flex; align-items: center; gap: .4rem; color: var(--ds-text-2); font-size: 12px; }
.ds-kpi-l i { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-mute); }
.ds-kpi-l.ds-t-bad i { background: var(--ds-bad); } .ds-kpi-l.ds-t-warn i { background: var(--ds-warn); }
.ds-kpi-l span { color: var(--ds-text-2); }
.ds-kpi-v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: .1rem; }
.ds-section-label { margin: .4rem 0 -.25rem; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ds-text-3); font-weight: 600; }
.ds-areas a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .9rem; border-bottom: 1px solid var(--ds-border); }
.ds-areas a:last-child { border-bottom: 0; }
.ds-areas a:hover { background: var(--ds-hover); }
.ds-areas .ds-ico { color: var(--ds-text-3); }
.ds-cell-main { display: block; font-weight: 500; color: var(--ds-text); }
.ds-cell-sub { display: block; font-size: 12px; color: var(--ds-text-3); }
.ds-ws :focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; border-radius: 4px; }

/* A coluna do conteúdo muda com a navegação expandida/recolhida: o layout reage à largura do
   workspace (container query), não à da janela. */
@container ds (max-width: 940px) {
    .ds-home { grid-template-columns: minmax(0, 1fr); }
    .ds-map { min-height: 520px; }
}
@media (max-width: 820px) {
    .ds-ws-actions .ds-btn { height: 32px; }
    /* Mapa vira lista de cartões empilhados (sem linhas, que perdem sentido sem posição). */
    .ds-map { aspect-ratio: auto; height: auto; min-height: 0; max-height: none; display: grid; gap: .6rem; }
    .ds-map > svg, .ds-edge-l { display: none; }
    .ds-node { position: static; transform: none; width: auto; }
    .ds-infra-more { display: none; }
}

/* ───────────── 6. Botões e utilitários do shell ───────────── */
.ds-btn {
    display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .75rem; border: 1px solid var(--ds-ctl); border-radius: var(--ds-radius);
    background: var(--ds-surface); color: var(--ds-text); font: 500 13px/1 var(--ds-font); cursor: pointer; text-decoration: none;
}
.ds-btn:hover { background: var(--ds-surface-3); }
.ds-btn-ghost { border-color: transparent; background: transparent; color: var(--ds-text-2); }
.ds-btn-ghost:hover { background: var(--ds-hover); color: var(--ds-text); }
.ds-btn-sm { height: 28px; padding: 0 .5rem; font-size: 12px; }
.ds-btn-icon { width: 32px; padding: 0; justify-content: center; }
.ds-btn-sm.ds-btn-icon { width: 28px; }
.ds-kbd { font: 500 10.5px var(--ds-mono); border: 1px solid var(--ds-border-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 .3rem; color: var(--ds-text-3); background: var(--ds-surface-2); }

/* Faixa HOMOLOGAÇÃO: acima de tudo (inclusive do rail e das camadas do Filament), inconfundível. */
.ds-env {
    position: fixed; top: 0; left: 0; right: 0; height: 20px; z-index: 9999; display: grid; place-items: center;
    background: #f59e0b; color: #1c1917; font: 700 11px/1 var(--ds-font); letter-spacing: .12em; pointer-events: none;
}

/* ───────────── 7. Integração com o Filament (tokens → tema do painel) ───────────── */
body.fi-body { background: var(--ds-bg); color: var(--ds-text); }
html:not(.dark) body.fi-body, html:not(.dark) .fi-layout, html:not(.dark) .fi-main, html:not(.dark) .fi-page, html:not(.dark) .fi-page-content { background: var(--ds-bg) !important; }

/* Movimento reduzido: sem transições nem animações do shell */
@media (prefers-reduced-motion: reduce) {
    .ds-rail *, .ds-ctx, .ds-ctx *, .ds-nav-scrim, .ds-node, body.fi-body-has-topbar { transition: none !important; animation: none !important; }
}

/* ───────────── 8. Workspace de listagem + slide-over de detalhe (Empresas, Usuários, Implantações, Produtos…) ─────────────
   Escopo `.ds-workspace`: classe adicionada ao wrapper da página por `App\Support\Filament\Workspace\ListaWorkspace`.
   Resources só entram no padrão ao usar essa trait — ver docs/design/design-system-v1.md. */
.ds-workspace .fi-page-header-main-ctn { row-gap: .75rem; padding-block: 1.1rem 1.5rem; }
.ds-workspace .fi-main { padding-inline: 1.5rem; }
.ds-workspace .fi-header:empty { display: none; }
@media (max-width: 820px) { .ds-workspace .fi-main { padding-inline: .75rem; } }

/* Tabela: densidade operacional, cabeçalho discreto, hover claro (continua sendo uma tabela). */
.ds-workspace .fi-ta-ctn { border-radius: var(--ds-radius-lg); box-shadow: var(--ds-panel-shadow); font-size: 13px; }
.ds-workspace .fi-ta-header-cell { padding-block: .5rem; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ds-text-3); background: var(--ds-surface-2); }
.ds-workspace .fi-ta-header-cell .fi-ta-header-cell-label { font-size: 11px; }
.ds-workspace .fi-ta-cell { padding-block: 0; }
.ds-workspace .fi-ta-text { padding-block: .45rem; }
.ds-workspace .fi-ta-row { cursor: pointer; transition: background var(--ds-ease); }
.ds-workspace .fi-ta-row:hover { background: var(--ds-hover); }
.ds-workspace .fi-ta-row .fi-ta-text-item-label { color: var(--ds-text); }
.ds-workspace .fi-ta-text-description { color: var(--ds-text-3); font-size: 12px; }
.ds-workspace .fi-badge { font-size: 11.5px; font-weight: 500; }
/* Barra de filtros + busca = UMA superfície (o header da tabela), em linha única no desktop:
   [Filtros · Limpar] [Situação][Financeiro][Servidor] ........ [Busca][colunas]. O Filament empilha
   três blocos (filtros em grade parcial + toolbar), o que deixava o quadro dos filtros terminando no meio
   da largura enquanto a busca seguia à direita. Aqui os blocos viram filhos de um flex com fundo/borda só no pai. */
.ds-workspace .fi-ta-header-ctn { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .9rem; margin-top: 0; padding: .6rem .85rem; background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); }
.ds-workspace .fi-ta-header-ctn > * { padding: 0; border: 0; background: transparent; box-shadow: none; }
.ds-workspace .fi-ta-filters-above-content-ctn { display: block; flex: 1 1 24rem; min-width: 0; }
.ds-workspace .fi-ta-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .9rem; }
.ds-workspace .fi-ta-filters-header { gap: .65rem; align-items: center; align-self: center; padding-top: 1rem; }
.ds-workspace .fi-ta-filters-heading { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ds-text-3); }
.ds-workspace .fi-ta-filters-header .fi-link { font-size: 12px; }
.ds-workspace .fi-ta-filters > .fi-sc { display: flex; flex-wrap: wrap; gap: .5rem .75rem; flex: 1 1 auto; min-width: 0; }
.ds-workspace .fi-ta-filters > .fi-sc > .fi-grid-col { grid-column: auto; flex: 0 1 11.5rem; min-width: 9rem; }
.ds-workspace .fi-ta-filters .fi-fo-field-label { font-size: 11px; color: var(--ds-text-3); }
.ds-workspace .fi-ta-header-toolbar { flex: 0 1 auto; margin-inline-start: auto; justify-content: flex-end; }
@media (max-width: 640px) {
    .ds-workspace .fi-ta-filters > .fi-sc > .fi-grid-col { flex: 1 1 9rem; }
    .ds-workspace .fi-ta-header-toolbar { flex: 1 1 100%; margin-inline-start: 0; }
}

/* Slide-over: cabeçalho e rodapé compactos; a largura vem do Filament (xl ≈ 576 px; 4xl ≈ 896 px; 100% no mobile). */
.ds-workspace .fi-modal-slide-over .fi-modal-window { background: var(--ds-surface); }
.ds-workspace .fi-modal-slide-over .fi-modal-window .fi-modal-heading { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.ds-workspace .fi-modal-slide-over .fi-modal-window .fi-modal-description { font-size: 12.5px; color: var(--ds-text-3); }
.ds-workspace .fi-modal-slide-over .fi-modal-window .fi-modal-footer { border-top: 1px solid var(--ds-border); flex-wrap: wrap; gap: .5rem; }
.ds-workspace .fi-modal-slide-over .fi-modal-window .fi-sc-tabs .fi-tabs { overflow-x: auto; max-width: 100%; }
.ds-workspace .fi-modal-slide-over .fi-modal-window .fi-in-entry-label { font-size: 11.5px; color: var(--ds-text-3); }
@media (max-width: 640px) { .ds-workspace .fi-modal-slide-over .fi-modal-window { max-width: 100vw; width: 100vw; } }

/* Coluna "Ações": o Filament fixa o cabeçalho à direita; o das colunas de dados leva a classe `fi-ta-header-cell-<nome>`, o de ações não. */
.ds-workspace .fi-ta-header-cell.fi-align-end:not([class*="fi-ta-header-cell-"]) { text-align: center; }

/* Action registrada só para ser montada por outra action (troca de slide-over); sem botão visível. */
.ds-action-registered { display: none !important; }

/* ───────────── 9. Responsividade e estados do workspace (desktop → notebook → tablet → mobile) ─────────────
   Só tokens `--ds-*` (valem em claro e escuro). Sem overflow horizontal global: o conteúdo largo (tabelas
   densas) rola dentro do próprio contêiner. */
.ds-workspace .fi-main, .ds-workspace .fi-page, .ds-workspace .fi-page-content { min-width: 0; max-width: 100%; }
.ds-workspace .fi-ta-content { overflow-x: auto; }
.ds-workspace .fi-ta-content-ctn { min-width: 0; }
.ds-workspace .fi-header-actions-ctn { flex-wrap: wrap; }

/* Foco visível e alvo de clique confortável nas ações e linhas da tabela. */
.ds-workspace .fi-ta-row:focus-within { background: var(--ds-hover); }
.ds-workspace .fi-ta-actions .fi-icon-btn, .ds-workspace .fi-ta-actions .fi-btn { min-height: 32px; min-width: 32px; }
.ds-workspace .fi-ta-row .fi-icon-btn:focus-visible, .ds-workspace .fi-ta-row .fi-btn:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }

/* Páginas dedicadas (Criar/Editar/Ver): abas e relation managers rolam em vez de estourar a página. */
.ds-workspace .fi-sc-tabs .fi-tabs { overflow-x: auto; max-width: 100%; }
.ds-workspace .fi-sc-tabs .fi-tabs-item { white-space: nowrap; }

/* Notebook: respiro lateral um pouco menor para ganhar colunas na tabela. */
@media (min-width: 821px) and (max-width: 1280px) {
    .ds-workspace .fi-main { padding-inline: 1rem; }
    .ds-kpi { padding: .6rem .8rem; }
}

/* Tablet/mobile: indicadores em 2 por linha, formulários em 1 coluna, rodapé do slide-over empilhado. */
@media (max-width: 820px) {
    .ds-ws-head { align-items: flex-start; }
    .ds-ws-actions { width: 100%; }
}
@media (max-width: 640px) {
    .ds-kpi { flex: 1 1 calc(50% - 1px); border-bottom: 1px solid var(--ds-border); }
    .ds-workspace .fi-modal-slide-over .fi-modal-window .fi-sc.fi-grid, .ds-workspace .fi-modal-slide-over .fi-modal-window .fi-fo-field-wrp-has-inline-label { grid-template-columns: minmax(0, 1fr); }
    .ds-workspace .fi-modal-slide-over .fi-modal-window .fi-grid-col { grid-column: 1 / -1; }
    .ds-workspace .fi-modal-slide-over .fi-modal-window .fi-modal-footer-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .ds-workspace .fi-ta-header-ctn { padding: .5rem .6rem; }
}

/* ───────────── 10. Barra de filtros compacta (rodada corretiva) ─────────────
   Desktop/notebook: [Filtros · Limpar] [filtro][filtro]… ao lado da busca, em UMA composição; os controles
   dividem a largura disponível (crescem até um teto) em vez de empilhar. Largura menor (container query do
   próprio cabeçalho da tabela): filtros numa linha cheia e a busca abaixo, à direita. */
.ds-workspace .fi-ta-header-ctn { container: dsf / inline-size; }
.ds-workspace .fi-ta-filters-above-content-ctn { flex: 1 1 28rem; }
.ds-workspace .fi-ta-filters { width: 100%; }
.ds-workspace .fi-ta-filters > .fi-sc > .fi-grid-col { flex: 1 1 9.5rem; max-width: 14rem; min-width: 8.5rem; }
.ds-workspace .fi-ta-filters > .fi-sc > .fi-grid-col .fi-input-wrp, .ds-workspace .fi-ta-filters > .fi-sc > .fi-grid-col .fi-select-input { width: 100%; }
/* Filtro de caixa de seleção ("Minhas…"): alinhado à linha dos demais controles, sem rótulo empilhado. */
.ds-workspace .fi-ta-filters > .fi-sc > .fi-grid-col:has(> .fi-sc-component > div > .fi-fo-field-wrp-has-inline-label),
.ds-workspace .fi-ta-filters > .fi-sc > .fi-grid-col:has(.fi-fo-checkbox), .ds-workspace .fi-ta-filters > .fi-sc > .fi-grid-col:has(.fi-checkbox-input) { flex: 0 0 auto; max-width: none; align-self: flex-end; padding-bottom: .4rem; }
.ds-workspace .fi-ta-header-toolbar { flex: 0 1 17rem; }
@container dsf (max-width: 920px) {
    .ds-workspace .fi-ta-filters-above-content-ctn { flex: 1 1 100%; }
    .ds-workspace .fi-ta-header-toolbar { flex: 1 1 100%; margin-inline-start: 0; }
}
/* Filtro composto (ex.: período "De"/"Até"): o grid aninhado vira linha, lado a lado, e a coluna cresce em dobro. */
.ds-workspace .fi-ta-filters > .fi-sc > .fi-grid-col:has(.fi-sc.fi-grid > .fi-grid-col ~ .fi-grid-col) { flex: 2 1 19.5rem; max-width: 28rem; min-width: 17rem; }
.ds-workspace .fi-ta-filters > .fi-sc > .fi-grid-col .fi-sc.fi-grid { display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
.ds-workspace .fi-ta-filters > .fi-sc > .fi-grid-col .fi-sc.fi-grid > .fi-grid-col { grid-column: auto; flex: 1 1 8.5rem; min-width: 8rem; }
/* Cabeçalho "Filtros · Limpar" à esquerda e os controles na MESMA linha (a grade ocupa o resto). */
.ds-workspace .fi-ta-filters { flex-wrap: nowrap; }
.ds-workspace .fi-ta-filters > .fi-sc { flex: 1 1 0; }
.ds-workspace .fi-ta-filters > .fi-sc > .fi-grid-col { flex: 1 1 8rem; min-width: 7.5rem; }
.ds-workspace .fi-ta-filters > .fi-sc > .fi-grid-col:has(.fi-sc.fi-grid > .fi-grid-col ~ .fi-grid-col) { flex: 2 1 15rem; min-width: 15rem; }
.ds-workspace .fi-ta-header-toolbar { flex: 0 1 15rem; }
@container dsf (max-width: 1060px) {
    .ds-workspace .fi-ta-filters-above-content-ctn { flex: 1 1 100%; }
    .ds-workspace .fi-ta-header-toolbar { flex: 1 1 100%; margin-inline-start: 0; }
}
@container dsf (max-width: 720px) {
    .ds-workspace .fi-ta-filters { flex-wrap: wrap; }
    .ds-workspace .fi-ta-filters > .fi-sc { flex: 1 1 100%; }
}
.ds-workspace .fi-ta-filters > .fi-sc > .fi-grid-col:has(.fi-sc.fi-grid > .fi-grid-col ~ .fi-grid-col) { flex: 2 1 18rem; min-width: 18rem; }
.ds-workspace .fi-ta-filters > .fi-sc > .fi-grid-col .fi-sc.fi-grid { flex-wrap: nowrap; }
.ds-workspace .fi-ta-filters > .fi-sc > .fi-grid-col .fi-sc.fi-grid > .fi-grid-col { min-width: 0; }
.ds-workspace .fi-ta-filters > .fi-sc { gap: .5rem; }
.ds-workspace .fi-ta-filters > .fi-sc > .fi-grid-col { flex: 1 1 7.5rem; min-width: 7rem; }
.ds-workspace .fi-ta-filters > .fi-sc > .fi-grid-col:has(.fi-sc.fi-grid > .fi-grid-col ~ .fi-grid-col) { flex: 2 1 17rem; min-width: 17rem; }
.ds-workspace .fi-ta-header-toolbar { flex: 0 1 13.5rem; }

/* Relatórios (workspace de relatório): filtros em grade única, indicadores compactos e resultado em tabela. */
.ds-workspace.iss-relatorios-page .fi-sc-actions, .ds-workspace .iss-relatorios-page .fi-sc-actions { align-self: end; }
.ds-rel-tabela { margin-top: .75rem; }
.ds-kpis .ds-kpi { flex-basis: 125px; }

/* ───────────── 11. Cobrança por empresa (workspace próprio) e primitivos de leitura ───────────── */
.ds-cob-v { font-size: 15px; line-height: 1.3; word-break: break-word; }
.ds-cob-grid { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: .75rem; align-items: start; }
.ds-cob-main, .ds-cob-side { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
@container ds (max-width: 980px) { .ds-cob-grid { grid-template-columns: minmax(0, 1fr); } }
.ds-card-t > span:first-child { color: var(--ds-text); }
.ds-tbl-wrap { overflow-x: auto; }
.ds-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ds-tbl th { padding: .5rem .9rem; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ds-text-3); background: var(--ds-surface-2); border-bottom: 1px solid var(--ds-border); white-space: nowrap; }
.ds-tbl td { padding: .5rem .9rem; border-bottom: 1px solid var(--ds-border); color: var(--ds-text); }
.ds-tbl tbody tr:last-child td { border-bottom: 0; }
.ds-tbl tbody tr:hover { background: var(--ds-hover); }
.ds-tbl .ds-num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-tbl .ds-empty { color: var(--ds-text-3); text-align: center; padding-block: 1rem; }
.ds-link { color: var(--ds-accent); text-decoration: underline; }
.ds-dl { margin: 0; display: flex; flex-direction: column; gap: .6rem; padding-block: .7rem; }
.ds-dl dt { font-size: 11.5px; color: var(--ds-text-3); }
.ds-dl dd { margin: .1rem 0 0; color: var(--ds-text); }
.ds-envio { flex: 1; min-width: 0; }
.ds-feed li { align-items: flex-start; }

/* Páginas dedicadas (cabeçalho nativo do Filament) no mesmo tom compacto do workspace. */
.ds-workspace .fi-header-heading { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.ds-workspace .fi-header .fi-breadcrumbs { font-size: 12.5px; }
.ds-workspace .fi-header-subheading { font-size: 12.5px; }

/* ───────────── 12. Linhas do tempo de leitura (conversa e eventos de chamado no drawer) ───────────── */
.ds-timeline-wrap { display: flex; flex-direction: column; gap: .5rem; }
.ds-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.ds-tl-item { border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-surface); padding: .55rem .75rem; }
.ds-tl-item.is-private { background: var(--ds-warn-bg); border-color: var(--ds-warn, var(--ds-border-2)); }
.ds-tl-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; font-size: 12px; color: var(--ds-text-3); }
.ds-tl-meta strong { color: var(--ds-text); font-weight: 600; font-size: 13px; }
.ds-tl-meta time { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.ds-tl-privado { color: var(--ds-warn); font-weight: 600; }
.ds-tl-texto { margin-top: .25rem; white-space: pre-wrap; word-break: break-word; color: var(--ds-text); font-size: 13px; }
.ds-tl-obs { color: var(--ds-text-2); }
.ds-tl-mais { margin: .25rem 0 0; font-size: 12px; color: var(--ds-text-3); }
.ds-section-label { margin: .25rem 0 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ds-text-3); font-weight: 600; }

/* Coluna "Ações" sempre visível: em tabelas largas ela fica fixa à direita enquanto o resto rola. */
.ds-workspace .fi-ta-table .fi-ta-cell:last-child:has(> .fi-ta-actions),
.ds-workspace .fi-ta-header-cell.fi-align-end:not([class*="fi-ta-header-cell-"]):last-child { position: sticky; inset-inline-end: 0; z-index: 2; background: var(--ds-surface); box-shadow: -1px 0 0 var(--ds-border); }
.ds-workspace .fi-ta-header-cell.fi-align-end:not([class*="fi-ta-header-cell-"]):last-child { background: var(--ds-surface-2); }
/* O hover da linha usa um tom TRANSLÚCIDO; na célula fixa ele deixava a célula vizinha (ex.: "Criado em"), que rola por baixo, aparecer através dela.
   Camada de hover sobre a superfície OPACA: mesmo visual, sem transparência. */
.ds-workspace .fi-ta-row:hover .fi-ta-cell:last-child:has(> .fi-ta-actions) { background: linear-gradient(var(--ds-hover), var(--ds-hover)), var(--ds-surface); }

/* Indicadores clicáveis de Chamados (atalhos de filtro rápido) na mesma faixa compacta do `.ds-kpis`. */
.ds-workspace .iss-internal-stats { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--ds-border); box-shadow: var(--ds-panel-shadow); background: var(--ds-surface); border-radius: var(--ds-radius-lg); overflow: hidden; }
.ds-workspace .iss-internal-stat-card { flex: 1 1 125px; min-width: 0; border: 0; border-right: 1px solid var(--ds-border); border-radius: 0; box-shadow: none; background: transparent; padding: .6rem 1rem; text-align: left; }
.ds-workspace .iss-internal-stat-card:last-child { border-right: 0; }
.ds-workspace .iss-internal-stat-card--clickable:hover { background: var(--ds-hover); }
.ds-workspace .iss-internal-stat-card--active { background: var(--ds-accent-soft); box-shadow: inset 0 -2px 0 var(--ds-accent); }
.ds-workspace .iss-internal-stat-head { font-size: 12px; gap: .4rem; }
.ds-workspace .iss-internal-stat-icon { width: 14px; height: 14px; }
.ds-workspace .iss-internal-stat-value { font-size: 20px; font-weight: 600; line-height: 1.2; margin-top: .1rem; font-variant-numeric: tabular-nums; }
.ds-workspace .iss-internal-stat-caption { font-size: 11.5px; margin-top: 0; }

/* ───────────── 13. Páginas dedicadas de documento comercial (Contrato e Aditivo) ───────────── */
.ds-workspace .ds-doc-resumo { margin-bottom: .25rem; }
.ds-workspace .fi-header .fi-header-actions-ctn { flex-wrap: wrap; justify-content: flex-end; }

/* Fluxo de assinatura (Contrato e Aditivo): lista compacta de participantes com estado. */
.ds-sig { display: flex; flex-direction: column; gap: .5rem; }
.ds-sig-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.ds-sig-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.ds-sig-item { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-surface); }
.ds-sig-ico { width: 20px; height: 20px; flex: none; color: var(--ds-text-3); }
.ds-sig-success .ds-sig-ico { color: var(--ds-ok); }
.ds-sig-warning .ds-sig-ico { color: var(--ds-warn); }
.ds-sig-main { flex: 1; min-width: 0; }
.ds-sig-nome { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ds-sig-nome strong { font-weight: 600; color: var(--ds-text); }
.ds-sig-sub { font-size: 12px; color: var(--ds-text-3); margin-top: .1rem; }

/* Prévia de documento (ex.: Anexo I): tabelas do documento no tom do DS, sem as bordas "de planilha" do HTML legado. */
.ds-doc-preview { overflow-x: auto; font-size: 13px; color: var(--ds-text); }
.ds-doc-preview table { width: 100%; border-collapse: collapse; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); }
.ds-doc-preview td, .ds-doc-preview th { padding: .6rem .8rem; border: 1px solid var(--ds-border); vertical-align: top; line-height: 1.5; }
.ds-doc-preview th { background: var(--ds-surface-2); text-align: left; font-weight: 600; }

/* Rodapé de formulário em página dedicada: o MESMO padrão do rodapé dos drawers (`.fi-modal-footer`: superfície, borda
   superior, mesmos espaçamentos), fixo na base para formulários longos. */
.ds-workspace .fi-sc-actions.fi-sticky { min-height: 4.5rem; }
.ds-workspace .fi-sc-actions.fi-sticky .fi-ac { background: var(--ds-surface); border: 0; border-top: 1px solid var(--ds-border); border-radius: 0; box-shadow: none; padding: 1.25rem 1.5rem; bottom: 0; gap: .5rem; z-index: 20; }