/* ==================================================================== */
/* app.css — a folha ÚNICA do Partner Suporte Web                        */
/*                                                                       */
/* O visual é o das telas OPERADAS do Partner Hub (decisão 29: só o       */
/* conceito visual, nenhum arquivo referenciado). Os tokens de cor, a     */
/* coluna, o cabeçalho de página, a régua de indicadores, os cartões de   */
/* medida, os selos, a tabela, o diálogo e os painéis de estado foram     */
/* copiados do painel.css/hub.css/Situacao.razor.css do Hub, com os       */
/* MESMOS nomes — quem conhece uma tela do Hub lê esta folha sem mapa.    */
/*                                                                       */
/* O que NÃO veio: carrossel, painel-sem-scroll, min-width da TV — tudo   */
/* isso é de painel de parede, e aqui ninguém olha de três metros.        */
/*                                                                       */
/* box-sizing É global aqui. No Hub não é, por herança das telas antigas; */
/* este projeto nasceu agora e não carrega essa dívida.                   */
/*                                                                       */
/* Sergio - 14/09/2026                                                   */
/* ==================================================================== */

/* ==================================================================== */
/* Tokens — claro (padrão) e escuro (html.dark-theme)                    */
/* ==================================================================== */
:root {
    /* As três cores da marca Partner, lidas das faces claras dos cubos do
       Partner.png. NÃO mudam com o tema: são identidade, não superfície. */
    --partner-ambar: #F9B548;
    --partner-azul: #3AA2EB;
    --partner-rubro: #EF6A6A;

    --bg-page: #E9EDF3;
    --bg-header: #2A3F54;
    --bg-table: #ffffff;
    --bg-table-caption: #344F69;
    --bg-table-thead: #3D5C7C;
    --text-primary: #2A3F54;
    --text-secondary: rgba(42, 63, 84, 0.68);
    --text-muted: rgba(42, 63, 84, 0.48);
    --text-rotulo: rgba(42, 63, 84, 0.6);
    --border-col: rgba(42, 63, 84, 0.16);
    --border-table: #D6DDE6;
    --shadow-card: rgba(23, 42, 63, 0.10);
    --shadow-card-hover: rgba(23, 42, 63, 0.18);
    --shadow-table: rgba(23, 42, 63, 0.12);
    --hover-table-row: rgba(58, 162, 235, 0.10);
    --dias-neutro-bg: rgba(42, 63, 84, 0.15);

    /* Realce de estado. Tons ESCUROS no claro, calibrados para texto pequeno. */
    --meta-sucesso-texto: #0A7A3D;
    --meta-sucesso-bg: rgba(10, 122, 61, 0.12);
    --meta-progresso-texto: #B45309;
    --meta-progresso-bg: rgba(180, 83, 9, 0.12);

    --scrollbar-track: #DDE3EB;
    --scrollbar-thumb: #8FA4BB;
    --scrollbar-thumb-hover: #2A3F54;
    --scrollbar-thumb-active: #1F2F3F;

    /* Superfície dos cartões e dos recados. */
    --vitrine-card-bg: #FFFFFF;
    --vitrine-card-border: rgba(42, 63, 84, 0.14);
    --vitrine-accent: #0070C0;

    --espaco-listagem: 10px;

    --vazio-circulo: rgba(11, 107, 214, 0.10);
    --vazio-icone: #0B6BD6;

    --desatualizado-bg: #FDEBEC;
    --desatualizado-borda: #E9A3A8;
    --desatualizado-acento: #C62828;
    --desatualizado-ico-texto: #FFFFFF;
    --desatualizado-titulo: #8E1B1B;
    --desatualizado-detalhe: #A24545;

    /* Superfície intermediária: mais escura que o card, mais clara que o
       fundo. Ladrilho de ícone, selo neutro, item de menu em repouso.  */
    --hub-superficie-2: #DFE5EE;
    --hub-coluna-largura: 228px;

    /* Anel de foco: o azul é a única cor da marca sem outro sentido nas
       telas (âmbar = aviso, rubro = erro nos selos).                     */
    --hub-foco: var(--partner-azul);
}

html.dark-theme {
    --bg-page: #121D29;
    --bg-header: #1B2E42;
    --bg-table: #1a2535;
    --bg-table-caption: #1e3a52;
    --bg-table-thead: #243d5a;
    --text-primary: #cdd9e5;
    --text-secondary: rgba(205, 217, 229, 0.7);
    --text-muted: rgba(205, 217, 229, 0.4);
    --text-rotulo: rgba(205, 217, 229, 0.55);
    --border-col: rgba(255, 255, 255, 0.08);
    --border-table: rgba(255, 255, 255, 0.08);
    --shadow-card: rgba(0, 0, 0, 0.4);
    --shadow-card-hover: rgba(0, 0, 0, 0.5);
    --shadow-table: rgba(0, 0, 0, 0.35);
    --hover-table-row: rgba(100, 140, 200, 0.18);
    --dias-neutro-bg: rgba(205, 217, 229, 0.15);
    --meta-sucesso-texto: #35D97C;
    --meta-sucesso-bg: rgba(53, 217, 124, 0.16);
    --meta-progresso-texto: #FFA052;
    --meta-progresso-bg: rgba(255, 160, 82, 0.16);
    --scrollbar-track: #1B2E42;
    --scrollbar-thumb: #3D5C7C;
    --scrollbar-thumb-hover: #5A7CA0;
    --scrollbar-thumb-active: #7090B6;
    --vitrine-card-bg: #1A2535;
    --vitrine-card-border: rgba(255, 255, 255, 0.07);
    --vitrine-accent: #4DA3FF;
    --vazio-circulo: rgba(77, 163, 255, 0.14);
    --vazio-icone: #4DA3FF;
    --desatualizado-bg: rgba(255, 79, 79, 0.14);
    --desatualizado-borda: rgba(255, 79, 79, 0.45);
    --desatualizado-acento: #FF4F4F;
    --desatualizado-ico-texto: #201014;
    --desatualizado-titulo: #FFD9D9;
    --desatualizado-detalhe: rgba(255, 217, 217, 0.72);
    --hub-superficie-2: #1F2C3D;
}

/* ==================================================================== */
/* Base                                                                  */
/* ==================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
    color-scheme: light;
}

html.dark-theme {
    color-scheme: dark;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track);
    border-radius: 6px;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 6px;
    border: 2px solid var(--scrollbar-track);
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
    background-color: var(--scrollbar-track);
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    transition: background-color 0.25s ease, color 0.25s ease;
}

/*  O hidden do HTML perde para qualquer classe com display (é regra do agente de
    usuário, sem especificidade): o !important devolve a ele a última palavra.   */
[hidden] {
    display: none !important;
}

h1:focus {
    outline: none;
}

a {
    color: var(--vitrine-accent);
}

/*  O Blazor mostra isto quando o circuito cai. Discreto, no pé da tela. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 10px 16px;
    background-color: var(--desatualizado-bg);
    border-top: 1px solid var(--desatualizado-borda);
    color: var(--desatualizado-titulo);
    font-size: 13px;
}

    #blazor-error-ui .reload {
        color: inherit;
        font-weight: 700;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 12px;
        top: 8px;
    }

/* ==================================================================== */
/* A tela: coluna + conteúdo                                             */
/* ==================================================================== */
.hub-tela {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
}

/*  Sticky e de altura de viewport: acompanha a rolagem do conteúdo em vez
    de subir junto. A COLUNA não rola; quem rola é a navegação.          */
.hub-coluna {
    position: sticky;
    top: 0;
    flex: 0 0 var(--hub-coluna-largura);
    width: var(--hub-coluna-largura);
    height: 100vh;
    background-color: var(--bg-header);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.10) 100%);
    color: rgba(255, 255, 255, 0.92);
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 5px 10px;
    overflow: hidden;
    z-index: 10;
}

/*  A gaveta de tela estreita é controlada por um checkbox escondido: o
    layout é renderizado no servidor (SSR), sem circuito, e não tem
    @onclick. O que muda com ele está na media query, no fim.           */
.hub-gaveta-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.hub-barra-estreita,
.hub-veu {
    display: none;
}

.hub-coluna-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
}

.hub-fechar {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}

    .hub-fechar:hover {
        background-color: rgba(255, 255, 255, 0.18);
        color: #fff;
    }

    .hub-fechar svg {
        width: 17px;
        height: 17px;
    }

/* ---- A marca, no alto ---------------------------------------------- */
.hub-marca {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 4px 6px;
    border-radius: 10px;
    flex: 0 0 auto;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
}

    .hub-marca:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }

    .hub-marca:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.7);
        outline-offset: 2px;
    }

.hub-marca-ico {
    width: 42px;
    height: auto;
    display: block;
    flex: 0 0 42px;
}

.hub-marca-nome {
    display: flex;
    flex-direction: column;
    line-height: 1;
    min-width: 0;
}

    .hub-marca-nome b {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -0.015em;
        color: #fff;
    }

    /* "Suporte Web" espaçado e pequeno sob o nome: qualificador, não nome. */
    .hub-marca-nome span {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 3.2px;
        color: rgba(255, 255, 255, 0.5);
        margin-top: 5px;
        white-space: nowrap;
    }

/* ---- Navegação ----------------------------------------------------- */
.hub-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.hub-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 10px 0 13px;
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.18s ease, color 0.18s ease;
}

    .hub-nav-item svg {
        width: 19px;
        height: 19px;
        flex: 0 0 19px;
    }

    .hub-nav-item span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hub-nav-item:hover {
        background-color: rgba(255, 255, 255, 0.09);
        color: #fff;
    }

    .hub-nav-item:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.7);
        outline-offset: -2px;
    }

    .hub-nav-item.ativo {
        background-color: rgba(255, 255, 255, 0.13);
        color: #fff;
    }

    /*  A tira do item ativo: âmbar, azul e rubro, na ordem em que os três
        cubos aparecem na marca Partner.                                 */
    .hub-nav-item.ativo::before {
        content: '';
        position: absolute;
        left: 0;
        top: 9px;
        bottom: 9px;
        width: 3px;
        border-radius: 2px;
        background: linear-gradient(180deg,
            var(--partner-ambar) 0%, var(--partner-ambar) 33.33%,
            var(--partner-azul) 33.33%, var(--partner-azul) 66.66%,
            var(--partner-rubro) 66.66%, var(--partner-rubro) 100%);
    }

/* ---- Grupo da coluna: o produto que abre e fecha (proposta B) ------- */
/*  Um <details>: o summary é um item do menu como os outros, com a seta que gira; os
    filhos ficam recuados, com uma linha-guia à esquerda. Aberto pelo servidor quando a
    tela atual é do produto; fora disso, o que a pessoa deixou (suporteMenu, App.razor). */
.hub-nav-grupo {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .hub-nav-grupo > summary {
        list-style: none;
        cursor: pointer;
        user-select: none;
    }

        .hub-nav-grupo > summary::-webkit-details-marker {
            display: none;
        }

        .hub-nav-grupo > summary > span {
            flex: 1 1 auto;
        }

    .hub-nav-seta {
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 16px !important;
        opacity: 0.6;
        transition: transform 0.2s ease;
    }

    .hub-nav-grupo[open] > summary .hub-nav-seta {
        transform: rotate(90deg);
    }

.hub-nav-grupo-itens {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 12px;
}

    /*  A guia: uma linha fina alinhada com o ícone do cabeçalho. */
    .hub-nav-grupo-itens::before {
        content: "";
        position: absolute;
        left: 22px;
        top: 4px;
        bottom: 4px;
        width: 1px;
        background-color: rgba(255, 255, 255, 0.14);
    }

.hub-nav-sub {
    height: 34px;
    padding-left: 30px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.62);
}

    .hub-nav-sub svg {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
    }

    /*  A tira do filho ativo nasce DA guia (proposta B, Sergio, 17/09/2026): o trecho da
        linha engrossa para 3 px e acende nas três cores, no mesmo x da guia — 22px do
        bloco, e o filho começa em 12px: 22 - 12 - 1 = 9px —, em vez de uma segunda marca
        colada ao lado dela.                                                              */
    .hub-nav-sub.ativo::before {
        left: 9px;
        top: 6px;
        bottom: 6px;
    }

/* ---- O card do produto na Home ---------------------------------------- */
.hub-card-pasta .hub-card-seta {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
}

.hub-card-contagem {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.hub-card-ambar { --card-cor: #B7791F; --card-cor-suave: #FBF0DA; }
html.dark-theme .hub-card-ambar { --card-cor: #F9B548; --card-cor-suave: rgba(249, 181, 72, 0.16); }

/* ---- Rodapé da coluna: sessão e assinatura ------------------------- */
.hub-coluna-pe {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
}

.hub-usuario {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.08);
    min-width: 0;
    flex: 0 0 auto;
}

.hub-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.18);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    flex: 0 0 30px;
}

.hub-usuario-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

    .hub-usuario-txt b {
        font-size: 13px;
        font-weight: 650;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hub-usuario-txt span {
        font-size: 10.5px;
        color: rgba(255, 255, 255, 0.5);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/*  Tema e Sair dividem a linha em partes iguais. */
.hub-pe-botoes {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 0 0 auto;
}

    .hub-pe-botoes > * {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
    }

    .hub-pe-botoes form > * {
        flex: 1 1 0;
        min-width: 0;
    }

/*  Chips da coluna: desenhados para barra ESCURA, que a coluna é nos dois
    temas — então valem sem cor de tema.                                  */
.hub-coluna .chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

.hub-coluna .btn-header {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

    .hub-coluna .btn-header:hover {
        background-color: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

    .hub-coluna .btn-header:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.7);
        outline-offset: 2px;
    }

    .hub-coluna .btn-header .ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

        .hub-coluna .btn-header .ico svg {
            width: 100%;
            height: 100%;
            display: block;
        }

/*  O alternador de tema mostra o tema ATUAL: sol + "Claro" ou lua +
    "Escuro". Quem escolhe qual par aparece é a classe do <html>, e não o
    C#: o botão é SSR e funciona sem circuito.                            */
.tema-escuro-so {
    display: none !important;
}

html.dark-theme .tema-claro-so {
    display: none !important;
}

html.dark-theme .tema-escuro-so {
    display: inline-flex !important;
}

html.dark-theme .hub-coluna .btn-header.tema-toggle {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.hub-assinatura {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    text-align: center;
    flex: 0 0 auto;
    line-height: 1.35;
}

    .hub-assinatura span {
        font-size: 10.5px;
        color: rgba(255, 255, 255, 0.45);
    }

    .hub-assinatura b {
        font-weight: 650;
        color: rgba(255, 255, 255, 0.72);
    }

    .hub-assinatura a {
        font-size: 10.5px;
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
        word-break: break-word;
    }

        .hub-assinatura a:hover {
            color: #fff;
            text-decoration: underline;
        }

/* ---- O conteúdo à direita ------------------------------------------ */
.hub-conteudo {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/*  O recuo lateral do conteúdo mora AQUI, e não em cada página. */
.hub-corpo {
    flex: 1 1 auto;
    padding: 0 24px 24px;
}

/* ==================================================================== */
/* A página e o cabeçalho                                                */
/* ==================================================================== */
.hub-pagina {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 24px 0 0;
}

.hub-cabeca {
    display: flex;
    /*  flex-end e não center: o texto tem três linhas de alturas diferentes
        e a ação tem uma. Pela base, o botão fica na linha do título.     */
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    padding: 14px 0 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border-col);
}

.hub-cabeca-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 320px;
    min-width: 0;
}

/*  O eyebrow é o MESMO rótulo da seção na Home: diz "você está dentro de
    Monitoramento" sem precisar de trilha. Quando a tela é filha de outra
    (Servidor → Servidores), o pai entra como link, no mesmo tamanho.    */
.hub-cabeca-eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--text-secondary);
}

    .hub-cabeca-eyebrow svg {
        width: 12px;
        height: 12px;
        flex: 0 0 12px;
    }

    .hub-cabeca-eyebrow i {
        font-style: normal;
        opacity: 0.55;
    }

    .hub-cabeca-eyebrow a {
        color: inherit;
        text-decoration: none;
        border-bottom: 1px solid transparent;
    }

        .hub-cabeca-eyebrow a:hover {
            color: var(--text-primary);
            border-bottom-color: currentColor;
        }

.hub-cabeca h1 {
    margin: 0;
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -0.018em;
    line-height: 1.2;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.hub-cabeca-desc {
    margin: 0;
    max-width: 92ch;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
    /*  A descrição pode ter mais de uma linha (o servidor traz o token na segunda):
        o "\n" do texto vira quebra, e o resto continua fluindo.                   */
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.hub-cabeca-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---- Seções e grade da Home ---------------------------------------- */
.hub-secao {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.hub-secao-rot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--text-secondary);
}

    .hub-secao-rot svg {
        width: 12px;
        height: 12px;
        flex: 0 0 12px;
    }

.hub-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
    gap: 14px;
    align-content: start;
}

.hub-topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
}

.hub-saudacao {
    margin: 0;
    font-size: 24px;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.hub-topo-data {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ==================================================================== */
/* O card do catálogo (Home)                                             */
/* ==================================================================== */
.hub-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    min-height: 104px;
    padding: 20px;
    border-radius: 14px;
    background-color: var(--vitrine-card-bg);
    border: 1px solid var(--vitrine-card-border);
    color: var(--text-primary);
    text-decoration: none;
    box-shadow: 0 4px 14px var(--shadow-card);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1.2),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

    /* Faixa de acento à esquerda: é onde a cor da tela vive. */
    .hub-card::before {
        content: '';
        position: absolute;
        inset: 0 auto 0 0;
        width: 5px;
        background-color: var(--card-cor);
        pointer-events: none;
    }

    .hub-card:hover {
        transform: translateY(-5px);
        border-color: var(--card-cor);
        box-shadow: 0 14px 30px var(--shadow-card-hover);
    }

    .hub-card:focus-visible {
        outline: 2px solid var(--card-cor);
        outline-offset: 2px;
    }

    .hub-card:hover .hub-card-ico {
        background-color: var(--card-cor);
        color: #fff;
    }

    .hub-card:hover .hub-card-seta {
        transform: translateX(5px);
    }

.hub-card-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 13px;
    background-color: var(--card-cor-suave);
    color: var(--card-cor);
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .hub-card-ico svg {
        width: 25px;
        height: 25px;
    }

.hub-card-txt {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.hub-card-tit {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-right: 44px;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.005em;
}

.hub-card-desc {
    font-size: 12.5px;
    line-height: 1.42;
    color: var(--text-secondary);
}

.hub-card-seta {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--card-cor);
    transition: transform 0.3s ease;
}

.hub-card-selos {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 1;
    pointer-events: none;
}

.hub-selo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background-color: var(--hub-superficie-2);
    border: 1px solid var(--border-col);
    color: var(--text-secondary);
    pointer-events: auto;
}

    .hub-selo svg {
        width: 13px;
        height: 13px;
        display: block;
    }

.hub-card-previsto {
    opacity: 0.6;
    cursor: default;
}

    .hub-card-previsto:hover {
        transform: none;
        border-color: var(--vitrine-card-border);
        box-shadow: 0 4px 14px var(--shadow-card);
    }

        .hub-card-previsto:hover .hub-card-ico {
            background-color: var(--card-cor-suave);
            color: var(--card-cor);
        }

        .hub-card-previsto:hover .hub-card-seta {
            transform: none;
        }

/*  Acentos por tela (CatalogoSuporte.Classe). Mesma paleta do Hub. */
.hub-card-servidores { --card-cor: #0B6BD6; --card-cor-suave: #E6F0FC; }
.hub-card-teal       { --card-cor: #0E7D8E; --card-cor-suave: #E2F4F7; }
.hub-card-roxo       { --card-cor: #6C2BD0; --card-cor-suave: #F0E9FC; }
.hub-card-verde      { --card-cor: #0A7A3D; --card-cor-suave: #E4F5EA; }
.hub-card-laranja    { --card-cor: #C25E0B; --card-cor-suave: #FCEEE0; }
.hub-card-cinza      { --card-cor: #5A6B7D; --card-cor-suave: #E5E9EF; }

html.dark-theme .hub-card-servidores { --card-cor: #4DA3FF; --card-cor-suave: rgba(77, 163, 255, 0.16); }
html.dark-theme .hub-card-teal       { --card-cor: #2FD4EC; --card-cor-suave: rgba(47, 212, 236, 0.16); }
html.dark-theme .hub-card-roxo       { --card-cor: #A98BFF; --card-cor-suave: rgba(169, 139, 255, 0.16); }
html.dark-theme .hub-card-verde      { --card-cor: #35D97C; --card-cor-suave: rgba(53, 217, 124, 0.16); }
html.dark-theme .hub-card-laranja    { --card-cor: #FFA052; --card-cor-suave: rgba(255, 160, 82, 0.16); }
html.dark-theme .hub-card-cinza      { --card-cor: #9FB0C2; --card-cor-suave: rgba(159, 176, 194, 0.16); }

/* ==================================================================== */
/* Recados, convite e vazio                                              */
/* ==================================================================== */
/*  O recado é uma FAIXA: fundo tingido no tom do estado, borda fina, ícone de 18px,
    texto de 12,5px com o que importa em negrito. Metade da altura do cartão que era.
    UM desenho para todos os avisos da tela — informativo (azul), aviso (âmbar), ok
    (verde) e erro (vermelho) — para o olho ler "nota" em qualquer um deles.
    O <strong> continua existindo para o recado de duas linhas (título + explicação),
    no mesmo corpo do texto; e o <b> dentro do <span> para o de uma linha só.
    Sergio - 15/09/2026                                                               */
.hub-recado {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--vazio-icone) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--vazio-icone) 35%, transparent);
}

    .hub-recado > svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        color: var(--vazio-icone);
    }

    .hub-recado > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        flex: 1 1 auto;
    }

    .hub-recado strong {
        font-size: 12.5px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .hub-recado span {
        font-size: 12.5px;
        line-height: 1.45;
        color: var(--text-primary);
    }

    .hub-recado b {
        font-weight: 700;
    }

    .hub-recado code {
        font-family: ui-monospace, 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
        font-size: 11.5px;
        padding: 1px 5px;
        border-radius: 4px;
        background-color: color-mix(in srgb, var(--text-primary) 10%, transparent);
        color: var(--text-primary);
    }

/*  Os tons. Ícone, texto e borda tomam a cor do estado; o fundo é o par já calibrado
    para texto pequeno (--meta-*-bg, --desatualizado-bg).                              */
.hub-recado-aviso {
    background-color: var(--meta-progresso-bg);
    border-color: color-mix(in srgb, var(--meta-progresso-texto) 35%, transparent);
}

    .hub-recado-aviso > svg,
    .hub-recado-aviso strong,
    .hub-recado-aviso span {
        color: var(--meta-progresso-texto);
    }

.hub-recado-ok {
    background-color: var(--meta-sucesso-bg);
    border-color: color-mix(in srgb, var(--meta-sucesso-texto) 35%, transparent);
}

    .hub-recado-ok > svg,
    .hub-recado-ok strong,
    .hub-recado-ok span {
        color: var(--meta-sucesso-texto);
    }

.hub-recado-erro {
    background-color: var(--desatualizado-bg);
    border-color: var(--desatualizado-borda);
}

    .hub-recado-erro > svg {
        color: var(--desatualizado-acento);
    }

    .hub-recado-erro strong,
    .hub-recado-erro span {
        color: var(--desatualizado-titulo);
    }

.hub-recado-acoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.hub-convite {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 22px 24px;
    border-radius: 14px;
    background-color: var(--vitrine-card-bg);
    border: 1px dashed var(--border-col);
}

.hub-convite-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 13px;
    background-color: var(--hub-superficie-2);
    color: var(--text-secondary);
}

    .hub-convite-ico svg {
        width: 24px;
        height: 24px;
    }

.hub-convite-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 250px;
    min-width: 0;
}

    .hub-convite-txt strong {
        font-size: 15.5px;
        font-weight: 650;
    }

    .hub-convite-txt span {
        font-size: 13px;
        color: var(--text-secondary);
    }

/* ==================================================================== */
/* Régua de indicadores (painel-cards) — a mesma do Partner Hub          */
/*                                                                       */
/* UMA superfície, não cinco cards: cada indicador é um campo separado   */
/* por filete. A cor do KPI vira um ponto de 7px ao lado do rótulo — com  */
/* cinco campos tingidos lado a lado, cor deixaria de significar algo.   */
/* ==================================================================== */
.painel-cards {
    display: flex;
    gap: 0;
    margin: 0 0 var(--espaco-listagem) 0;
    border-radius: 4px;
    background-color: var(--bg-table);
    box-shadow: 0 0 15px var(--shadow-table);
    overflow-x: auto;
    overflow-y: hidden;
}

.painel-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 11px 18px 12px 18px;
    border-left: 1px solid var(--border-table);
    color: var(--text-primary);
    min-width: 165px;
    overflow: hidden;
}

    .painel-card:first-child {
        border-left: none;
    }

    .painel-card strong {
        font-size: 11px;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--text-rotulo);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

        .painel-card strong::before {
            content: "";
            display: inline-block;
            width: 7px;
            height: 7px;
            margin-right: 7px;
            border-radius: 50%;
            background-color: var(--kpi-cor, var(--vitrine-accent));
            vertical-align: middle;
        }

    .painel-card span {
        font-size: clamp(26px, 2.1vw, 32px);
        font-weight: 700;
        line-height: 1;
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
    }

    .painel-card small {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
    }

/*  O campo que é BOTÃO (filtra a lista ao clicar). Mesmo desenho do campo
    inerte; o que o distingue é o cursor, o hover e o estado ativo — que
    é discreto de propósito: um véu na cor do KPI e uma linha embaixo. O
    indicador continua indicador; o filtro é um efeito colateral dele.  */
button.painel-card {
    position: relative;
    font-family: inherit;
    text-align: left;
    background: transparent;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

    button.painel-card:hover {
        background-color: color-mix(in srgb, var(--kpi-cor, var(--vitrine-accent)) 5%, transparent);
    }

    button.painel-card:focus-visible {
        outline: 2px solid var(--hub-foco);
        outline-offset: -2px;
    }

    button.painel-card.ativo {
        background-color: color-mix(in srgb, var(--kpi-cor, var(--vitrine-accent)) 9%, transparent);
    }

        button.painel-card.ativo::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            background-color: var(--kpi-cor, var(--vitrine-accent));
        }

/*  Pendência: o único indicador que carrega cor no número. */
.kpi-alerta {
    --kpi-cor: #C62828;
    background-color: color-mix(in srgb, var(--kpi-cor) 7%, transparent);
}

    .kpi-alerta span {
        color: var(--kpi-cor);
    }

    .kpi-alerta strong {
        color: color-mix(in srgb, var(--kpi-cor) 78%, var(--text-primary));
    }

/*  Zerado vem DEPOIS do alerta: zero não é notícia. */
.kpi-zerado {
    background-color: transparent;
}

    .kpi-zerado span {
        font-weight: 600;
        color: var(--text-muted);
    }

    .kpi-zerado strong::before {
        background-color: var(--text-muted);
        opacity: 0.45;
    }

html.dark-theme .kpi-alerta {
    --kpi-cor: #FF6B6B;
    background-color: color-mix(in srgb, var(--kpi-cor) 12%, transparent);
}

html.dark-theme .kpi-zerado {
    background-color: transparent;
}

.kpi-azul { --kpi-cor: #0B6BD6; }
.kpi-verde { --kpi-cor: #0A7A3D; }
.kpi-roxo { --kpi-cor: #6C2BD0; }
.kpi-vermelho { --kpi-cor: #C62828; }
.kpi-teal { --kpi-cor: #0E7D8E; }
.kpi-laranja { --kpi-cor: #C25E0B; }
.kpi-rosa { --kpi-cor: #C2185B; }
.kpi-ciano { --kpi-cor: #12798C; }
.kpi-cinza { --kpi-cor: #7A8896; }

html.dark-theme .kpi-azul { --kpi-cor: #4DA3FF; }
html.dark-theme .kpi-verde { --kpi-cor: #35D97C; }
html.dark-theme .kpi-roxo { --kpi-cor: #A98BFF; }
html.dark-theme .kpi-vermelho { --kpi-cor: #FF6B6B; }
html.dark-theme .kpi-teal { --kpi-cor: #2FD4EC; }
html.dark-theme .kpi-laranja { --kpi-cor: #FFA052; }
html.dark-theme .kpi-rosa { --kpi-cor: #FF6B8A; }
html.dark-theme .kpi-ciano { --kpi-cor: #45C6DC; }
html.dark-theme .kpi-cinza { --kpi-cor: #9FB0C2; }

/* ==================================================================== */
/* Cartões de medida, selos, botões e tabela (Situação do Hub)           */
/* ==================================================================== */
.sit-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-top: var(--espaco-listagem);
}

.sit-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 18px;
    background-color: var(--bg-table);
    border: 1px solid var(--border-table);
    border-radius: 10px;
    box-shadow: 0 2px 10px var(--shadow-card);
    min-width: 0;
}

.sit-card-largo {
    gap: 12px;
    margin-top: 14px;
}

.sit-card-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    flex-wrap: wrap;
}

.sit-card-titulo {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-rotulo);
}

    .sit-card-titulo small {
        margin-left: 6px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: var(--text-muted);
    }

.sit-rot {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-rotulo);
}

.sit-val {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.sit-val-mono {
    font-family: ui-monospace, 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
    font-size: 16px;
}

.sit-sub {
    font-size: 12px;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

/* ---- Selos de estado ------------------------------------------------ */
.sit-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

    .sit-selo::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: currentColor;
        flex: 0 0 7px;
    }

.sit-selo-ok {
    background-color: var(--meta-sucesso-bg);
    color: var(--meta-sucesso-texto);
}

.sit-selo-aviso {
    background-color: var(--meta-progresso-bg);
    color: var(--meta-progresso-texto);
}

.sit-selo-erro {
    background-color: var(--desatualizado-bg);
    color: var(--desatualizado-acento);
}

.sit-selo-neutro {
    background-color: var(--hub-superficie-2);
    color: var(--text-secondary);
}

/*  O roxo do "sem backup": a mesma cor do campo e da barra da régua de backups (kpi-roxo),
    para o selo da lista e o setor da barra dizerem a mesma coisa.                       */
.sit-selo-roxo {
    background-color: color-mix(in srgb, #6C2BD0 14%, transparent);
    color: #6C2BD0;
}

html.dark-theme .sit-selo-roxo {
    background-color: color-mix(in srgb, #A98BFF 16%, transparent);
    color: #A98BFF;
}

.sit-selo-info {
    background-color: color-mix(in srgb, var(--vitrine-accent) 14%, transparent);
    color: var(--vitrine-accent);
}

/*  Selo miúdo, para caber numa célula ao lado do nome. */
.sit-selo-mini {
    padding: 1px 7px;
    font-size: 10.5px;
    gap: 4px;
}

    .sit-selo-mini::before {
        width: 5px;
        height: 5px;
        flex-basis: 5px;
    }

/* ---- Botões --------------------------------------------------------- */
.sit-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border: 1px solid var(--border-col);
    border-radius: 8px;
    background-color: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

    .sit-btn:hover:not([disabled]) {
        background-color: var(--hub-superficie-2);
    }

    .sit-btn:focus-visible {
        outline: 2px solid var(--hub-foco);
        outline-offset: 2px;
    }

    .sit-btn[disabled] {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .sit-btn svg {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
    }

.sit-btn-acento {
    background-color: var(--bg-header);
    border-color: var(--bg-header);
    color: #FFFFFF;
}

    .sit-btn-acento:hover:not([disabled]) {
        background-color: var(--bg-header);
        filter: brightness(1.16);
    }

.sit-btn-perigo {
    border-color: var(--desatualizado-borda);
    color: var(--desatualizado-acento);
}

    .sit-btn-perigo:hover:not([disabled]) {
        background-color: var(--desatualizado-bg);
    }

.sit-btn-mini {
    padding: 3px 9px;
    font-size: 11.5px;
    gap: 5px;
}

    .sit-btn-mini svg {
        width: 13px;
        height: 13px;
        flex-basis: 13px;
    }

/* ---- Tabela --------------------------------------------------------- */
/*  A MOLDURA da tabela: borda fina de cantos redondos em volta do conjunto, e o
    cabeçalho sem cantos próprios — ele é a tampa da moldura, não um bloco solto
    sobre linhas brancas. É a rolagem horizontal que leva a moldura, para o canto
    redondo recortar cabeçalho e última linha juntos.
    Sergio - 15/09/2026                                                               */
.sit-rolagem {
    overflow-x: auto;
    border: 1px solid var(--border-table);
    border-radius: 8px;
}

.sit-tabela {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 13px;
}

    .sit-tabela thead th {
        padding: 9px 12px;
        background-color: var(--bg-table-thead);
        color: #FFFFFF;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .sit-tabela tbody td {
        padding: 10px 12px;
        border-bottom: 1px solid var(--border-table);
        vertical-align: top;
        color: var(--text-primary);
    }

    .sit-tabela tbody tr:last-child td {
        border-bottom: 0;
    }

    /*  Zebra levíssima: ajuda a seguir a linha até as colunas da direita.
        FORA da grade do T-SQL: lá as linhas vêm do <Virtualize>, e a paridade do
        nth-child é a posição no DOM (depois do espaçador), não o índice do dado —
        as listras inverteriam a cada rolagem.                                  */
    .sit-tabela:not(.sit-tabela-grid) tbody tr:nth-child(even) td {
        background-color: color-mix(in srgb, var(--text-primary) 3%, transparent);
    }

    /*  O segundo seletor existe por especificidade: a zebra acima usa :not() e vale
        (0,3,3), e o hover simples (0,2,3) perdia nas linhas pares — metade da tabela
        não acendia. Este empata em (0,3,3) e vem depois, então vence.               */
    .sit-tabela tbody tr:hover td,
    .sit-tabela tbody tr:nth-child(even):hover td {
        background-color: var(--hover-table-row);
    }

    .sit-tabela th,
    .sit-tabela td {
        text-align: left;
    }

    /*  A coluna principal absorve a sobra; as outras encolhem até o conteúdo. */
    .sit-tabela th.sit-col-cresce,
    .sit-tabela td.sit-col-cresce {
        width: 100%;
    }

    .sit-tabela th.sit-col-num,
    .sit-tabela td.sit-col-num {
        text-align: right;
    }

    .sit-tabela th.sit-col-acoes,
    .sit-tabela td.sit-col-acoes {
        text-align: center;
    }

    .sit-tabela td.sit-col-num,
    .sit-tabela td.sit-col-acoes,
    .sit-tabela td.sit-col-fixa {
        white-space: nowrap;
    }

    /*  Célula alinhada ao MEIO da linha, e não ao topo: o selo de estado é uma linha só
        ao lado de um nome que pode ocupar duas ou três, e colado no topo parecia
        deslocado. Continua à esquerda.                                               */
    .sit-tabela td.sit-col-meio {
        vertical-align: middle;
    }

    .sit-tabela tr.sit-linha-apagada td {
        opacity: 0.6;
    }

.sit-worker-nome {
    display: block;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-primary);
}

    a.sit-worker-nome {
        text-decoration: none;
    }

        a.sit-worker-nome:hover {
            color: var(--vitrine-accent);
            text-decoration: underline;
        }

.sit-worker-desc {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-secondary);
}

.sit-worker-detalhe {
    display: block;
    margin-top: 5px;
    max-width: 42ch;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-secondary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sit-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sit-cadencia {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary);
}

.sit-acoes {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.sit-sem-acao {
    color: var(--text-secondary);
}

.sit-mono {
    font-family: ui-monospace, 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
    font-size: 12.5px;
    word-break: break-all;
}

/* ---- Toast: a confirmação que some sozinha ------------------------------ */
/*  O pbToast do BackupCentral no nosso traje (17/09/2026): no alto, centrado; SEM a faixa
    da esquerda (proposta A) — o tom mora só no ícone e na barra do tempo; ícone na
    cor do tom, a mensagem, opcionalmente o bloco copiado, o × e a barra que drena. Montado
    pelo suporteBackup.toast (backup.js). Tons: ok, aviso, erro.                          */
.toaster {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    max-width: calc(100vw - 32px);
    width: max-content;
}

.toast {
    pointer-events: auto;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px 12px;
    min-width: 320px;
    max-width: min(560px, 100%);
    padding: 12px 16px 12px 14px;
    background-color: var(--bg-table);
    border: 1px solid var(--border-table);
    border-radius: 10px;
    box-shadow: 0 18px 44px var(--shadow-card-hover);
    color: var(--text-primary);
    font-size: 13.5px;
    line-height: 1.45;
    cursor: pointer;
    overflow: hidden;
    animation: toast-entra 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes toast-entra {
    from { opacity: 0; transform: translateY(-16px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.toast-icone {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--toast-cor);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex: 0 0 26px;
}

/*  Com bloco, o ícone ocupa as duas linhas (mensagem e bloco) e fica no meio delas. O "-1"
    não serve: sem linhas explícitas no grid ele é a segunda linha, não a última.        */
.toast-com-bloco .toast-icone {
    grid-row: 1 / span 2;
    align-self: center;
}

.toast-msg {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 500;
}

.toast-vezes {
    margin-left: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--toast-cor);
    font-variant-numeric: tabular-nums;
}

/*  O bloco copiado ocupa a segunda linha do grid, da mensagem até a margem direita —
    por baixo do × também.                                                            */
.toast-bloco {
    grid-column: 2 / -1;
    margin: 0;
    padding: 8px 10px;
    border-radius: 6px;
    background-color: var(--hub-superficie-2);
    font-family: ui-monospace, 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    color: var(--text-primary);
}

.toast-fechar {
    align-self: start;
    background: transparent;
    border: 0;
    padding: 0 2px;
    font-size: 20px;
    line-height: 1;
    color: var(--text-primary);
    opacity: 0.55;
    cursor: pointer;
}

    .toast-fechar:hover {
        opacity: 1;
    }

.toast-barra {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: var(--toast-cor);
    opacity: 0.7;
    transform-origin: left;
    animation: toast-drena var(--toast-duracao, 4000ms) linear forwards;
}

@keyframes toast-drena {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.toast-ok { --toast-cor: var(--meta-sucesso-texto); }
.toast-aviso { --toast-cor: var(--meta-progresso-texto); }
.toast-erro { --toast-cor: var(--desatualizado-acento); }

@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; }
}

/* ---- Botão verde: a ação que "liga" (Conectar Dropbox) --------------- */
.sit-btn-verde {
    background-color: #0A7A3D;
    border-color: #0A7A3D;
    color: #fff;
}

    .sit-btn-verde:hover:not([disabled]) {
        background-color: #086A34;
        border-color: #086A34;
        color: #fff;
    }

html.dark-theme .sit-btn-verde {
    background-color: #2EBF6E;
    border-color: #2EBF6E;
    color: #0F1722;
}

    html.dark-theme .sit-btn-verde:hover:not([disabled]) {
        background-color: #35D97C;
        border-color: #35D97C;
        color: #0F1722;
    }

/* ---- Título de coluna que ordena (ColunaOrdenavel) --------------------- */
/*  O th vira clicável; a seta só aparece inteira na coluna ativa (nas outras fica um
    fantasma no hover, para a pessoa saber que dá para clicar). Sergio - 17/09/2026        */
.sit-tabela th.sit-th-ativo,
.sit-tabela th:has(> .sit-th-ordenavel) {
    cursor: pointer;
    user-select: none;
}

.sit-th-ordenavel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sit-th-seta {
    width: 13px !important;
    height: 13px !important;
    flex: 0 0 13px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

th:hover .sit-th-seta {
    opacity: 0.45;
}

th.sit-th-ativo .sit-th-seta {
    opacity: 1;
}

/* ---- O rodapé do cartão de lista: a nota de onde a lista acaba -------- */
/*  Substitui as caixas coloridas de aviso (proposta C, 17/09/2026): o "cortou em 200" e o
    "não identificados ficam de fora" viram uma linha no pé do cartão, com um ponto laranja
    — é onde a pessoa sente que faltou coisa. A informação fixa da tela foi para a
    descrição do cabeçalho.                                                              */
.sit-card-pe {
    display: flex;
    align-items: center;
    /*  O texto vai num <span> só: em flex, cada trecho de texto vira um item e o gap
        abriria buracos em volta do negrito.                                       */
    gap: 8px;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-table);
    font-size: 12px;
    color: var(--text-secondary);
}

    .sit-card-pe b {
        color: var(--text-primary);
    }

.sit-ponto-aviso {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background-color: var(--meta-progresso-texto);
}

/* ---- Backup: valor com botão de copiar, e o X do recado ---------------- */
/*  A chave e a senha no cartão de medida: o valor mono e, colado a ele, o botão que copia.
    O botão é discreto (só o traço) e só ganha fundo no hover — o valor continua sendo o
    protagonista do cartão. Sergio - 16/09/2026                                          */
.sit-val-copiar {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .sit-val-copiar > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

.sit-copiar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    padding: 0;
    border-radius: 7px;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

    .sit-copiar:hover {
        border-color: var(--border-table);
        background-color: var(--hub-superficie-2);
        color: var(--text-primary);
    }

    .sit-copiar svg {
        width: 15px;
        height: 15px;
    }

/*  O recado que a pessoa fecha: o X no canto, na cor do tom. */
.hub-recado-fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    padding: 0;
    border-radius: 7px;
    border: 1px solid transparent;
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.75;
}

    .hub-recado-fechar:hover {
        opacity: 1;
        background-color: color-mix(in srgb, currentColor 12%, transparent);
    }

    .hub-recado-fechar svg {
        width: 14px;
        height: 14px;
    }

    .hub-recado-aviso .hub-recado-fechar { color: var(--meta-progresso-texto); }
    .hub-recado-ok .hub-recado-fechar { color: var(--meta-sucesso-texto); }
    .hub-recado-erro .hub-recado-fechar { color: var(--desatualizado-acento); }

/* ---- Backup: a política e o espaço no Dropbox ------------------------- */
/*  A política é uma grade de quatro campos (label .campo, do T-SQL) com o rótulo miúdo em
    cima e a explicação embaixo. Sergio - 16/09/2026                                     */
.politica-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 18px;
}

    .politica-grade .campo input {
        max-width: 220px;
    }

    .politica-grade .campo input[disabled] {
        opacity: 0.7;
        cursor: not-allowed;
    }

/*  O espaço: o livre em destaque à esquerda, a barra de uso à direita, tingida pela saúde
    (a borda do cartão acompanha). As marcas na barra são os limiares de aviso e crítico. */
.espaco-corpo {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.espaco-livre {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 0 0 auto;
    min-width: 180px;
}

.espaco-valor {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    line-height: 1.1;
}

.espaco-barra-caixa {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/*  A escala em cima da barra: números presos à posição (%), o 0 encostado à esquerda, o 100 à
    direita e os do meio centrados; os limiares na cor do estado que anunciam.           */
.espaco-escala {
    position: relative;
    height: 14px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

    .espaco-escala > span {
        position: absolute;
        top: 0;
        transform: translateX(-50%);
    }

    .espaco-escala > span:first-child {
        transform: none;
    }

    .espaco-escala > span:last-child {
        transform: translateX(-100%);
    }

.espaco-escala-aviso {
    color: var(--meta-progresso-texto);
}

.espaco-escala-critico {
    color: var(--desatualizado-acento);
}

.espaco-barra {
    position: relative;
    height: 14px;
    border-radius: 999px;
    background-color: var(--hub-superficie-2);
    border: 1px solid var(--border-table);
    overflow: hidden;
}

.espaco-barra-uso {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-color: var(--meta-sucesso-texto);
    transition: width 0.4s ease;
}

.espaco-aviso .espaco-barra-uso {
    background-color: var(--meta-progresso-texto);
}

.espaco-critico .espaco-barra-uso {
    background-color: var(--desatualizado-acento);
}

.espaco-barra-marca {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: color-mix(in srgb, var(--meta-progresso-texto) 70%, transparent);
}

.espaco-barra-marca-critico {
    background-color: color-mix(in srgb, var(--desatualizado-acento) 80%, transparent);
}

.espaco-medidas {
    display: flex;
    gap: 6px 22px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-secondary);
}

    .espaco-medidas b {
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
    }

.espaco-aviso {
    border-color: color-mix(in srgb, var(--meta-progresso-texto) 45%, var(--border-table));
}

.espaco-critico {
    border-color: color-mix(in srgb, var(--desatualizado-acento) 55%, var(--border-table));
}

/* ---- Backup: o painel (e a TV) ------------------------------------------ */
/*  A régua dentro de um sit-card largo (painel-cards-solto tira a margem que a régua tem
    quando é o primeiro bloco da tela), a linha de totais ao lado do título, a barra de
    distribuição embaixo da régua (as cores são as mesmas --kpi-cor dos campos), e as quatro
    listas em duas colunas com rolagem própria — a TV não pode crescer para baixo.
    Sergio - 16/09/2026                                                                 */
.painel-bloco {
    gap: 12px;
}

.painel-cards-solto {
    margin: 0;
}

.painel-manchete {
    display: flex;
    gap: 6px 18px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-secondary);
}

    .painel-manchete b {
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
    }

/*  O percentual ao lado do número do campo, na cor dele (proposta A, 17/09/2026): a fatia
    sobre o total de clientes — a mesma conta que a barra desenha embaixo.              */
.painel-pct {
    font-style: normal;
    font-size: 14px;
    font-weight: 700;
    margin-left: 4px;
    color: var(--kpi-cor, var(--vitrine-accent));
    font-variant-numeric: tabular-nums;
}

.painel-barra {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background-color: var(--hub-superficie-2);
    gap: 2px;
}

    .painel-barra > span {
        flex: 0 0 auto;
        min-width: 0;
        background-color: var(--kpi-cor, var(--vitrine-accent));
        transition: flex-basis 0.4s ease;
    }

/*  Duas colunas só quando cabem duas tabelas inteiras (a TV, 1920): abaixo disso empilha —
    a tabela do Hub pede 720px de largura mínima, e aqui ela abre mão disso.             */
.painel-listas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(640px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.painel-lista {
    margin-top: 0;
    min-width: 0;
}

.painel-rolagem {
    max-height: 340px;
    overflow-y: auto;
}

    .painel-lista .sit-tabela {
        min-width: 0;
    }

    .painel-lista .sit-worker-nome {
        white-space: normal;
    }

.painel-lista-ok {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    background-color: var(--meta-sucesso-bg);
    color: var(--meta-sucesso-texto);
}

    .painel-lista-ok svg {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }

/* ---- Tela travada: a lista preenche a página e rola por dentro --------- */
/*  As telas de LISTA (servidores, clientes do backup, novo cliente, itens da execução)
    não crescem para baixo: a página tem a altura da janela, cabeçalho, régua e filtros
    ficam com a altura que têm, e o cartão da lista absorve o que sobra — só a tabela rola
    (Sergio, 17/09/2026). O mesmo desenho do viewport-lock da TV, com o padding de baixo do
    hub-corpo descontado. Piso de 16rem: em janela baixa a página rola em vez de a lista
    virar duas linhas. Em tela estreita (a coluna vira gaveta) a trava sai.                */
.tela-travada {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 24px);
}

    .tela-travada > * {
        flex: 0 0 auto;
    }

    .tela-travada > .tela-travada-lista {
        flex: 1 1 auto;
        min-height: 16rem;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

        .tela-travada-lista > .sit-rolagem {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
        }

        /*  O cabeçalho da tabela fica preso enquanto a lista rola por dentro. */
        .tela-travada-lista .sit-tabela thead th {
            position: sticky;
            top: 0;
            z-index: 1;
        }

@media (max-width: 900px) {
    .tela-travada {
        height: auto;
    }

        .tela-travada > .tela-travada-lista {
            min-height: 0;
            overflow: visible;
        }

            .tela-travada-lista > .sit-rolagem {
                max-height: 60vh;
            }
}

/* ---- A TV: página dedicada, sem a coluna ------------------------------- */
/*  O cabeçalho próprio da TV: a marca à esquerda, o relógio e o "próxima em" à direita, e
    o Início. Abaixo, o mesmo miolo do painel. As três listas ficam lado a lado sempre que
    couberem (1920 de largura sobra); em tela estreita empilham. Sergio - 17/09/2026        */
/*  A tela é a altura da TV, e ponto: cabeçalho, Dropbox e réguas têm a altura que têm; só
    as listas absorvem o que sobra e rolam POR DENTRO. A página nunca ganha barra de rolagem
    — era assim no BackupCentral (ADR-019 de lá), e com centenas de clientes sem backup é o
    que impede a lista de empurrar tudo para fora da tela.                                 */
/*  A TV trava na altura da tela, como o BackupCentral (ADR-019 de lá, copiado aqui):
      - a tela tem altura DEFINIDA (100vh) e rola por fora só como escape (overflow-y auto):
        em tela alta nada rola e as listas rolam por dentro; em janela média, onde o bloco
        fixo (Dropbox + duas réguas + o piso de 18rem das listas) não cabe, a página rola em
        vez de recortar o card;
      - o bloco fixo nunca encolhe (flex 0 0 auto);
      - só o grid das listas absorve o que sobra (flex 1) e tem um piso de 18rem (~5 linhas);
      - cada lista é uma coluna flex com min-height 0 e overflow hidden, e a rolagem (o
        body) é o único elemento que rola. Sem o min-height 0 na cadeia o scroll interno
        não funciona; sem o overflow hidden o flex incha até o conteúdo.                  */
.tv-tela {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 24px 14px;
    background-color: var(--bg-page);
}

    .tv-tela > * {
        flex: 0 0 auto;
    }

    .tv-tela > .painel-listas-tv {
        flex: 1 1 auto;
        min-height: 18rem;
        overflow: hidden;
    }

    .tv-tela .painel-lista {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }


.tv-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-table);
}

.tv-marca {
    display: flex;
    align-items: center;
    gap: 14px;
}

    .tv-marca img {
        width: 44px;
        height: 44px;
    }

.tv-marca-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

    .tv-marca-txt b {
        font-size: 20px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-primary);
    }

    .tv-marca-txt span {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

.tv-cabeca-dir {
    display: flex;
    align-items: center;
    gap: 22px;
}

/*  Início em cima, tema embaixo: dois botões da mesma largura, um sobre o outro. */
.tv-botoes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .tv-botoes > .sit-btn {
        justify-content: flex-start;
    }

    .tv-botoes .tema-claro-so,
    .tv-botoes .tema-escuro-so {
        display: inline-flex;
        align-items: center;
    }

.tv-relogio {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}

.tv-relogio-rot {
    font-size: 11px;
    color: var(--text-muted);
}

.tv-relogio-hora {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.tv-relogio-data {
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.tv-proxima {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

    .tv-proxima b {
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
    }

.tv-pulso {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--meta-sucesso-texto);
    animation: tv-pulsar 2s ease-in-out infinite;
}

@keyframes tv-pulsar {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/*  As listas da TV (proposta-listas-tv.html, aprovada em 17/09/2026): o cartão inteiro é a
    lista, como no BackupCentral. O título é a faixa do cartão com a borda embaixo; a tabela
    vai de borda a borda (a moldura de dentro sai — a moldura é o cartão); só o corpo rola,
    com a barra fininha na borda e o cabeçalho da tabela preso; o código é coluna própria,
    em mono e apagado; as linhas um pouco mais altas; sem zebra — na TV é ruído.        */
.painel-lista-tv {
    padding: 0;
    gap: 0;
}

    .painel-lista-tv > .sit-card-cabeca,
    .painel-lista-tv > .sit-card-titulo {
        flex: 0 0 auto;
        padding: 13px 18px 11px;
        border-bottom: 1px solid var(--border-table);
    }

    .painel-lista-tv .sit-card-titulo small {
        display: block;
        margin: 3px 0 0;
        font-size: 11px;
        color: var(--text-muted);
    }

    .painel-lista-tv .painel-rolagem {
        border: 0;
        border-radius: 0;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--text-primary) 22%, transparent) transparent;
    }

        .painel-lista-tv .painel-rolagem::-webkit-scrollbar {
            width: 8px;
        }

        .painel-lista-tv .painel-rolagem::-webkit-scrollbar-track {
            background: transparent;
        }

        .painel-lista-tv .painel-rolagem::-webkit-scrollbar-thumb {
            background: color-mix(in srgb, var(--text-primary) 22%, transparent);
            border-radius: 999px;
        }

    .painel-lista-tv .sit-tabela thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 8px 14px;
    }

    .painel-lista-tv .sit-tabela tbody td {
        padding: 9px 14px;
        vertical-align: middle;
        line-height: 1.3;
    }

    .painel-lista-tv .sit-tabela th:first-child,
    .painel-lista-tv .sit-tabela td:first-child {
        padding-left: 18px;
    }

    .painel-lista-tv .sit-tabela th:last-child,
    .painel-lista-tv .sit-tabela td:last-child {
        padding-right: 18px;
    }

    .painel-lista-tv .sit-tabela tbody tr:last-child td {
        border-bottom: 0;
    }

    .tv-tela .painel-lista-tv .sit-tabela tbody tr:nth-child(even) td {
        background-color: transparent;
    }

    .tv-tela .painel-lista-tv .sit-tabela tbody tr:hover td {
        background-color: color-mix(in srgb, var(--text-primary) 4%, transparent);
    }

    .painel-lista-tv .painel-lista-ok,
    .painel-lista-tv > .sit-sub {
        margin: 14px 18px;
    }

.painel-codigo {
    width: 1%;
    white-space: nowrap;
    font-family: ui-monospace, 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.painel-listas-tv {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

    /*  Nunca rolagem horizontal: abaixo da largura em que três tabelas cabem inteiras o grid
        empilha (media abaixo); dentro da lista só se rola para baixo.                    */
    .painel-listas-tv .painel-rolagem {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
        overflow-x: hidden;
    }

/*  Estreito: a tela solta a altura e a página rola; as três listas empilham em coluna única,
    cada uma com 18rem fixos e a rolagem própria por dentro. O limiar é a largura em que as
    três tabelas ainda cabem SEM rolagem horizontal (o BackupCentral usava 960 com colunas
    mais magras; as nossas, com o nome do cliente inteiro, pedem 1200).                  */
@media (max-width: 1200px) {
    .tv-tela {
        height: auto;
        min-height: 100vh;
        padding: 14px 16px;
    }

        .tv-tela > .painel-listas-tv {
            grid-template-columns: 1fr;
            flex: 0 0 auto;
            min-height: auto;
            overflow: visible;
        }

        .tv-tela .painel-lista {
            height: 18rem;
        }

    .tv-cabeca-dir {
        gap: 12px;
    }

    .tv-relogio-hora {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tv-pulso {
        animation: none;
    }
}

@media (max-width: 900px) {
    .painel-listas {
        grid-template-columns: 1fr;
    }
}

.sit-quebra {
    overflow-wrap: anywhere;
    white-space: normal;
    max-width: 52ch;
}

.sit-leitura {
    margin: 14px 0 0;
    font-size: 11.5px;
    color: var(--text-secondary);
    text-align: right;
}

/* ==================================================================== */
/* Seletor, filtros segmentados, busca e a barra de ferramentas          */
/* ==================================================================== */
.hub-ferramentas {
    display: flex;
    align-items: center;
    gap: 10px 12px;
    flex-wrap: wrap;
    margin-bottom: var(--espaco-listagem);
}

.hub-ferramentas-sobra {
    flex: 1 1 auto;
}

.hub-seletor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 5px 5px 12px;
    border-radius: 6px;
    background-color: var(--dias-neutro-bg);
    flex-shrink: 0;
}

.hub-seletor-rotulo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.hub-seletor-campo {
    border: 0;
    outline: none;
    background-color: var(--vitrine-card-bg);
    border-radius: 6px;
    height: 26px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: 0 2px 6px var(--shadow-card);
    max-width: 100%;
}

    .hub-seletor-campo:focus-visible {
        outline: 2px solid var(--hub-foco);
        outline-offset: 1px;
    }

    input.hub-seletor-campo {
        cursor: text;
        font-weight: 500;
        width: 90px;
    }

/*  A largura FIXA do seletor (componente Seletor): o <select> e uma cópia invisível de
    cada opção (.hub-seletor-molde) dividem a MESMA célula de um grid. A célula fica com
    a largura da opção mais larga — com o padding do campo e a folga da seta — e o campo
    a preenche: trocar a opção não mexe mais no tamanho. Com max-width (LarguraMaxima)
    a célula para ali e o texto escolhido corta com reticências.                       */
.hub-seletor-medida {
    display: inline-grid;
    grid-template-columns: minmax(0, auto);
    min-width: 0;
}

    .hub-seletor-medida > * {
        grid-area: 1 / 1;
        min-width: 0;
    }

    .hub-seletor-medida > .hub-seletor-campo {
        width: 100%;
        overflow: hidden;
    }

.hub-seletor-molde {
    visibility: hidden;
    height: 0;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 32px 0 10px;
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
}

/* ==================================================================== */
/* A lista do <select>, desenhada pela PÁGINA — como no Partner Hub      */
/*                                                                       */
/* Por padrão o navegador abre a lista como popup do sistema, FORA do     */
/* documento: ela não recebe o nosso CSS, e a linha destacada saía no     */
/* azul do Windows. O `appearance: base-select` traz o popup para dentro  */
/* da página, e aí `option` aceita cor, cursor e estado.                  */
/*                                                                       */
/* O elemento CONTINUA sendo um <select>: teclado, semântica, leitor de   */
/* tela e o @bind do Blazor seguem funcionando. TUDO dentro do @supports: */
/* em navegador sem o recurso nada entra, e o seletor fica como hoje.     */
/* ==================================================================== */
@supports (appearance: base-select) {

    .hub-seletor-campo,
    .hub-seletor-campo::picker(select) {
        appearance: base-select;
    }

    /*  Optar pelo base-select desliga o desenho nativo do campo, e junto vai a
        seta. O botão vira caixa comum: a distribuição do texto e do ícone é nossa. */
    select.hub-seletor-campo {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        border: 0;
    }

    /*  O botão explícito do Seletor (<button><selectedcontent>): é ele que corta o texto
        escolhido com reticências quando há LarguraMaxima — o conteúdo que o navegador
        gera sozinho não aceita overflow, e a seta era o que sumia.                     */
    select.hub-seletor-campo > button {
        all: unset;
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*  A seta que substitui a nativa. Gira ao abrir; nunca encolhe. */
    .hub-seletor-campo::picker-icon {
        flex-shrink: 0;
        color: var(--text-muted);
        transition: transform 0.15s ease;
    }

    .hub-seletor-campo:open::picker-icon {
        transform: rotate(180deg);
    }

    /*  A lista: cartão sobre o conteúdo, na mesma linguagem dos cartões das telas. */
    .hub-seletor-campo::picker(select) {
        margin-top: 4px;
        padding: 4px;
        border: 1px solid var(--border-table);
        border-radius: 8px;
        background-color: var(--bg-table);
        box-shadow: 0 8px 24px var(--shadow-card);
    }

    .hub-seletor-campo option {
        padding: 6px 10px;
        border-radius: 5px;
        background-color: transparent;
        color: var(--text-primary);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
    }

    /*  O tique da opção escolhida sai: quem diz qual está escolhida é o fundo. */
    .hub-seletor-campo option::checkmark {
        display: none;
    }

    .hub-seletor-campo option:hover {
        background-color: var(--hub-superficie-2);
    }

    /*  A escolhida: fundo TINGIDO com a cor de foco, o mesmo vocabulário de "ativo"
        da pílula de contagem do .hub-filtro-ativo.                                 */
    .hub-seletor-campo option:checked {
        background-color: color-mix(in srgb, var(--hub-foco) 16%, transparent);
        color: var(--text-primary);
        font-weight: 700;
    }

    .hub-seletor-campo option:focus-visible {
        outline: 2px solid var(--hub-foco);
        outline-offset: -2px;
    }

    @media (prefers-reduced-motion: reduce) {
        .hub-seletor-campo::picker-icon {
            transition: none;
        }
    }
}

.hub-filtros {
    display: inline-flex;
    padding: 5px;
    border-radius: 6px;
    background-color: var(--dias-neutro-bg);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 2px;
}

.hub-filtro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 26px;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .hub-filtro:hover {
        color: var(--text-primary);
    }

.hub-filtro-ativo,
.hub-filtro-ativo:hover {
    background-color: var(--vitrine-card-bg);
    color: var(--text-primary);
    box-shadow: 0 2px 6px var(--shadow-card);
}

.hub-filtro:focus-visible {
    outline: 2px solid var(--hub-foco);
    outline-offset: 1px;
}

.hub-filtro-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--text-primary) 12%, transparent);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
}

.hub-filtro-ativo .hub-filtro-contador {
    background-color: color-mix(in srgb, var(--vitrine-accent) 16%, transparent);
    color: var(--vitrine-accent);
}

.hub-busca {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 240px;
    max-width: 440px;
}

    .hub-busca svg {
        position: absolute;
        left: 12px;
        width: 16px;
        height: 16px;
        color: var(--text-secondary);
        pointer-events: none;
    }

    /*  Mesmo raio (6px) e mesma altura (36px = campo de 26 + 5 de folga de cada lado) do
        .hub-seletor ao lado: os dois dividem a barra de ferramentas, e diferença de
        forma entre vizinhos se enxerga mais do que a mesma diferença isolada. A pílula
        que já esteve aqui é a do topo do Hub, onde a busca fica sozinha.             */
    .hub-busca input {
        width: 100%;
        height: 36px;
        padding: 0 14px 0 36px;
        border-radius: 6px;
        border: 1px solid var(--vitrine-card-border);
        background-color: var(--vitrine-card-bg);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 13px;
        box-shadow: 0 2px 6px var(--shadow-card);
    }

        .hub-busca input:focus-visible {
            outline: 2px solid var(--hub-foco);
            outline-offset: 1px;
        }

        .hub-busca input::placeholder {
            color: var(--text-muted);
        }

.hub-contagem {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.hub-nota {
    font-size: 12px;
    color: var(--text-muted);
}

/* ==================================================================== */
/* Diálogo — X sempre no canto e clique fora NÃO fecha                   */
/* ==================================================================== */
.hub-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: rgba(15, 25, 36, 0.55);
    animation: hub-veu-dialogo 0.18s ease;
}

@keyframes hub-veu-dialogo {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hub-dialogo {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 430px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 22px;
    border-radius: 14px;
    background-color: var(--vitrine-card-bg);
    border: 1px solid var(--border-col);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
    animation: hub-dialogo-entrada 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes hub-dialogo-entrada {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.hub-dialogo-largo {
    max-width: 940px;
}

/*  O X é o PRIMEIRO FILHO do cartão, sticky: no diálogo que rola ele
    continua à vista.                                                     */
.hub-dialogo-fechar {
    position: sticky;
    top: 0;
    z-index: 2;
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: -6px -6px -6px 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background-color: var(--vitrine-card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .hub-dialogo-fechar:not(:disabled):hover {
        background-color: var(--border-col);
        color: var(--text-primary);
    }

    .hub-dialogo-fechar svg {
        width: 17px;
        height: 17px;
    }

.hub-dialogo-titulo {
    margin: 0;
    font-size: 16.5px;
    font-weight: 750;
    letter-spacing: -0.2px;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.hub-dialogo-texto {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.hub-dialogo-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

/* ==================================================================== */
/* Painéis de estado: carregando, vazio, erro, desatualizado             */
/* ==================================================================== */
.painel-carregando {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 60vh;
    padding: 40px 20px;
    text-align: center;
}

.painel-carregando-curto {
    min-height: 0;
    padding: 28px 20px;
}

.painel-carregando-marca {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 44px;
}

    .painel-carregando-marca span {
        display: block;
        width: 10px;
        height: 100%;
        border-radius: 4px;
        transform-origin: bottom center;
        animation: painel-carregando-onda 1.15s ease-in-out infinite;
    }

        /*  A marca Partner deitada: âmbar no meio, azul à esquerda, rubro à direita. */
        .painel-carregando-marca span:nth-child(1) { animation-delay: 0s;    background-color: var(--partner-azul); }
        .painel-carregando-marca span:nth-child(2) { animation-delay: 0.11s; background-color: var(--partner-azul); }
        .painel-carregando-marca span:nth-child(3) { animation-delay: 0.22s; background-color: var(--partner-ambar); }
        .painel-carregando-marca span:nth-child(4) { animation-delay: 0.33s; background-color: var(--partner-rubro); }
        .painel-carregando-marca span:nth-child(5) { animation-delay: 0.44s; background-color: var(--partner-rubro); }

@keyframes painel-carregando-onda {
    0%, 100% { transform: scaleY(0.3); opacity: 0.5; }
    50% { transform: scaleY(1); opacity: 1; }
}

.painel-carregando-texto {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--text-primary);
}

.painel-carregando-detalhe {
    margin: 0;
    max-width: 380px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
}

.painel-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin: var(--espaco-listagem) 0;
    padding: 46px 24px 50px 24px;
    text-align: center;
    background-color: var(--vitrine-card-bg);
    border: 1px solid var(--vitrine-card-border);
    border-radius: 14px;
    animation: painel-vazio-entrada 0.4s ease backwards;
}

@keyframes painel-vazio-entrada {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.painel-vazio-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background-color: var(--vazio-circulo);
    color: var(--vazio-icone);
}

    .painel-vazio-ico svg {
        width: 38px;
        height: 38px;
    }

.painel-vazio-titulo {
    font-size: clamp(19px, 1.6vw, 25px);
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--text-primary);
}

.painel-vazio-desc {
    max-width: 48ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.painel-vazio-acoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

.erro-conexao {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.erro-conexao-card {
    --erro-tom: #DC3545;
    --erro-tom-suave: rgba(220, 53, 69, 0.10);
    --erro-tom-anel: rgba(220, 53, 69, 0.25);
    --erro-faixa: linear-gradient(90deg, #DC3545 0%, #F0A030 50%, #DC3545 100%);
    width: 100%;
    max-width: 460px;
    background: var(--bg-table);
    border: 1px solid var(--border-col);
    border-radius: 14px;
    padding: 40px 32px 32px;
    text-align: center;
    box-shadow: 0 10px 30px var(--shadow-card);
    position: relative;
    overflow: hidden;
}

    .erro-conexao-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: var(--erro-faixa);
        background-size: 200% 100%;
        animation: erro-conexao-shimmer 3s linear infinite;
    }

/*  Sessão (401): índigo — pedido de credencial, não falha. */
.erro-conexao-card.erro-conexao-sessao {
    --erro-tom: #3D3BC4;
    --erro-tom-suave: rgba(61, 59, 196, 0.10);
    --erro-tom-anel: rgba(61, 59, 196, 0.25);
    --erro-faixa: linear-gradient(90deg, #3D3BC4 0%, #0B6BD6 50%, #3D3BC4 100%);
}

html.dark-theme .erro-conexao-card.erro-conexao-sessao {
    --erro-tom: #8E8BFF;
    --erro-tom-suave: rgba(142, 139, 255, 0.16);
    --erro-tom-anel: rgba(142, 139, 255, 0.30);
    --erro-faixa: linear-gradient(90deg, #8E8BFF 0%, #4DA3FF 50%, #8E8BFF 100%);
}

/*  Permissão (403): âmbar — estado definitivo enquanto não liberarem. */
.erro-conexao-card.erro-conexao-permissao {
    --erro-tom: #C25E0B;
    --erro-tom-suave: rgba(194, 94, 11, 0.10);
    --erro-tom-anel: rgba(194, 94, 11, 0.25);
    --erro-faixa: linear-gradient(90deg, #C25E0B 0%, #E8B04B 50%, #C25E0B 100%);
}

html.dark-theme .erro-conexao-card.erro-conexao-permissao {
    --erro-tom: #FFA052;
    --erro-tom-suave: rgba(255, 160, 82, 0.16);
    --erro-tom-anel: rgba(255, 160, 82, 0.30);
    --erro-faixa: linear-gradient(90deg, #FFA052 0%, #E8B04B 50%, #FFA052 100%);
}

@keyframes erro-conexao-shimmer {
    0% { background-position: 0% 0; }
    100% { background-position: -200% 0; }
}

.erro-conexao-icone {
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
    color: var(--erro-tom);
    background: var(--erro-tom-suave);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .erro-conexao-icone::after {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 2px solid var(--erro-tom-anel);
        animation: erro-conexao-pulse 2.4s ease-out infinite;
    }

    .erro-conexao-icone svg {
        width: 52px;
        height: 52px;
    }

@keyframes erro-conexao-pulse {
    0% { transform: scale(1); opacity: 0.9; }
    70% { transform: scale(1.18); opacity: 0; }
    100% { transform: scale(1.18); opacity: 0; }
}

.erro-conexao-titulo {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.erro-conexao-subtitulo {
    margin: 0 0 20px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.erro-conexao-detalhes {
    text-align: left;
    margin: 0 0 22px;
    background: var(--bg-page);
    border: 1px solid var(--border-col);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
}

    .erro-conexao-detalhes summary {
        cursor: pointer;
        color: var(--text-secondary);
        font-weight: 500;
        user-select: none;
    }

    .erro-conexao-detalhes code {
        display: block;
        margin-top: 8px;
        padding: 8px 10px;
        background: rgba(220, 53, 69, 0.08);
        border-radius: 6px;
        color: #B02A37;
        font-family: Consolas, "Courier New", monospace;
        font-size: 12px;
        word-break: break-word;
        white-space: pre-wrap;
    }

html.dark-theme .erro-conexao-detalhes code {
    background: rgba(220, 53, 69, 0.18);
    color: #FF8A95;
}

.erro-conexao-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.erro-conexao-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 200px;
    padding: 11px 22px;
    border: none;
    border-radius: 8px;
    background: var(--bg-table-caption);
    color: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.18s ease, transform 0.08s ease, box-shadow 0.18s ease;
    box-shadow: 0 4px 12px rgba(42, 63, 84, 0.18);
}

    .erro-conexao-botao:hover:not(:disabled) {
        background: #3D5C7C;
        box-shadow: 0 6px 16px rgba(42, 63, 84, 0.28);
    }

    .erro-conexao-botao:disabled {
        cursor: wait;
        opacity: 0.85;
    }

    .erro-conexao-botao svg {
        width: 18px;
        height: 18px;
    }

.erro-conexao-botao-secundario {
    min-width: 150px;
    background: transparent;
    border: 1px solid var(--vitrine-card-border);
    color: var(--text-secondary);
    box-shadow: none;
}

    .erro-conexao-botao-secundario:hover:not(:disabled) {
        background: var(--bg-page);
        color: var(--text-primary);
        box-shadow: none;
    }

.erro-conexao-rodape {
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.painel-desatualizado {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 var(--espaco-listagem) 0;
    padding: 12px 16px;
    border-radius: 10px;
    background-color: var(--desatualizado-bg);
    border: 1px solid var(--desatualizado-borda);
}

.painel-desatualizado-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--desatualizado-acento);
    color: var(--desatualizado-ico-texto);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

.painel-desatualizado-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

    .painel-desatualizado-texto strong {
        font-size: 15px;
        font-weight: 700;
        color: var(--desatualizado-titulo);
    }

    .painel-desatualizado-texto > span {
        font-size: 13px;
        color: var(--desatualizado-detalhe);
    }

/* ==================================================================== */
/* A espera do comando remoto                                            */
/* ==================================================================== */
.espera {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--vitrine-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--vitrine-accent) 30%, transparent);
}

.espera-pulso {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--vitrine-accent);
    flex: 0 0 10px;
    animation: espera-pulso 1.2s ease-in-out infinite;
}

@keyframes espera-pulso {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.15); opacity: 1; }
}

.espera-txt {
    flex: 1 1 200px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

    .espera-txt small {
        margin-left: 6px;
        font-weight: 500;
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

.desfecho {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-primary);
}

    .desfecho small {
        font-size: 12px;
        color: var(--text-muted);
    }

.pre {
    margin: 0;
    padding: 12px 14px;
    border-radius: 8px;
    background-color: var(--hub-superficie-2);
    color: var(--text-primary);
    font-family: ui-monospace, 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 420px;
    overflow: auto;
}

details.detalhes summary {
    cursor: pointer;
    font-size: 12.5px;
    color: var(--text-secondary);
    user-select: none;
}

details.detalhes[open] summary {
    margin-bottom: 8px;
}

/* ==================================================================== */
/* T-SQL: editor e grade de resultado                                    */
/* ==================================================================== */
.tsql-editor {
    width: 100%;
    min-height: 220px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-table);
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: ui-monospace, 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    tab-size: 4;
}

    .tsql-editor:focus-visible {
        outline: 2px solid var(--hub-foco);
        outline-offset: 1px;
    }

    .tsql-editor:disabled {
        opacity: 0.7;
    }

.tsql-acoes {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
}

/*  A grade do result set: mono, compacta, cabeçalho preso no topo da
    rolagem. Não herda o "primeira coluna cresce" da sit-tabela: aqui toda
    coluna mede o próprio conteúdo.                                        */
.grid-rolagem {
    overflow: auto;
    max-height: 70vh;
    border: 1px solid var(--border-table);
    border-radius: 8px;
}

.sit-tabela-grid {
    min-width: 0;
    font-family: ui-monospace, 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
    font-size: 12px;
}

    .sit-tabela-grid thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 7px 10px;
        text-transform: none;
        letter-spacing: 0;
        font-size: 11.5px;
        font-family: ui-monospace, 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
        border-radius: 0 !important;
    }

    .sit-tabela-grid tbody td {
        padding: 4px 10px;
        white-space: nowrap;
        max-width: 480px;
        overflow: hidden;
        text-overflow: ellipsis;
        /*  Filete vertical entre as colunas: na grade de resultado o olho segue a
            coluna por dezenas de linhas, e sem a linha uma célula vazia se confunde
            com a vizinha. Só aqui — a tabela de listagem continua sem.          */
        border-right: 1px solid var(--border-table);
    }

    .sit-tabela-grid thead th {
        border-right: 1px solid rgba(255, 255, 255, 0.18);
    }

    .sit-tabela-grid tbody td:last-child,
    .sit-tabela-grid thead th:last-child {
        border-right: 0;
    }

    .sit-tabela-grid .grid-nulo {
        color: var(--text-muted);
        font-style: italic;
    }

    .sit-tabela-grid .grid-indice {
        color: var(--text-muted);
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

.grid-paginacao {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ==================================================================== */
/* Log do cliente                                                        */
/* ==================================================================== */
.log-visor {
    max-height: 70vh;
    overflow: auto;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-table);
    background-color: var(--bg-page);
    font-family: ui-monospace, 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
}

.log-linha {
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    gap: 0 10px;
    padding: 1px 0;
    color: var(--text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.log-hora {
    color: var(--text-muted);
    white-space: nowrap;
}

.log-nivel {
    font-weight: 700;
    white-space: nowrap;
    min-width: 6ch;
}

.log-origem {
    color: var(--text-secondary);
    white-space: nowrap;
}

.log-erro .log-nivel { color: var(--desatualizado-acento); }
.log-erro { background-color: color-mix(in srgb, var(--desatualizado-acento) 7%, transparent); }
.log-aviso .log-nivel { color: var(--meta-progresso-texto); }
.log-info .log-nivel { color: var(--meta-sucesso-texto); }
.log-detalhe { color: var(--text-secondary); }
.log-detalhe .log-nivel { color: var(--text-muted); }

/* ==================================================================== */
/* Formulário e login                                                    */
/* ==================================================================== */
.campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .campo > span {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-rotulo);
    }

    .campo input,
    .campo select {
        height: 38px;
        padding: 0 12px;
        border-radius: 8px;
        border: 1px solid var(--border-table);
        background-color: var(--bg-page);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 14px;
    }

        .campo input:focus-visible,
        .campo select:focus-visible {
            outline: 2px solid var(--hub-foco);
            outline-offset: 1px;
        }

/* ==================================================================== */
/* A home pública (raiz do domínio) — a marca, uma frase e o Entrar    */
/* ==================================================================== */
.home-tela {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    /*  O fundo da coluna do Hub, aqui em tela cheia: é a mesma casa. O gradiente
        radial tira a chapa lisa sem virar ilustração.                        */
    background-color: var(--bg-header);
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(58, 162, 235, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(249, 181, 72, 0.16) 0%, transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.14) 100%);
}

.home-cartao {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 340px;
    padding: 40px 32px 28px;
    border-radius: 16px;
    background-color: var(--vitrine-card-bg);
    border: 1px solid var(--vitrine-card-border);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    text-align: center;
    position: relative;
    overflow: hidden;
}

    /*  A tira da marca, como no cartão do login. */
    .home-cartao::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: linear-gradient(90deg,
            var(--partner-ambar) 0%, var(--partner-ambar) 33.33%,
            var(--partner-azul) 33.33%, var(--partner-azul) 66.66%,
            var(--partner-rubro) 66.66%, var(--partner-rubro) 100%);
    }

.home-logo {
    width: 84px;
    height: auto;
    display: block;
}

.home-marca {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 7px;
}

    .home-marca b {
        font-size: 30px;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text-primary);
    }

    .home-marca span {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 4px;
        color: var(--text-muted);
    }

.home-botao {
    min-width: 180px;
    height: 42px;
    justify-content: center;
    font-size: 14px;
    margin-top: 6px;
}

.home-pe {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
}

    .home-pe b {
        font-weight: 650;
        color: var(--text-secondary);
    }

.login-tela {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.login-cartao {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 34px 30px 30px;
    border-radius: 14px;
    background-color: var(--vitrine-card-bg);
    border: 1px solid var(--vitrine-card-border);
    box-shadow: 0 10px 30px var(--shadow-card);
}

    /*  A tira da marca no topo do cartão: os três cubos, na ordem da logo. */
    .login-cartao::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: linear-gradient(90deg,
            var(--partner-ambar) 0%, var(--partner-ambar) 33.33%,
            var(--partner-azul) 33.33%, var(--partner-azul) 66.66%,
            var(--partner-rubro) 66.66%, var(--partner-rubro) 100%);
    }

.login-marca {
    display: flex;
    align-items: center;
    gap: 13px;
}

    .login-marca img {
        width: 46px;
        height: auto;
        display: block;
    }

.login-marca-nome {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

    .login-marca-nome b {
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -0.015em;
        color: var(--text-primary);
    }

    .login-marca-nome span {
        margin-top: 5px;
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 3.2px;
        color: var(--text-muted);
    }

.login-titulo {
    margin: 0;
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -0.018em;
    color: var(--text-primary);
}

.login-desc {
    margin: -12px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-lembrar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

    .login-lembrar input {
        width: 15px;
        height: 15px;
        accent-color: var(--vitrine-accent);
    }

.login-botao {
    height: 40px;
    justify-content: center;
    font-size: 14px;
}

.login-pe {
    text-align: center;
    font-size: 11.5px;
    color: var(--text-muted);
}

    .login-pe b {
        font-weight: 650;
        color: var(--text-secondary);
    }

/* ==================================================================== */
/* Tela estreita: a coluna vira gaveta                                   */
/* ==================================================================== */
@media (max-width: 900px) {

    .hub-tela {
        flex-direction: column;
        align-items: stretch;
    }

    .hub-barra-estreita {
        position: sticky;
        top: 0;
        z-index: 30;
        display: flex;
        align-items: center;
        gap: 12px;
        height: 52px;
        padding: 0 12px;
        background-color: var(--bg-header);
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.10));
        color: #fff;
    }

    .hub-menu-botao {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background-color: rgba(255, 255, 255, 0.10);
        color: #fff;
        cursor: pointer;
    }

        .hub-menu-botao svg {
            width: 20px;
            height: 20px;
        }

    .hub-barra-marca {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        text-decoration: none;
        color: inherit;
        min-width: 0;
    }

        .hub-barra-marca img {
            width: 28px;
            height: auto;
            display: block;
            flex: 0 0 28px;
        }

        .hub-barra-marca span {
            font-size: 15px;
            font-weight: 400;
            letter-spacing: -0.01em;
            white-space: nowrap;
        }

        .hub-barra-marca b {
            font-weight: 700;
        }

    .hub-coluna {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 268px;
        flex: 0 0 268px;
        z-index: 45;
        transform: translateX(-100%);
        transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
        border-radius: 0 12px 12px 0;
        padding: 12px 12px 14px;
    }

    .hub-gaveta-toggle:checked ~ .hub-coluna {
        transform: none;
        box-shadow: 0 0 44px rgba(0, 0, 0, 0.45);
    }

    .hub-fechar {
        display: inline-flex;
    }

    .hub-veu {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 40;
        background-color: rgba(8, 16, 24, 0.55);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.24s ease;
    }

    .hub-gaveta-toggle:checked ~ .hub-veu {
        opacity: 1;
        pointer-events: auto;
    }

    .hub-conteudo {
        min-height: 0;
    }

    .hub-corpo {
        padding: 0 14px 20px;
    }

    .hub-pagina {
        padding: 18px 0 0;
    }

    .hub-cabeca {
        padding: 16px 0 12px;
    }

    .sit-tabela {
        min-width: 640px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hub-coluna,
    .hub-veu,
    .hub-card,
    .hub-card-ico,
    .hub-card-seta,
    .hub-filtro {
        transition: none;
    }

    .hub-modal,
    .hub-dialogo,
    .painel-vazio,
    .erro-conexao-card::before,
    .erro-conexao-icone::after,
    .espera-pulso {
        animation: none;
    }

    .painel-carregando-marca span {
        animation-duration: 3s;
    }
}