/* ========================================================================
   DESIGN SYSTEM - MÓDULO ANALÍTICO (EXPLOSÃO DE INSUMOS)
   Atualizado por P-UX-DESIGN-SYSTEM-APPLY-ANALITICO-WORKSPACE-01:
   tokens --ds-* adicionados, cabeçalho de tabela DS, tipografia Inter.
   ======================================================================== */

#aba-analitico {
    animation:      fadeIn 0.3s ease-in-out;
    display:        flex;
    flex-direction: column;
    gap:            20px;
    padding:        10px 5px;
    font-family:    var(--ds-font-family);
}

/* 1. Estilização dos Cards de Resumo */
.analitico-card {
    background:    var(--bg-surface);
    border:        1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding:       var(--ds-card-padding-compact);
    box-shadow:    var(--ds-shadow-sm);
    font-family:   var(--ds-font-family);
    transition:    transform 0.2s ease, box-shadow 0.2s ease;
    cursor:        default;
}

.analitico-card:hover {
    transform:  translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* 2. Títulos das Seções (Materiais, MO, Equipamentos) */
.analitico-secao-titulo {
    display:        flex;
    align-items:    center;
    gap:            10px;
    padding-bottom: 8px;
    border-bottom:  2px solid var(--border-light);
    margin-bottom:  var(--ds-space-4);
    color:          var(--color-primary);
    font-family:    var(--ds-font-family);
    font-size:      var(--ds-font-size-lg);
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 3. Tabela Analítica */
#aba-analitico table {
    font-family:   var(--ds-font-family);
    border-radius: var(--radius-md);
    overflow:      hidden;
    border:        1px solid var(--border-light);
    box-shadow:    var(--ds-shadow-sm);
}

/* Cabeçalho: dark navy para visual profissional.
 * Color usa override de precedência: resumo-table TH tem color:#64748b inline —
 * necessário para garantir texto branco legível sobre fundo navy. */
#aba-analitico thead th {
    background-color: var(--ds-navy);
    color:            var(--ds-text-inverse) !important;
    font-family:      var(--ds-font-family);
    font-size:        10px;
    padding:          10px 12px;
    border-bottom:    2px solid var(--ds-navy-dark);
    text-transform:   uppercase;
    letter-spacing:   0.05em;
}

#aba-analitico tbody tr:hover {
    background-color: var(--color-primary-light); /* Destaque azul ao passar o mouse */
}

#aba-analitico td {
    font-family:         var(--ds-font-family);
    font-variant-numeric: tabular-nums;
    padding:             10px 12px;
    font-size:           12px;
    border-bottom:       1px solid var(--border-light);
}

/* 4. Pílulas de Unidade */
.unid-pill {
    background:    var(--ds-bg-muted);
    padding:       2px 6px;
    border-radius: var(--ds-radius-sm);
    font-size:     10px;
    font-weight:   700;
    color:         var(--ds-text-secondary);
    font-family:   var(--ds-font-family);
}

/* Animação de entrada */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Customização para Scrollbar dentro do Analítico */
.orcamento-tabela-container::-webkit-scrollbar {
    width: 6px;
}

.orcamento-tabela-container::-webkit-scrollbar-thumb {
    background:    var(--border-medium);
    border-radius: 10px;
}

/* ---- Cabeçalho do módulo: font-family ausente do inline style do JS ---- */
.analitico-header {
    font-family: var(--ds-font-family);
}

/* ---- Botões pós-processamento (PDF Memorial, PDF Compras, Exportar, Importar):
   font-family e letter-spacing ausentes do inline style.cssText do JS.
   onmouseover/onmouseout manipulam apenas background via this.style.background —
   letter-spacing e font-family não são tocados pelo JS. ---- */
#analitico-acoes-pos-processamento button {
    font-family:    var(--ds-font-family);
    letter-spacing: 0.2px;
}

/* ---- Botões principais (Extração Global e Extrair Ítem):
   Inline style define padding, font-weight, border-radius, background, color,
   cursor, display, align-items, gap, font-size, box-shadow, transition.
   font-family e letter-spacing ausentes — CSS vence. ---- */
#btn-gerar-analitico,
#btn-gerar-analitico-item {
    font-family:    var(--ds-font-family);
    letter-spacing: 0.3px;
}

/* ---- Select de item do orçamento:
   Inline style define border, border-radius, padding, font-size, color,
   background, outline. font-family ausente — CSS vence. ---- */
#analitico-select-item {
    font-family: var(--ds-font-family);
}

/* ---- Painel de aguardando (mensagem inicial antes de extrair):
   Inline style define background, border, border-radius, padding, color,
   font-size, display, align-items, justify-content, gap, box-shadow.
   font-family ausente — CSS vence. ---- */
#analitico-status-aguardando {
    font-family: var(--ds-font-family);
}

/* ================================================================
   DESIGN SYSTEM — APPLY ANALITICO PRO REFINE
   (P-UX-DESIGN-SYSTEM-APPLY-ANALITICO-PRO-REFINE-01)
   Refinamento profissional: accent-stripe no header via ::before,
   hover lift em todos os botões, foco acessível, empty state vertical,
   select focus ring. Escopo: #aba-analitico + módulo Analítico.
   Sem overrides de precedencia forcada — todas as propriedades livres de JS.
   ================================================================ */

/* 1. Header: top-accent stripe reeq-style via ::before.
 * position:relative ausente do inline (display:flex; flex-direction:column; border; padding...).
 * ::before absolutamente posicionado no topo — não interfere no layout flex dos filhos.
 * border-radius: 9px = raio efetivo do content-box (border-radius:10px - border:1px). */
.analitico-header {
    position: relative;
}

.analitico-header::before {
    content:       '';
    position:      absolute;
    top:           0;
    left:          0;
    right:         0;
    height:        4px;
    background:    var(--ds-navy);
    border-radius: 9px 9px 0 0;
}

/* 2. Empty state: layout vertical ícone + texto (reeq-style).
 * flex-direction, min-height e text-align ausentes do inline style.
 * display:flex; align-items:center; justify-content:center; gap:10px já estão inline. */
#analitico-status-aguardando {
    flex-direction: column;
    min-height:     160px;
    text-align:     center;
}

/* 3. Botões de alternância de visão (Cascata / Resumo).
 * JS mudarVisao() toca somente style.background e style.color via assignação direta.
 * font-family, transform e filter não são tocados pelo JS → CSS vence. */
#aba-analitico #btn-visao-cascata,
#aba-analitico #btn-visao-resumo {
    font-family:    var(--ds-font-family);
    letter-spacing: 0.2px;
}

#aba-analitico #btn-visao-cascata:hover,
#aba-analitico #btn-visao-resumo:hover {
    transform: translateY(-1px);
    filter:    brightness(0.93);
}

#aba-analitico #btn-visao-cascata:focus-visible,
#aba-analitico #btn-visao-resumo:focus-visible {
    outline:        2px solid var(--ds-sky);
    outline-offset: 2px;
}

/* 4. Botões principais Extração Global / Extrair Ítem.
 * JS onmouseover: this.style.transform='translateY(-2px)' — transform controlado por JS.
 * filter não é tocado pelo JS → CSS vence para brilho no hover. */
#btn-gerar-analitico:hover,
#btn-gerar-analitico-item:hover {
    filter: brightness(1.08);
}

#btn-gerar-analitico:focus-visible,
#btn-gerar-analitico-item:focus-visible {
    outline:        2px solid var(--ds-sky);
    outline-offset: 2px;
}

/* 5. Botões pós-processamento (PDF Memorial, PDF Compras, Exportar, Importar).
 * JS onmouseover: this.style.background='#f8fafc' — somente background é tocado.
 * transform e filter livres para CSS → lift sutil com drop-shadow DS. */
#aba-analitico #analitico-acoes-pos-processamento button:hover {
    transform: translateY(-1px);
    filter:    drop-shadow(0 3px 6px rgba(15,43,61,0.16));
}

#aba-analitico #analitico-acoes-pos-processamento button:focus-visible {
    outline:        2px solid var(--ds-sky);
    outline-offset: 2px;
}

/* 6. Select de item: focus ring via box-shadow.
 * Inline tem outline:none — box-shadow ausente do inline → CSS vence. */
#analitico-select-item:focus {
    box-shadow: 0 0 0 3px rgba(14,165,233,0.18);
}

/* 7. Progresso: tipografia DS. */
#analitico-progresso-container {
    font-family: var(--ds-font-family);
}

/* ================================================================
   P-UX-DESIGN-SYSTEM-ANALITICO-CASCATA-CSS-01
   Migra a árvore de composições/explosão (AnaliticoUI.js ::
   gerarGavetaServico + gerarLinhaArvoreRecursiva) de style="..."
   inline para classes CSS. Mesma estrutura de <details>/<table>,
   mesmos dados, mesma recursão — só a forma de aplicar aparência
   mudou. onmouseover/onmouseout (hover puro) removidos e
   substituídos por :hover equivalente. O único inline que
   permanece é "padding-left" na célula de ícone da linha da
   árvore — depende do nível de recursão (nivel * 15), não é
   um valor estático. Escopo desta rodada: só a árvore de
   composições; gerarHTMLResumo (Lista de Compras) fica para
   uma próxima etapa.
   ================================================================ */

/* Gaveta (details) de cada serviço do orçamento na cascata.
   Card mais "de verdade": radius maior, sombra de repouso visível
   (não só 2% de opacidade) + elevação no hover, como um cartão
   clicável de verdade. */
.analitico-gaveta {
    background:      var(--ds-surface);
    border:          1px solid var(--ds-border);
    border-left:     4px solid var(--ds-info);
    border-radius:   var(--ds-radius-lg);
    overflow:        hidden;
    box-shadow:      var(--ds-shadow-sm);
    margin-bottom:   var(--ds-space-4);
    transition:      box-shadow 0.2s ease;
}

.analitico-gaveta:hover {
    box-shadow: var(--ds-shadow-md);
}

.analitico-gaveta--vazio {
    border-left-color: var(--ds-danger);
}

.analitico-gaveta-header {
    padding:         14px 18px;
    cursor:          pointer;
    background:      var(--ds-surface);
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             var(--ds-space-2);
    transition:      background 0.2s ease;
}

.analitico-gaveta-header:hover {
    background: var(--ds-bg-muted);
}

/* Estado aberto: separa visualmente cabeçalho do corpo e reforça
   a hierarquia (título "no comando" quando a gaveta está expandida). */
.analitico-gaveta[open] > .analitico-gaveta-header {
    background:    var(--ds-bg-muted);
    border-bottom: 1px solid var(--ds-border);
}

.analitico-gaveta-titulo-wrap {
    flex:            1 1 260px;
    display:         flex;
    align-items:     center;
    flex-wrap:       wrap;
    row-gap:         6px;
    padding-right:   15px;
    min-width:       0;
}

.analitico-gaveta-codigo {
    font-size:      14px;
    font-weight:    800;
    color:          var(--ds-text);
    letter-spacing: 0.1px;
}

.analitico-gaveta-desc {
    font-weight: 500;
    color:       var(--ds-text-secondary);
}

.analitico-gaveta-aviso {
    color:       var(--ds-danger);
    font-size:   11px;
    font-weight: 600;
    margin-left: 10px;
}

/* Caixa de quantidade: mais destaque (era quase discreta demais). */
.analitico-gaveta-qtd-box {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    background:      var(--ds-sky-light);
    border:          1px solid var(--ds-sky);
    border-radius:   var(--ds-radius-md);
    padding:         7px 14px;
    min-width:       84px;
    flex-shrink:     0;
    box-shadow:      var(--ds-shadow-sm);
}

.analitico-gaveta-qtd-valor {
    font-size:            17px;
    font-weight:          900;
    color:                var(--ds-navy);
    line-height:          1;
    font-variant-numeric: tabular-nums;
}

.analitico-gaveta-qtd-unidade {
    font-size:      10px;
    font-weight:    800;
    color:          var(--ds-info);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top:     4px;
}

/* Badges dentro do cabeçalho da gaveta — mais "chip", menos texto solto. */
.analitico-badge-base {
    font-size:      10px;
    font-weight:    700;
    background:     var(--ds-border);
    color:          var(--ds-text-secondary);
    padding:        3px 7px;
    border-radius:  4px;
    margin-right:   8px;
    white-space:    nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display:        inline-block;
}

.analitico-badge-wbs {
    background:    var(--ds-info);
    color:         var(--ds-text-inverse);
    font-weight:   900;
    padding:       3px 7px;
    border-radius: 4px;
    font-size:     11px;
    margin-right:  8px;
    box-shadow:    var(--ds-shadow-sm);
    display:       inline-block;
}

.analitico-badge-mo {
    background:     #dcfce7;
    color:          #166534;
    padding:        3px 9px;
    border-radius:  12px;
    font-size:      11px;
    font-weight:    700;
    margin-left:    10px;
    border:         1px solid #86efac;
    display:        inline-block;
}

.analitico-badge-encargos {
    background:     #fef08a;
    color:          #854d0e;
    padding:        3px 9px;
    border-radius:  12px;
    font-size:      11px;
    font-weight:    700;
    margin-left:    10px;
    border:         1px solid #facc15;
    cursor:         help;
    display:        inline-block;
}

/* Corpo da gaveta (tabela filha) — overflow-x contido aqui, nunca
   na página inteira (item obrigatório da tarefa). Mais respiro. */
.analitico-gaveta-corpo {
    padding:       14px;
    background:    var(--ds-bg);
    border-top:    1px solid var(--ds-border);
    overflow-x:    auto;
}

/* Estado vazio: antes era um parágrafo solto sem contorno. */
.analitico-vazio-msg {
    color:         var(--ds-text-muted);
    font-style:    italic;
    text-align:    center;
    margin:        0;
    padding:       var(--ds-space-6);
    border:        1px dashed var(--ds-border-med);
    border-radius: var(--ds-radius-md);
    background:    var(--ds-surface);
}

/* Tabela de memória de cálculo (árvore recursiva de insumos).
   Cabeçalho com fundo próprio + caixa alta, mais "moderno" que um
   texto cinza fino em cima de uma borda. */
.analitico-tabela-arvore {
    width:           100%;
    font-size:       var(--ds-font-size-xs);
    border-collapse: collapse;
    font-family:     var(--ds-font-family);
}

.analitico-tabela-arvore thead tr {
    background:     var(--ds-bg-muted);
    color:          var(--ds-text-secondary);
    text-align:     left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight:    700;
    border-bottom:  2px solid var(--ds-border-med);
}

.analitico-tabela-arvore th {
    padding: 8px 6px;
}

.analitico-th-right {
    text-align: right;
}

/* Linhas: zebra própria mais nítida (branco x âmbar) + acento à
   esquerda nas subcomposições para não depender só do fundo. */
.analitico-linha-arvore {
    border-bottom: 1px solid var(--ds-border);
    background:    var(--ds-surface);
    transition:    background 0.15s ease;
}

.analitico-linha-arvore--composicao {
    background:  #fef9ec;
    box-shadow:  inset 3px 0 0 var(--ds-warning);
}

.analitico-linha-arvore:hover {
    background: var(--ds-sky-light);
}

.analitico-td-icone {
    padding:    8px 5px;
    width:      30px;
    font-size:  13px;
}

.analitico-td-icone--insumo     { color: var(--ds-success); }
.analitico-td-icone--composicao { color: var(--ds-warning); }

.analitico-td-codigo {
    padding:     9px 6px;
    font-family: monospace;
    color:       var(--ds-text-secondary);
    font-size:   11px;
    white-space: nowrap;
}

.analitico-td-desc {
    padding:         9px 6px;
    font-weight:     normal;
    color:           var(--ds-text-secondary);
    font-size:       12px;
    min-width:       220px;
    white-space:     normal;
    line-height:     1.35;
    word-break:      normal;
    overflow-wrap:   anywhere;
}

.analitico-linha-arvore--composicao .analitico-td-desc {
    font-weight: 700;
    color:       var(--ds-text);
}

.analitico-td-unidade {
    padding:    9px 6px;
    color:      var(--ds-text-muted);
    font-size:  11px;
    text-align: center;
}

.analitico-td-memoria {
    padding:              9px 6px;
    text-align:           right;
    font-family:          'Courier New', monospace;
    color:                var(--ds-navy);
    font-size:            11px;
    background:           rgba(241, 245, 249, 0.6);
    border-left:          1px dashed var(--ds-border-med);
    white-space:          nowrap;
    font-variant-numeric: tabular-nums;
}

.analitico-td-qtd {
    padding:              9px 6px;
    text-align:           right;
    font-weight:          bold;
    color:                var(--ds-navy);
    font-size:            12px;
    width:                100px;
    font-variant-numeric: tabular-nums;
}

.analitico-td-vu {
    padding:              9px 6px;
    text-align:           right;
    color:                var(--ds-text-secondary);
    font-size:            12px;
    width:                105px;
    white-space:          nowrap;
    font-variant-numeric: tabular-nums;
}

.analitico-td-mo {
    padding:              9px 6px;
    text-align:           right;
    font-weight:          bold;
    color:                #94a3b8;
    font-size:            12px;
    width:                100px;
    font-variant-numeric: tabular-nums;
}

.analitico-td-mo--positivo {
    color: #166534;
}

/* Mobile: reduz densidade e permite quebra; overflow horizontal já
   fica contido em .analitico-gaveta-corpo (acima), nunca na página. */
@media (max-width: 768px) {
    .analitico-gaveta {
        margin-bottom: var(--ds-space-3);
    }

    .analitico-gaveta-header {
        padding: 10px 12px;
    }

    .analitico-gaveta-corpo {
        padding: 8px;
    }

    .analitico-gaveta-titulo-wrap {
        flex-basis: 100%;
    }

    .analitico-gaveta-qtd-box {
        flex:    1 1 auto;
        padding: 6px 10px;
    }

    .analitico-tabela-arvore {
        font-size: 10px;
    }

    .analitico-td-desc {
        min-width: 160px;
    }

    .analitico-td-codigo,
    .analitico-td-unidade,
    .analitico-td-memoria,
    .analitico-td-qtd,
    .analitico-td-vu,
    .analitico-td-mo {
        padding: 6px 4px;
    }
}

/* 8. Painéis de resultado: scroll suave. */
#visao-cascata,
#visao-resumo {
    scroll-behavior: smooth;
}

/* ================================================================
   P-UX-DESIGN-SYSTEM-ANALITICO-LAYOUT-CAMADA-03
   Redesenho estrutural do Analítico: shell da aba, cabeçalho,
   ações, barra de progresso, faixa de indicadores, Lista de
   Compras. Migra render(), renderizarAvisoProjeto,
   _renderizarBannerOficial, _renderizarBannerStatusResultado,
   _gerarPlaceholderNaoExtraido e gerarHTMLResumo de style="..."
   inline para classes. Mesmos IDs, mesmos onclick/onchange, mesma
   estrutura de dados — o JS continua só um renderizador dos
   mesmos dados. Elementos cujo display é alternado em runtime por
   outras funções (atualizarProgresso, iniciarExplosao,
   renderResultados, mudarVisao, _onTrocaItemSelecionado) mantêm
   o "display:none/flex/block" inline de propósito — isso é estado,
   não decoração, e essas classes não redeclaram "display" para
   não competir com o JS.
   ================================================================ */

/* ---- Shell geral da aba ---- */
.analitico-shell {
    background:  var(--ds-bg);
    min-height:  100vh;
    padding:     var(--ds-space-5) var(--ds-space-4) 40px;
    font-family: var(--ds-font-family);
}

/* ---- Cabeçalho ---- */
.analitico-header {
    display:        flex;
    flex-direction: column;
    gap:            var(--ds-space-3);
    margin-bottom:  var(--ds-space-5);
    background:     var(--ds-surface);
    padding:        18px 20px;
    border-radius:  var(--ds-radius-lg);
    border:         1px solid var(--ds-border);
    border-top:     3px solid var(--ds-navy);
    box-shadow:     var(--ds-shadow-sm);
}

.analitico-header-top {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    flex-wrap:       wrap;
    gap:             var(--ds-space-4);
}

.analitico-header-title-block {
    flex:      1 1 300px;
    min-width: 260px;
    max-width: 480px;
}

.analitico-header-titulo {
    color:       var(--ds-text);
    font-weight: 900;
    margin:      0;
    font-size:   22px;
    display:     flex;
    align-items: center;
    gap:         10px;
}

.analitico-header-icon {
    background:      var(--ds-info);
    color:           var(--ds-text-inverse);
    width:           38px;
    height:          38px;
    border-radius:   var(--ds-radius-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       16px;
    box-shadow:      0 2px 4px rgba(14, 165, 233, 0.3);
    flex-shrink:     0;
}

.analitico-header-subtitulo {
    color:       var(--ds-text-muted);
    font-size:   13px;
    margin:      8px 0 0 48px;
    font-weight: 500;
    max-width:   360px;
    line-height: 1.4;
}

.analitico-header-acoes {
    display:         flex;
    flex-direction:  column;
    gap:             10px;
    flex:            0 1 auto;
    min-width:       340px;
    max-width:       760px;
    margin-left:     auto;
}

.analitico-acoes-linha {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             10px;
    flex-wrap:       wrap;
}

.analitico-acoes-linha--item {
    align-items: flex-end;
}

.analitico-acoes-secundarias {
    display:      flex;
    gap:          8px;
    align-items:  center;
    flex-wrap:    wrap;
    margin-right: auto;
}

/* ---- Botões do cabeçalho ---- */
.analitico-btn-ghost {
    background:      var(--ds-surface);
    color:           var(--ds-navy);
    border:          1px solid var(--ds-border-med);
    padding:         8px 12px;
    border-radius:   var(--ds-radius-md);
    cursor:          pointer;
    font-size:       12px;
    font-weight:     700;
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    box-shadow:      var(--ds-shadow-sm);
    transition:      background 0.15s ease, box-shadow 0.15s ease;
}

.analitico-btn-ghost:hover {
    background: var(--ds-bg-muted);
    box-shadow: var(--ds-shadow-md);
}

.analitico-btn-primary,
.analitico-btn-accent {
    padding:         10px 18px;
    font-weight:     700;
    border-radius:   var(--ds-radius-md);
    cursor:          pointer;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    font-size:       13px;
    white-space:     nowrap;
    transition:      transform 0.15s ease, box-shadow 0.15s ease;
}

.analitico-btn-primary {
    border:     none;
    background: var(--ds-success);
    color:      var(--ds-text-inverse);
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.25);
}

.analitico-btn-accent {
    border:     1px solid var(--ds-info);
    background: var(--ds-info);
    color:      var(--ds-text-inverse);
    box-shadow: 0 4px 6px rgba(14, 165, 233, 0.2);
    min-width:  150px;
}

.analitico-btn-primary:hover,
.analitico-btn-accent:hover {
    transform:  translateY(-2px);
    box-shadow: var(--ds-shadow-md);
}

.analitico-btn-primary:disabled,
.analitico-btn-accent:disabled {
    opacity:   0.6;
    cursor:    not-allowed;
    transform: none;
}

.analitico-item-select-wrap {
    display:        flex;
    flex-direction: column;
    gap:            3px;
    flex:           1 1 auto;
    min-width:      0;
}

.analitico-item-select-label {
    font-size:      11px;
    color:          var(--ds-text-muted);
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.analitico-select {
    width:         100%;
    min-width:     0;
    box-sizing:    border-box;
    border:        1px solid var(--ds-border-med);
    border-radius: var(--ds-radius-md);
    padding:       8px 10px;
    font-size:     12px;
    color:         var(--ds-text);
    background:    var(--ds-bg);
    font-family:   var(--ds-font-family);
    transition:    border-color 0.13s ease, box-shadow 0.13s ease;
}

.analitico-select:focus {
    outline:     none;
    border-color: var(--ds-sky);
    box-shadow:  0 0 0 3px var(--ds-sky-light);
}

/* ---- Barra de progresso ---- */
.analitico-progresso {
    margin-bottom: var(--ds-space-5);
    background:    var(--ds-surface);
    padding:       18px 20px;
    border-radius: var(--ds-radius-lg);
    border:        1px solid var(--ds-border);
    box-shadow:    var(--ds-shadow-sm);
}

.analitico-progresso-head {
    display:         flex;
    justify-content: space-between;
    font-size:       13px;
    font-weight:     700;
    color:           var(--ds-text-secondary);
    margin-bottom:   12px;
}

.analitico-progresso-perc {
    color: var(--ds-success);
}

.analitico-progresso-track {
    width:         100%;
    background:    var(--ds-bg-muted);
    height:        10px;
    border-radius: 5px;
    overflow:      hidden;
}

.analitico-progresso-fill {
    height:     100%;
    background: linear-gradient(90deg, var(--ds-success), #34d399);
    transition: width 0.3s ease-out;
}

/* ---- Painel "aguardando" ---- */
.analitico-aguardando {
    background:      var(--ds-surface);
    border:          1px dashed var(--ds-border-med);
    border-radius:   var(--ds-radius-lg);
    padding:         30px 24px;
    margin-bottom:   var(--ds-space-5);
    color:           var(--ds-text-muted);
    font-size:       14px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
}

.analitico-aguardando strong {
    color: var(--ds-text);
}

.analitico-aguardando-icone {
    color:     var(--ds-border-strong);
    font-size: 18px;
}

/* ---- Resultados / seletor de visão ---- */
.analitico-resultados {
    margin-top: 0;
}

.analitico-view-switch {
    display:       flex;
    gap:           10px;
    margin-bottom: var(--ds-space-5);
}

.analitico-view-btn {
    flex:          1;
    padding:       12px 15px;
    border:        1px solid var(--ds-border-med);
    background:    var(--ds-surface);
    color:         var(--ds-text-secondary);
    border-radius: var(--ds-radius-md);
    font-weight:   700;
    cursor:        pointer;
    font-size:     14px;
    box-shadow:    var(--ds-shadow-sm);
    transition:    background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.analitico-view-btn--ativo {
    border-color: var(--ds-navy);
    background:   var(--ds-navy);
    color:        var(--ds-text-inverse);
    box-shadow:   var(--ds-shadow-md);
}

/* ---- Estado "sem projeto ativo" ---- */
.analitico-vazio-shell {
    background:      var(--ds-bg);
    min-height:      360px;
    padding:         32px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--ds-font-family);
}

.analitico-vazio-card {
    max-width:     620px;
    width:         100%;
    background:    var(--ds-surface);
    border:        1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    padding:       28px;
    text-align:    center;
    box-shadow:    var(--ds-shadow-md);
}

.analitico-vazio-icone {
    width:           52px;
    height:          52px;
    border-radius:   var(--ds-radius-md);
    background:      var(--ds-sky-light);
    color:           var(--ds-navy);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 14px;
    font-size:       22px;
}

.analitico-vazio-titulo {
    margin:      0 0 8px;
    color:       var(--ds-text);
    font-size:   22px;
    font-weight: 800;
}

.analitico-vazio-texto {
    margin:      0 auto;
    color:       var(--ds-text-secondary);
    font-size:   14px;
    line-height: 1.55;
    max-width:   500px;
}

/* ---- Faixa de indicadores (backend oficial) ---- */
.analitico-indicadores {
    background:    #f0fdf4;
    border:        1px solid #86efac;
    border-radius: var(--ds-radius-md);
    padding:       10px 16px;
    display:       flex;
    flex-wrap:     wrap;
    align-items:   center;
    gap:           14px;
    font-size:     12px;
    font-family:   var(--ds-font-family);
}

.analitico-indicadores-selo {
    background:     #16a34a;
    color:          var(--ds-text-inverse);
    border-radius:  5px;
    padding:        4px 10px;
    font-weight:    800;
    font-size:      11px;
    letter-spacing: 0.03em;
    white-space:    nowrap;
}

.analitico-indicador {
    display:        flex;
    flex-direction: column;
    gap:            1px;
    line-height:    1.2;
}

.analitico-indicador-label {
    font-size:      9px;
    color:          #4d7c0f;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight:    700;
}

.analitico-indicador-valor {
    color:       #374151;
    font-weight: 600;
}

.analitico-indicador-valor--destaque {
    color:       #15803d;
    font-weight: 800;
}

.analitico-indicador-valor--alerta {
    color:       #b45309;
    font-weight: 800;
}

.analitico-indicador-valor--meta {
    color:       #9ca3af;
    font-size:   11px;
    font-weight: 500;
}

.analitico-indicador--meta {
    margin-left: auto;
}

.analitico-indicador-bases-lista {
    display:   flex;
    gap:       4px;
    flex-wrap: wrap;
}

.analitico-indicador-base {
    background:    #dbeafe;
    color:         #1e40af;
    border-radius: 4px;
    padding:       1px 6px;
    font-size:     11px;
    white-space:   nowrap;
}

/* ---- Banner de resultado desatualizado ---- */
.analitico-banner-stale {
    background:     #fef3c7;
    border:         1px solid #fcd34d;
    border-radius:  var(--ds-radius-md);
    padding:        10px 14px;
    margin-bottom:  var(--ds-space-3);
    font-size:      12px;
    font-weight:    600;
    color:          #92400e;
    display:        flex;
    align-items:    center;
    gap:            8px;
}

.analitico-banner-stale i {
    color: #d97706;
}

/* ---- Placeholder "item não extraído" ---- */
.analitico-placeholder-item {
    background:    var(--ds-bg);
    border:        1px dashed var(--ds-border-med);
    border-radius: var(--ds-radius-md);
    padding:       10px 14px;
    margin-bottom: var(--ds-space-2);
    color:         var(--ds-text-muted);
    font-size:     12px;
    display:       flex;
    align-items:   center;
    gap:           6px;
}

.analitico-placeholder-item i {
    color: var(--ds-border-med);
}

.analitico-placeholder-texto {
    font-style: italic;
}

.analitico-badge-wbs--neutro {
    background: var(--ds-border-strong);
}

/* ---- Lista de Compras (Resumo) ---- */
.analitico-resumo-header {
    background:    var(--ds-navy);
    color:         var(--ds-text-inverse);
    padding:       15px 20px;
    border-radius: var(--ds-radius-lg);
    margin-bottom: var(--ds-space-5);
    box-shadow:    var(--ds-shadow-md);
    display:       flex;
    align-items:   center;
    gap:           15px;
    flex-wrap:     wrap;
}

.analitico-resumo-header-icone {
    background:      rgba(255, 255, 255, 0.12);
    padding:         12px;
    border-radius:   var(--ds-radius-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       24px;
    color:           #38bdf8;
}

.analitico-resumo-header-texto {
    flex:      1 1 220px;
    min-width: 0;
}

.analitico-resumo-header-contexto {
    font-size:      11px;
    color:          #7dd3fc;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight:    700;
}

.analitico-resumo-header-nome {
    font-size:   16px;
    font-weight: 700;
    color:       var(--ds-text-inverse);
    margin-top:  3px;
    line-height: 1.25;
}

.analitico-resumo-header-mo {
    background:    rgba(16, 185, 129, 0.16);
    border:        1px solid rgba(134, 239, 172, 0.45);
    border-radius: var(--ds-radius-md);
    padding:       8px 14px;
    min-width:     150px;
    text-align:    right;
}

.analitico-resumo-header-mo-label {
    font-size:      10px;
    color:          #bbf7d0;
    text-transform: uppercase;
    font-weight:    700;
}

.analitico-resumo-header-mo-valor {
    font-size:   15px;
    color:       var(--ds-text-inverse);
    font-weight: 900;
    margin-top:  2px;
}

.analitico-categoria-card {
    margin-bottom: var(--ds-space-6);
    border:        1px solid var(--ds-border);
    border-top:    3px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background:    var(--ds-surface);
    box-shadow:    var(--ds-shadow-sm);
    overflow:      hidden;
}

.analitico-categoria-titulo {
    font-size:       16px;
    margin:          0;
    padding:         14px 16px 12px;
    border-bottom:   2px solid var(--ds-border);
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}

.analitico-categoria-contagem {
    font-size:     12px;
    color:         var(--ds-text-inverse);
    padding:       2px 10px;
    border-radius: 12px;
}

.analitico-categoria-corpo {
    padding:    0 16px 16px;
    overflow-x: auto;
}

.analitico-base-titulo {
    margin-top:    18px;
    margin-bottom: 8px;
    display:       flex;
    align-items:   center;
    gap:           8px;
    color:         var(--ds-text-secondary);
    font-weight:   800;
    font-size:     13px;
}

.analitico-base-titulo-barra {
    width:         4px;
    height:        16px;
    border-radius: 2px;
}

.analitico-base-titulo i {
    color:     var(--ds-warning);
    font-size: 14px;
}

.analitico-base-titulo-nome {
    color: var(--ds-info);
}

.analitico-tabela-resumo {
    width:            100%;
    border-collapse:  separate;
    border-spacing:   0;
    font-size:        12px;
    margin-bottom:    var(--ds-space-4);
    border:           1px solid var(--ds-border);
    border-radius:    var(--ds-radius-md);
    font-family:      var(--ds-font-family);
}

.analitico-tabela-resumo thead tr {
    background: var(--ds-bg-muted);
}

.analitico-tabela-resumo th {
    padding:        10px;
    border-bottom:  1px solid var(--ds-border);
    color:          var(--ds-text-muted);
    font-weight:    800;
    text-transform: uppercase;
    font-size:      10px;
    letter-spacing: 0.04em;
    text-align:     left;
}

.analitico-th-center { text-align: center; }

.analitico-linha-resumo {
    border-bottom: 1px solid var(--ds-border);
    cursor:        pointer;
    transition:    background 0.15s ease;
}

.analitico-linha-resumo:hover {
    background: var(--ds-sky-light);
}

.analitico-td-resumo-codigo {
    padding:     8px;
    font-family: monospace;
    color:       var(--ds-text-muted);
}

.analitico-td-resumo-desc {
    padding:     8px;
    font-weight: 700;
    color:       var(--ds-text);
}

.analitico-td-resumo-unidade {
    padding:    8px;
    text-align: center;
}

.analitico-chip-unidade {
    background:    var(--ds-border);
    padding:       2px 6px;
    border-radius: 4px;
    font-weight:   700;
}

.analitico-td-resumo-qtd {
    padding:              8px;
    text-align:           right;
    font-weight:          700;
    color:                var(--ds-success);
    font-size:            14px;
    font-variant-numeric: tabular-nums;
}

/* ================================================================
   Mobile — camada 03. Reforça o que já existia (linha 529+) para
   os novos blocos: cabeçalho, ações, indicadores e resumo. Nenhum
   dado escondido — só reorganização de layout e menos densidade.
   ================================================================ */
@media (max-width: 768px) {
    .analitico-shell {
        padding: 12px 10px 32px;
    }

    .analitico-header {
        padding: 14px;
    }

    .analitico-header-title-block {
        max-width: none;
    }

    .analitico-header-subtitulo {
        margin-left: 0;
        max-width: none;
    }

    .analitico-header-acoes {
        min-width: 0;
        width:     100%;
        margin-left: 0;
    }

    .analitico-acoes-linha,
    .analitico-acoes-linha--item {
        justify-content: flex-start;
        width:           100%;
    }

    .analitico-acoes-secundarias {
        margin-right: 0;
        width:        100%;
    }

    .analitico-btn-primary,
    .analitico-btn-accent {
        flex: 1 1 auto;
    }

    .analitico-item-select-wrap {
        width: 100%;
    }

    .analitico-view-switch {
        flex-wrap: wrap;
    }

    .analitico-view-btn {
        flex-basis: 100%;
    }

    .analitico-indicadores {
        gap: 10px;
    }

    .analitico-indicador--meta {
        margin-left: 0;
    }

    .analitico-resumo-header {
        padding: 14px;
    }

    .analitico-resumo-header-mo {
        text-align: left;
        min-width:  0;
        flex:       1 1 100%;
    }

    .analitico-categoria-titulo {
        flex-wrap: wrap;
        gap:       6px;
    }

    .analitico-tabela-resumo {
        font-size: 11px;
    }
}