/* =============================================================================
   Artsy · Controle de Tecidos — estilos da aplicação
   Construído sobre o Bootstrap 5.3: aqui ficam apenas a identidade visual
   (cores, tipografia, espaçamentos) e os componentes próprios do sistema.

   Paleta (identidade Artsy):
     1. Neutros  → branco e cinzas claros (fundo, cartões, bordas)
     2. Tinta    → grafite escuro, usado só em textos (títulos e conteúdo)
     3. Roxo     → cor da marca no sistema: ações, navegação, seleção e dados
                   (sólido nos botões, tons claros nas seleções, degradê no destaque)
     4. Verde / Vermelho → apenas sinalização (estoque suficiente / a comprar)
     O preto puro fica reservado ao logo da Artsy.
   ============================================================================= */

/* ---------- 1. Variáveis de design (tokens) ---------- */
:root {
    /* Neutros */
    --tinta: #17141f;        /* textos: grafite levemente arroxeado */
    --tinta-suave: #3b3646;
    --cinza-600: #4a4a52;
    --cinza-500: #6e6e78;
    --cinza-400: #a3a3ad;
    --cinza-300: #dcdce2;
    --cinza-200: #ececf0;
    --cinza-100: #f4f4f7;
    --cinza-50: #f8f8fa;
    --branco: #ffffff;

    /* Roxo (cor da marca no sistema) */
    --roxo: #5a1cbf;
    --roxo-escuro: #46149a;
    --roxo-claro: #a78bfa;
    --roxo-suave: #efedf6;
    --roxo-borda: #d8d2ea;
    --degrade: linear-gradient(90deg, #2a0e5c 0%, #5a1cbf 100%);
    --degrade-destaque: linear-gradient(110deg, #170c38 0%, #2a0e5c 50%, #5a1cbf 100%);

    /* Sinalização */
    --verde: #1f9d6f;
    --verde-suave: #ebf7f2;
    --vermelho: #e0464b;
    --vermelho-suave: #fdf0f0;
    --amarelo: #a16207;
    --amarelo-suave: #fff8d6;

    /* Papéis (use estes nos componentes) */
    --cor-primaria: var(--roxo);
    --cor-texto: var(--tinta);
    --cor-texto-suave: var(--cinza-500);
    --cor-borda: var(--cinza-200);
    --cor-fundo: var(--cinza-50);
    --cor-superficie: var(--branco);
    --cor-positivo: var(--verde);
    --cor-positivo-suave: var(--verde-suave);
    --cor-negativo: var(--vermelho);
    --cor-negativo-suave: var(--vermelho-suave);
    --cor-zerado: var(--cinza-400);

    --sidebar-largura: 252px;

    --raio: 12px;
    --raio-pequeno: 8px;
    --sombra: 0 1px 2px rgba(17, 17, 19, .03), 0 2px 8px rgba(17, 17, 19, .03);
    --anel-foco: 0 0 0 3px rgba(90, 28, 191, .18);

    /* Ajustes do Bootstrap para seguir a identidade */
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size: .875rem;
    --bs-body-color: var(--cor-texto);
    --bs-body-bg: var(--cor-fundo);
    --bs-border-color: var(--cor-borda);
    --bs-primary: var(--roxo);
    --bs-primary-rgb: 90, 28, 191;
    --bs-link-color: var(--roxo);
    --bs-link-color-rgb: 90, 28, 191;
    --bs-link-hover-color: var(--roxo-escuro);
    --bs-link-hover-color-rgb: 70, 20, 154;
    --bs-border-radius: var(--raio-pequeno);
}

body {
    background: var(--cor-fundo);
    -webkit-font-smoothing: antialiased;
}

/* Foco sempre visível (acessibilidade: navegação por teclado) */
:focus-visible { outline: none; box-shadow: var(--anel-foco); }

/* Números alinhados (mesma largura para todos os dígitos) */
.fonte-numerica,
.tabela td.text-end,
.indicador-valor {
    font-variant-numeric: tabular-nums;
}

/* ---------- 2. Botões e formulários ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-weight: 500; }
.btn-lg { font-size: .95rem; padding: .7rem 1rem; }
.btn:focus-visible { box-shadow: var(--anel-foco); }

/* Ação principal: roxo da marca */
.btn-primary {
    --bs-btn-color: var(--branco);
    --bs-btn-bg: var(--roxo);
    --bs-btn-border-color: var(--roxo);
    --bs-btn-hover-color: var(--branco);
    --bs-btn-hover-bg: var(--roxo-escuro);
    --bs-btn-hover-border-color: var(--roxo-escuro);
    --bs-btn-active-bg: var(--roxo-escuro);
    --bs-btn-active-border-color: var(--roxo-escuro);
    --bs-btn-disabled-bg: var(--roxo-claro);
    --bs-btn-disabled-border-color: var(--roxo-claro);
    --bs-btn-focus-shadow-rgb: 90, 28, 191;
}

/* Ação secundária: branca com borda */
.btn-light {
    --bs-btn-color: var(--tinta);
    --bs-btn-bg: var(--branco);
    --bs-btn-border-color: var(--cinza-200);
    --bs-btn-hover-bg: var(--cinza-100);
    --bs-btn-hover-border-color: var(--cinza-300);
    --bs-btn-active-bg: var(--cinza-200);
}

.btn-outline-secondary {
    --bs-btn-color: var(--cinza-600);
    --bs-btn-border-color: var(--cinza-300);
    --bs-btn-hover-bg: var(--cinza-100);
    --bs-btn-hover-color: var(--tinta);
    --bs-btn-hover-border-color: var(--cinza-300);
}

.btn-link { --bs-btn-color: var(--roxo); --bs-btn-hover-color: var(--roxo-escuro); }

.btn-icone {
    width: 36px; height: 36px; padding: 0;
    border-radius: var(--raio-pequeno);
    color: var(--cinza-500);
    background: transparent; border: 0;
}
.btn-icone:hover { background: var(--cinza-100); color: var(--tinta); }
.btn-icone.perigo:hover { background: var(--vermelho-suave); color: var(--vermelho); }

.form-label { font-weight: 500; margin-bottom: .35rem; }
.form-control, .form-select { border-color: var(--cinza-300); background-color: var(--branco); }
.form-control::placeholder { color: var(--cinza-400); }
.form-control:focus, .form-select:focus { border-color: var(--roxo); box-shadow: var(--anel-foco); }
.form-control-lg { font-size: 1rem; }
fieldset:disabled { opacity: .5; }

/* ---------- 3. Estrutura: menu lateral + conteúdo ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-largura);
    background: var(--branco);
    border-right: 1px solid var(--cor-borda);
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .sidebar {
        position: fixed; inset: 0 auto 0 0;
        /* O Bootstrap deixa o offcanvas-lg transparente em telas grandes */
        background: var(--branco) !important;
    }
    .conteudo { margin-left: var(--sidebar-largura); }
}
@media (max-width: 991.98px) {
    .sidebar.offcanvas-lg { --bs-offcanvas-width: var(--sidebar-largura); --bs-offcanvas-bg: var(--branco); }
}

.sidebar-marca {
    display: flex; align-items: center; gap: .8rem;
    padding: 1.4rem 1.25rem 1.1rem;
    margin-bottom: .5rem;
}
.sidebar-logo { width: 36px; height: auto; flex-shrink: 0; }
.sidebar-marca-texto { min-width: 0; }
.sidebar-marca strong { display: block; color: var(--tinta); font-size: .95rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 .75rem; }
.sidebar-link {
    position: relative;
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .75rem; border-radius: var(--raio-pequeno);
    color: var(--cinza-600); text-decoration: none; font-weight: 500;
    transition: background .15s, color .15s;
}
.sidebar-link i { font-size: 1.05rem; color: var(--cinza-400); }
.sidebar-link span { white-space: nowrap; }
.sidebar-link:hover { background: var(--cinza-50); color: var(--tinta); }
.sidebar-link:hover i { color: var(--cinza-600); }
.sidebar-link.ativo { background: var(--roxo-suave); color: var(--roxo); font-weight: 500; }
.sidebar-link.ativo i { color: var(--roxo); }

.sidebar-rodape { margin-top: auto; padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--cor-borda); }
.status-estoque { display: flex; gap: .55rem; align-items: center; font-size: .78rem; color: var(--cinza-500); }
.status-texto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-estoque strong { color: var(--tinta); font-weight: 600; }
.status-ponto {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave);
}
.status-estoque.desatualizado .status-ponto { background: var(--vermelho); box-shadow: 0 0 0 3px var(--vermelho-suave); }
.status-link {
    display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0;
    font-size: .76rem; font-weight: 600; color: var(--vermelho); text-decoration: none;
}
.status-link:hover { text-decoration: underline; }

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem 2rem;
    background: var(--branco);
    border-bottom: 1px solid var(--cor-borda);
    position: sticky; top: 0; z-index: 10;
}
.topo-sobretitulo {
    display: block; margin-bottom: .2rem;
    font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--roxo);
}
.topo h1 { font-size: 1.35rem; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.topo p { margin: 0; color: var(--cor-texto-suave); font-size: .82rem; }
.topo-acoes { margin-left: auto; display: flex; gap: .5rem; }

.pagina { padding: 1.5rem 2rem 2.5rem; }

@media (max-width: 767.98px) {
    .topo { padding: .9rem 1rem; }
    .topo p { display: none; }
    .pagina { padding: 1rem; }
}

/* ---------- 4. Cartões ---------- */
.cartao {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}
.cartao-cabecalho {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--cor-borda);
}
.cabecalho-titulo { display: flex; gap: .75rem; align-items: center; min-width: 0; }
.cartao-cabecalho h2 { font-size: .95rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.cartao-cabecalho p { margin: .1rem 0 0; color: var(--cor-texto-suave); font-size: .8rem; }
.cartao-corpo { padding: 1.25rem; }

/* Ícone pequeno ao lado do título do cartão */
.cabecalho-icone {
    width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center;
    border-radius: 8px; background: var(--roxo-suave); color: var(--roxo); font-size: .9rem;
}

.nota { color: var(--cor-texto-suave); font-size: .78rem; margin: 1rem 0 0; }

/* Variações de cor dos ícones (somente para sinalizar) */
.icone-verde { background: var(--verde-suave) !important; color: var(--verde) !important; }
.icone-vermelho { background: var(--vermelho-suave) !important; color: var(--vermelho) !important; }

/* ---------- 5. Indicadores (dashboard) ---------- */
.grade-indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.indicador {
    display: flex; gap: .9rem; align-items: flex-start;
    padding: 1.1rem 1.25rem;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}
.indicador-icone {
    width: 40px; height: 40px; flex-shrink: 0;
    display: grid; place-items: center; border-radius: 10px;
    background: var(--roxo-suave); color: var(--roxo); font-size: 1.1rem;
}
.indicador-rotulo { margin: 0; color: var(--cor-texto-suave); font-size: .8rem; font-weight: 500; }
.indicador-valor {
    margin: .15rem 0 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
    white-space: nowrap; font-size: clamp(1.15rem, 1.6vw, 1.5rem);
}
.indicador-unidade { font-size: .6em; font-weight: 500; color: var(--cor-texto-suave); margin-left: .2em; }
.indicador-detalhe { margin: .15rem 0 0; color: var(--cor-texto-suave); font-size: .75rem; }

/* ---------- 6. Tabelas ---------- */
.tabela { --bs-table-bg: transparent; margin: 0; }
.tabela > :not(caption) > * > * { padding: .7rem .75rem; border-bottom-color: var(--cor-borda); vertical-align: middle; }
.tabela > :not(caption) > * > *:first-child { padding-left: 1rem; }
.tabela > :not(caption) > * > *:last-child { padding-right: 1rem; }
.tabela thead th {
    background: var(--cinza-50);
    color: var(--cinza-500);
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    white-space: nowrap;
}
.tabela thead th.text-end { white-space: normal; min-width: 84px; }
.tabela td.text-end { white-space: nowrap; }
.tabela tbody tr:last-child > * { border-bottom: 0; }
.tabela-hover tbody tr:hover > * { background: var(--cinza-50); }
.tabela-clicavel tbody tr[data-id] { cursor: pointer; }

.tabela th[data-ordenar] { cursor: pointer; user-select: none; }
.tabela th[data-ordenar]:hover { color: var(--tinta); }
.tabela th[data-ordenar]::after {
    content: "\F282"; font-family: "bootstrap-icons"; font-size: .65rem;
    margin-left: .3rem; opacity: 0; vertical-align: middle;
}
.tabela th[data-ordenar]:hover::after { opacity: .4; }
.tabela th.ordem-asc, .tabela th.ordem-desc { color: var(--tinta); }
.tabela th.ordem-asc::after { content: "\F286"; opacity: 1; }
.tabela th.ordem-desc::after { content: "\F282"; opacity: 1; }

.tabela .col-acoes { width: 1%; white-space: nowrap; text-align: right; }
.tabela .codigo { font-variant-numeric: tabular-nums; color: var(--cinza-500); white-space: nowrap; }
.tabela .nome { font-weight: 500; min-width: 220px; }
.tabela .vazio-campo { color: var(--cinza-300); }
.tabela .carregando, .tabela .sem-resultados {
    text-align: center; color: var(--cor-texto-suave); padding: 2.5rem 1rem;
}


.linha-estoque td { color: var(--cor-texto-suave); font-weight: 500; background: var(--cinza-50) !important; }

/* ---------- 7. Valores positivos/negativos e etiquetas ---------- */
.valor-negativo { color: var(--vermelho) !important; font-weight: 600; }
.valor-positivo { color: var(--verde) !important; }
.valor-zerado { color: var(--cor-texto-suave); }

.etiqueta {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .55rem; border-radius: 999px;
    font-size: .76rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.etiqueta-compra { background: var(--vermelho-suave); color: var(--vermelho); font-weight: 500; }
.etiqueta-aviso { background: var(--amarelo-suave); color: var(--amarelo); }
.etiqueta-neutra { background: var(--cinza-100); color: var(--cinza-600); }

.ponto-negativo {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--vermelho); margin-right: .35rem; vertical-align: middle;
}

/* ---------- 8. Barra de ferramentas (busca e filtros) ---------- */
.barra-ferramentas {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--cor-borda);
}
.campo-busca { position: relative; flex: 1 1 320px; max-width: 460px; }
.campo-busca i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--cinza-400); }
.campo-busca .form-control { padding-left: 2.2rem; }

.filtros { display: flex; flex-wrap: wrap; gap: .35rem; }
.btn-filtro {
    --bs-btn-padding-y: .35rem; --bs-btn-padding-x: .8rem; --bs-btn-font-size: .8rem;
    --bs-btn-color: var(--cinza-600); --bs-btn-border-color: var(--cinza-200);
    --bs-btn-hover-bg: var(--cinza-100); --bs-btn-hover-border-color: var(--cinza-300); --bs-btn-hover-color: var(--tinta);
    --bs-btn-active-bg: var(--roxo-suave); --bs-btn-active-color: var(--roxo); --bs-btn-active-border-color: var(--roxo-borda);
    border-radius: 999px;
}
/* Filtro selecionado: roxo claro com texto roxo (mesmo padrão do menu) */
.btn-check:checked + .btn-filtro { background: var(--roxo-suave); color: var(--roxo); border-color: var(--roxo-borda); font-weight: 600; }
.btn-check:focus-visible + .btn-filtro { box-shadow: var(--anel-foco); }
.contador { margin-left: auto; color: var(--cor-texto-suave); font-size: .8rem; white-space: nowrap; }

.paginacao {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .75rem 1.25rem; border-top: 1px solid var(--cor-borda);
    color: var(--cor-texto-suave); font-size: .8rem;
}
.paginacao:empty { display: none; }
.paginacao .btn-group .btn { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .8rem; }

/* ---------- 9. Lançamento de consumo ---------- */
.posicao-relativa { position: relative; }

.sugestoes {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
    list-style: none; margin: 0; padding: .35rem;
    background: var(--branco); border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno);
    box-shadow: 0 12px 24px -6px rgba(10, 10, 10, .16);
    max-height: 320px; overflow-y: auto;
}
.sugestoes li {
    padding: .5rem .6rem; border-radius: 6px; cursor: pointer;
    display: flex; flex-direction: column; gap: .1rem;
}
.sugestoes li small { color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.sugestoes li.ativa, .sugestoes li:hover { background: var(--cinza-100); }
.sugestoes li.ativa { box-shadow: inset 2px 0 0 var(--roxo); }

/* Tecido encontrado: destaque em roxo claro para confirmar a seleção */
.tecido-selecionado {
    border: 1px solid var(--roxo-borda); background: var(--roxo-suave);
    border-radius: var(--raio-pequeno); padding: .85rem 1rem; margin-bottom: 1.25rem;
}
.tecido-selecionado-topo { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.tecido-selecionado-topo strong { font-weight: 600; line-height: 1.35; }
.tecido-dados { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; margin: 0; }
.tecido-dados dt { font-size: .72rem; font-weight: 500; color: var(--cinza-500); }
.tecido-dados dd { margin: 0; font-weight: 600; }

.previa-calculo {
    background: var(--cinza-50); border: 1px dashed var(--cinza-300);
    border-radius: var(--raio-pequeno); padding: .75rem 1rem;
}
.previa-linha { display: flex; justify-content: space-between; align-items: baseline; padding: .2rem 0; }
.previa-linha span { color: var(--cor-texto-suave); }
.previa-linha strong { font-size: 1.05rem; }
.previa-compra {
    display: flex; align-items: center; gap: .5rem;
    margin-top: .5rem; padding: .5rem .65rem; border-radius: 6px;
    background: var(--vermelho-suave); color: var(--vermelho); font-size: .82rem;
}

.totais {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--cor-borda);
}
.totais > div { padding: 1rem 1.25rem; }
.totais > div + div { border-left: 1px solid var(--cor-borda); }
.totais small { display: block; color: var(--cor-texto-suave); font-size: .75rem; }
.totais strong { font-size: 1.15rem; font-weight: 600; }

/* Destaque da linha recém-lançada */
@keyframes destaque { from { background: var(--roxo-suave); } to { background: transparent; } }
.tabela tr.recem-alterada > * { animation: destaque 2s ease-out; }

/* ---------- 10. Estados vazios ---------- */
.vazio {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: .5rem; padding: 3rem 1rem; color: var(--cor-texto-suave);
}
.vazio i { font-size: 2rem; color: var(--cinza-300); }
.vazio p { margin: 0; }

/* ---------- 11. Importação ---------- */
.area-arquivo {
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    padding: 2.25rem 1rem; text-align: center; cursor: pointer;
    border: 2px dashed var(--cinza-300); border-radius: var(--raio); background: var(--cinza-50);
    transition: border-color .15s, background .15s;
}
.area-arquivo i { font-size: 2.25rem; color: var(--roxo); }
.area-arquivo span { color: var(--cor-texto-suave); font-size: .8rem; }
.area-arquivo:hover, .area-arquivo.arrastando { border-color: var(--roxo); background: var(--roxo-suave); }

.regras-importacao { list-style: none; padding: 0; margin: 1rem 0 0; color: var(--cor-texto-suave); font-size: .82rem; }
.regras-importacao li { display: flex; gap: .5rem; padding: .2rem 0; }
.regras-importacao i { color: var(--verde); }

.arquivo-escolhido {
    display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem;
    border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); margin-bottom: 1rem;
}
.arquivo-escolhido > i { font-size: 1.5rem; color: var(--verde); }
.arquivo-escolhido small { display: block; color: var(--cor-texto-suave); }

.resumo-importacao { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1rem; }
.resumo-importacao > div { padding: .75rem; border-radius: var(--raio-pequeno); background: var(--cinza-50); border: 1px solid var(--cor-borda); }
.resumo-importacao span { display: block; font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.resumo-importacao small { color: var(--cor-texto-suave); font-size: .75rem; }
.resumo-importacao .destaque-aviso { background: var(--vermelho-suave); border-color: #f9c5c0; }
.resumo-importacao .destaque-aviso span { color: var(--vermelho); }
.tabela-previa { max-height: 220px; overflow-y: auto; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); }

@media (max-width: 575.98px) {
    .resumo-importacao { grid-template-columns: repeat(2, 1fr); }
    .totais { grid-template-columns: 1fr; }
    .totais > div + div { border-left: 0; border-top: 1px solid var(--cor-borda); }
}

.descricao-tecido { font-weight: 500; padding: .65rem .85rem; background: var(--cinza-50); border-radius: var(--raio-pequeno); }

/* ---------- 12. Painel de detalhe (consulta) ---------- */
.painel-detalhe { --bs-offcanvas-width: 620px; }
.painel-detalhe .offcanvas-header { align-items: flex-start; border-bottom: 1px solid var(--cor-borda); }
.resumo-detalhe { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1.5rem; }
.resumo-detalhe > div { padding: .8rem 1rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); }
.resumo-detalhe small { display: block; color: var(--cor-texto-suave); font-size: .75rem; }
.resumo-detalhe strong { font-size: 1.2rem; font-weight: 600; }
.titulo-secao {
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    color: var(--cor-texto-suave); margin-bottom: .5rem;
}

/* ---------- 13. Modal de confirmação e notificações ---------- */
.confirmacao-icone {
    width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
    background: var(--vermelho-suave); color: var(--vermelho); font-size: 1.25rem; margin-bottom: 1rem;
}
.modal-content { border: 0; border-radius: var(--raio); box-shadow: 0 24px 48px -12px rgba(10, 10, 10, .25); }
.modal-header, .modal-footer { border-color: var(--cor-borda); }

.toast { border: 0; box-shadow: 0 12px 24px -6px rgba(10, 10, 10, .3); }
.toast .toast-body { display: flex; align-items: center; gap: .6rem; font-weight: 500; }
.toast-sucesso { background: var(--tinta); color: var(--branco); }
.toast-sucesso .bi { color: #7cc9a1; }
.toast-erro { background: var(--vermelho); color: var(--branco); }

/* ---------- 14. Dashboard: destaque de cobertura ---------- */
/* Degradê roxo da marca (mesmo estilo do painel de boas-vindas da referência) */
.destaque {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem;
    padding: 1.75rem 2rem; margin-bottom: 1rem; border-radius: var(--raio);
    background: var(--degrade-destaque);
    color: var(--branco);
    box-shadow: 0 14px 34px -18px rgba(42, 14, 92, .65);
}
/* Brilho sutil no canto para dar profundidade ao degradê */
.destaque::after {
    content: ""; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px;
    border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, .35) 0%, rgba(139, 92, 246, 0) 70%);
    pointer-events: none;
}
.destaque > * { position: relative; z-index: 1; }
.destaque-anel {
    --progresso: 0;
    width: 124px; height: 124px; border-radius: 50%; padding: 10px;
    background: conic-gradient(var(--cor-anel, var(--branco)) calc(var(--progresso) * 1%), rgba(255, 255, 255, .18) 0);
}
.destaque-anel-centro {
    width: 100%; height: 100%; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #1f0d47;
}
.destaque-anel-centro strong { font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.destaque-anel-centro small { font-size: .72rem; color: rgba(255, 255, 255, .72); margin-top: .3rem; }
.destaque-rotulo {
    margin: 0 0 .4rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    color: rgba(255, 255, 255, .72);
}
.destaque-titulo { font-size: 1.35rem; font-weight: 600; margin: 0 0 .4rem; letter-spacing: -.02em; line-height: 1.3; }
.destaque-descricao { margin: 0; color: rgba(255, 255, 255, .78); font-size: .88rem; }
.destaque-metricas { display: grid; gap: .6rem; min-width: 230px; }
.destaque-metricas > div {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .85rem; border-radius: var(--raio-pequeno);
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .12);
}
.destaque-metricas i {
    width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
    border-radius: 8px; background: rgba(255, 255, 255, .14); font-size: .95rem; color: var(--branco);
}
.destaque-metricas i.ok { color: #8fd4b1; }
.destaque-metricas i.alerta { color: #f2a3a6; } /* vermelho claro: legível sobre o destaque roxo */
.destaque-metricas small { display: block; font-size: .72rem; color: rgba(255, 255, 255, .72); }
.destaque-metricas strong { font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.destaque-de { font-weight: 400; color: rgba(255, 255, 255, .72); font-size: .9rem; }

@media (max-width: 1199.98px) {
    .destaque { grid-template-columns: auto 1fr; }
    .destaque-metricas { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
    .destaque { grid-template-columns: 1fr; justify-items: start; padding: 1.25rem; }
    .destaque-metricas { grid-template-columns: 1fr; width: 100%; }
}

/* ---------- 15. Dashboard: ranking de consumo ---------- */
.legenda-ranking { display: flex; gap: 1rem; font-size: .76rem; color: var(--cor-texto-suave); white-space: nowrap; }
.legenda-ranking span { display: inline-flex; align-items: center; gap: .4rem; }
.legenda-ranking i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legenda-coberto, .ranking-coberto { background: var(--degrade); }
.legenda-excedente, .ranking-excedente { background: var(--cinza-200); }

.ranking { list-style: none; margin: 0; padding: 0; }
.ranking-item { display: flex; gap: .85rem; padding: .75rem 0; border-bottom: 1px solid var(--cinza-100); }
.ranking-item:first-child { padding-top: 0; }
.ranking-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ranking-posicao {
    width: 22px; flex-shrink: 0; margin-top: .05rem;
    color: var(--cinza-400); font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ranking-item:nth-child(-n+3) .ranking-posicao { color: var(--roxo); }
.ranking-conteudo { flex: 1; min-width: 0; }
.ranking-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ranking-nome {
    font-weight: 500; color: var(--tinta); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ranking-nome:hover { color: var(--roxo); }
.ranking-consumo { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.ranking-barra {
    display: flex; height: 6px; margin: .45rem 0 .35rem;
    border-radius: 3px; background: var(--cinza-100); overflow: hidden;
}
.ranking-barra span { height: 100%; transition: width .4s ease; }
.ranking-coberto { border-radius: 3px 0 0 3px; }
.ranking-rodape {
    display: flex; justify-content: space-between; gap: 1rem;
    font-size: .75rem; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums;
}
.ranking-rodape > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 575.98px) {
    .cartao-cabecalho:has(.legenda-ranking) { flex-direction: column; align-items: flex-start; }
}

/* ---------- 16. Dashboard: fornecedores ---------- */
.fornecedores { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.05rem; }
.fornecedor-topo { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.fornecedor-nome { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fornecedor-topo strong { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fornecedor-barra { height: 6px; border-radius: 3px; background: var(--cinza-100); margin: .4rem 0 .25rem; overflow: hidden; }
.fornecedor-barra span { display: block; height: 100%; border-radius: 3px; background: var(--degrade); transition: width .4s ease; }
.fornecedores small { color: var(--cor-texto-suave); font-size: .74rem; }

/* ---------- 17. Dashboard: últimos lançamentos ---------- */
.atividades { list-style: none; margin: 0; padding: .25rem 0; }
.atividades > li:not(.vazio):not(.carregando) {
    display: flex; align-items: center; gap: .85rem; padding: .7rem 1.25rem;
    border-bottom: 1px solid var(--cor-borda);
}
.atividades > li:last-child { border-bottom: 0; }
.atividades .carregando { padding: 2rem; text-align: center; color: var(--cor-texto-suave); }
.atividade-icone {
    width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center;
    border-radius: 10px; background: var(--roxo-suave); color: var(--roxo);
}
.atividade-texto { flex: 1; min-width: 0; }
.atividade-texto a {
    display: block; color: var(--tinta); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.atividade-texto a:hover { color: var(--roxo); }
.atividade-texto small { color: var(--cor-texto-suave); font-size: .76rem; font-variant-numeric: tabular-nums; }
.atividade-valor { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- 18. Dashboard: planejamento de compras ---------- */
.compras-resumo {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .9rem 1rem; margin-bottom: .75rem;
    border-radius: var(--raio-pequeno); background: var(--cinza-50); border: 1px solid var(--cor-borda);
}
.compras-resumo strong { display: block; font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.compras-resumo small { color: var(--cor-texto-suave); font-size: .78rem; }
.compras-lista { list-style: none; margin: 0; padding: 0; }
.compras-lista li {
    display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0;
    border-bottom: 1px dashed var(--cor-borda); font-size: .84rem;
}
.compras-lista li:last-child { border-bottom: 0; }
.compras-lista a { color: var(--tinta); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compras-lista a:hover { color: var(--roxo); }
.compras-lista span { color: var(--cor-texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.compras-ok { color: var(--verde); justify-content: flex-start !important; gap: .5rem !important; }

/* ---------- 19. Dashboard: grupos, valores e cards expansíveis ---------- */
/* Rótulo discreto acima de cada grupo de cards */
.rotulo-grupo {
    margin: 1.5rem 0 .6rem; font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; color: var(--tinta);
}
.rotulo-grupo span { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--cor-texto-suave); }

/* Indicadores e valores usam a mesma grade de 4 colunas: os cards ficam alinhados */
@media (min-width: 1200px) {
    .grade-indicadores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 576px) and (max-width: 1199.98px) {
    .grade-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.indicador > div { min-width: 0; }
.indicador-destaque { background: var(--roxo-suave); border-color: var(--roxo-borda); }
.indicador-destaque .indicador-valor { color: var(--roxo); }

/* Cards expansíveis: 1ª linha com 3 cards (1/3 cada), 2ª linha com 2 cards (1/2 cada) */
.grade-detalhes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.detalhe.terco { grid-column: span 2; }
.detalhe.metade { grid-column: span 3; }

.detalhe { overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.detalhe:hover { border-color: var(--roxo-borda); }
.detalhe.aberto { border-color: var(--roxo-borda); box-shadow: 0 6px 18px -10px rgba(42, 14, 92, .35); }

.detalhe-cabecalho {
    display: flex; align-items: center; gap: .85rem; width: 100%;
    padding: 1rem 1.15rem; border: 0; background: transparent; text-align: left; color: var(--tinta);
}
.detalhe-cabecalho:focus-visible { box-shadow: inset var(--anel-foco); }
.detalhe-titulo { flex: 1; min-width: 0; }
.detalhe-titulo strong { display: block; font-size: .92rem; font-weight: 600; }
.detalhe-titulo small {
    display: block; margin-top: .1rem; font-size: .78rem; color: var(--cor-texto-suave);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.detalhe-seta {
    width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center;
    border-radius: 50%; background: var(--cinza-100); color: var(--cinza-500); font-size: .8rem;
    transition: transform .2s ease, background .15s, color .15s;
}
.detalhe-cabecalho:hover .detalhe-seta { background: var(--roxo-suave); color: var(--roxo); }
.detalhe.aberto .detalhe-seta { transform: rotate(180deg); background: var(--roxo-suave); color: var(--roxo); }

/* Card aberto: altura fixa igual para todos. A lista rola por dentro
   (.detalhe-rolagem) e os botões ficam sempre visíveis no rodapé. */
.detalhe { --altura-detalhe: 380px; }
.detalhe-corpo {
    display: flex; flex-direction: column; height: var(--altura-detalhe);
    border-top: 1px solid var(--cor-borda);
}
.detalhe-corpo[hidden] { display: none; }
.detalhe-corpo:not([hidden]) { animation: abrir-detalhe .2s ease; }
@keyframes abrir-detalhe { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.detalhe-rolagem {
    flex: 1; min-height: 0; overflow-y: auto; padding: 1.1rem 1.15rem;
    scrollbar-width: thin; scrollbar-color: var(--cinza-300) transparent;
}
.detalhe-rolagem.sem-recuo { padding: 0; }
.detalhe-rolagem::-webkit-scrollbar { width: 6px; }
.detalhe-rolagem::-webkit-scrollbar-thumb { background: var(--cinza-300); border-radius: 3px; }
.detalhe-rolagem::-webkit-scrollbar-thumb:hover { background: var(--roxo-claro); }

.detalhe-rodape {
    flex-shrink: 0; display: flex; align-items: center; min-height: 54px;
    padding: .65rem 1.15rem; border-top: 1px solid var(--cor-borda); background: var(--cinza-50);
}

@media (max-width: 1199.98px) {
    .grade-detalhes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detalhe.terco, .detalhe.metade { grid-column: span 1; }
}
@media (max-width: 767.98px) {
    .grade-detalhes { grid-template-columns: 1fr; }
}

/* ---------- 20. Relatórios ---------- */
.abas-relatorio { display: grid; grid-template-columns: repeat(var(--abas, 4), minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.aba-relatorio {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .9rem 1rem; border-radius: var(--raio);
    background: var(--branco); border: 1px solid var(--cor-borda);
    color: var(--tinta); text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.aba-relatorio:hover { border-color: var(--roxo-borda); }
.aba-relatorio.ativa { border-color: var(--roxo); box-shadow: 0 0 0 3px var(--roxo-suave); }
.aba-icone {
    width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center;
    border-radius: 10px; background: var(--roxo-suave); color: var(--roxo);
}
.aba-relatorio.ativa .aba-icone { background: var(--roxo); color: var(--branco); }
.aba-relatorio strong { display: block; font-size: .88rem; font-weight: 600; }
.aba-relatorio small { display: block; color: var(--cor-texto-suave); font-size: .75rem; line-height: 1.35; }

.controles-relatorio { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; padding: .9rem 1.25rem; margin-bottom: 1rem; }
.controles-relatorio .form-select { width: auto; min-width: 200px; }

/* A "folha" imita o papel: o que se vê aqui é o que sai na impressão */
.folha {
    background: var(--branco); border: 1px solid var(--cor-borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: 2rem 2.25rem; max-width: 1180px;
}
.folha-cabecalho {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem;
    padding-bottom: 1.25rem; margin-bottom: 1.5rem;
    border-bottom: 3px solid transparent;
    border-image: var(--degrade) 1;
}
.folha-marca { display: flex; align-items: center; gap: 1rem; }
.folha-logo { width: 54px; height: auto; }
.folha-sobretitulo { display: block; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--roxo); }
.folha-sobretitulo.claro { color: rgba(255, 255, 255, .75); }
.folha-titulo { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: .15rem 0 0; }
.folha-meta { display: flex; gap: 1.5rem; margin: 0; text-align: right; }
.folha-meta dt { font-size: .7rem; font-weight: 500; color: var(--cor-texto-suave); }
.folha-meta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.folha-resumo { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1rem; }
.folha-kpi { padding: .8rem 1rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); background: var(--cinza-50); }
.folha-kpi small { display: block; font-size: .72rem; color: var(--cor-texto-suave); }
.folha-kpi strong { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.folha-kpi-destaque { background: var(--roxo-suave); border-color: var(--roxo-borda); }
.folha-kpi-destaque strong { color: var(--roxo); }

.folha-destaque {
    display: flex; align-items: center; gap: 1.5rem; padding: 1.25rem 1.5rem; margin-bottom: 1rem;
    border-radius: var(--raio); background: var(--degrade-destaque); color: var(--branco);
}
.folha-anel {
    --progresso: 0; width: 92px; height: 92px; flex-shrink: 0; border-radius: 50%; padding: 8px;
    background: conic-gradient(var(--cor-anel, var(--branco)) calc(var(--progresso) * 1%), rgba(255, 255, 255, .2) 0);
}
.folha-anel > div {
    width: 100%; height: 100%; border-radius: 50%; background: #1f0d47;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.folha-anel strong { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.folha-anel small { font-size: .65rem; opacity: .75; }
.folha-destaque-titulo { font-size: 1.1rem; font-weight: 600; margin: .2rem 0; }
.folha-destaque-texto { margin: 0; font-size: .82rem; color: rgba(255, 255, 255, .8); }

.folha-aviso { display: flex; gap: .5rem; align-items: center; font-size: .8rem; color: var(--cor-texto-suave); margin: 0 0 1rem; }
.folha-filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.folha-filtros span {
    display: inline-flex; gap: .35rem; align-items: center; padding: .25rem .7rem; border-radius: 999px;
    background: var(--roxo-suave); color: var(--roxo); font-size: .78rem; font-weight: 500;
}

.folha-grupo { margin-bottom: 1.25rem; }
.folha-grupo-cabecalho {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .55rem .85rem; border-radius: var(--raio-pequeno) var(--raio-pequeno) 0 0;
    background: var(--roxo-suave); border: 1px solid var(--roxo-borda); border-bottom: 0;
    break-after: avoid;
}
.folha-grupo-cabecalho h3 { font-size: .9rem; font-weight: 700; margin: 0; color: var(--roxo); }
.folha-grupo-cabecalho span { font-size: .8rem; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.folha-grupo-cabecalho strong { color: var(--tinta); }

.folha-tabela { width: 100%; border-collapse: collapse; font-size: .8rem; }
.folha-tabela th {
    text-align: left; padding: .5rem .6rem; background: var(--cinza-50);
    font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-suave);
    border-bottom: 1px solid var(--cor-borda);
}
.folha-tabela td { padding: .45rem .6rem; border-bottom: 1px solid var(--cinza-100); vertical-align: middle; }
.folha-tabela tr { break-inside: avoid; }
.folha-tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.folha-tabela .codigo { color: var(--cor-texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.folha-tabela .forte { font-weight: 600; }
.folha-tabela tfoot td { font-weight: 700; background: var(--cinza-50); border-top: 1px solid var(--cor-borda); border-bottom: 0; }
.folha-grupo .folha-tabela { border: 1px solid var(--cor-borda); }
.linha-estoque-folha td { color: var(--cor-texto-suave); background: var(--cinza-50); font-weight: 500; }
.negativo { color: var(--vermelho) !important; }
.positivo { color: var(--verde) !important; }

.folha-total-geral {
    display: grid; grid-template-columns: 1fr auto auto; gap: 2rem; align-items: center;
    padding: .9rem 1.1rem; border-radius: var(--raio-pequeno);
    background: var(--degrade-destaque); color: var(--branco); font-weight: 600; font-variant-numeric: tabular-nums;
}
.folha-total-geral strong { font-size: 1.15rem; }

.folha-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.folha-secao { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--roxo); margin: 1rem 0 .5rem; }
.folha-barra { height: 4px; background: var(--cinza-100); border-radius: 2px; margin-top: .3rem; }
.folha-barra span { display: block; height: 100%; background: var(--cinza-300); border-radius: 2px; }
.folha-barra i { display: block; height: 100%; background: var(--degrade); border-radius: 2px; }

.folha-tecido { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-end; margin-bottom: 1rem; }
.folha-codigo { font-size: .8rem; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.folha-tecido-nome { font-size: 1.15rem; font-weight: 700; margin: .1rem 0 0; }
.folha-tecido-dados { display: flex; gap: 1.5rem; margin: 0; }
.folha-tecido-dados dt { font-size: .7rem; font-weight: 500; color: var(--cor-texto-suave); }
.folha-tecido-dados dd { margin: 0; font-weight: 600; }

.folha-rodape {
    display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; padding-top: .75rem;
    border-top: 1px solid var(--cor-borda); font-size: .7rem; color: var(--cor-texto-suave);
}

@media (max-width: 1199.98px) {
    .abas-relatorio { grid-template-columns: repeat(2, 1fr); }
    .folha-colunas { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .abas-relatorio, .folha-resumo { grid-template-columns: 1fr 1fr; }
    .folha { padding: 1.25rem; }
    .folha-cabecalho, .folha-tecido { flex-direction: column; align-items: flex-start; }
    .folha-meta { text-align: left; }
}

/* ---------- 21. Impressão (com cores e com o menu, como na tela) ---------- */
@page { size: A4 landscape; margin: 5mm; }

@media print {
    /* Mantém as cores de fundo e os degradês no papel */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    html, body { background: var(--branco); }
    body { font-size: 11px; }
    .nao-imprimir, .topo-acoes, .toast-container, .status-link, .btn-close { display: none !important; }

    /* Menu lateral impresso ao lado do relatório (fixo: se repete em cada página) */
    .sidebar {
        position: fixed !important; inset: 0 auto 0 0; width: 190px !important;
        visibility: visible !important; transform: none !important;
    }
    .sidebar-marca { padding: 1rem .9rem; }
    .sidebar-link { padding: .5rem .6rem; }
    .conteudo { margin-left: 190px !important; }
    .topo { position: static; padding: .5rem 1rem; }
    .pagina { padding: .75rem 1rem; }

    .folha { border: 0; box-shadow: none; padding: 0; max-width: none; }
    .folha-kpi, .folha-destaque { break-inside: avoid; }

    /* Tabelas compactas para caber ao lado do menu */
    .folha-tabela { font-size: 9.5px; table-layout: auto; }
    .folha-tabela th { font-size: 8px; padding: .35rem .4rem; white-space: normal; }
    .folha-tabela td { padding: .3rem .4rem; }
    .folha-tabela .num { white-space: nowrap; }
    a { text-decoration: none; color: inherit; }
}
.folha-kpi-extra { display: block; font-size: .85rem; font-weight: 600; color: var(--roxo); font-variant-numeric: tabular-nums; }

/* ---------- 22. Usuário, setor e níveis de acesso ---------- */
/* Botões que exigem nível maior que o do usuário ficam ocultos (o servidor também bloqueia) */
body[data-nivel="visualizar"] .requer-operar,
body[data-nivel="visualizar"] .requer-gerenciar,
body[data-nivel="operar"] .requer-gerenciar { display: none !important; }

/* "Trocar setor": link discreto abaixo do nome do setor */
.trocar-setor {
    display: inline-flex; align-items: center; gap: .3rem; margin-top: .15rem;
    font-size: .74rem; font-weight: 500; color: var(--cinza-500); text-decoration: none;
}
.trocar-setor .bi { font-size: .7rem; }
.trocar-setor:hover { color: var(--roxo); }

.sidebar-secao {
    display: block; margin: 1.1rem .75rem .35rem;
    font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--cinza-400);
}

.menu-usuario { margin-left: .5rem; }
.topo-acoes:empty + .menu-usuario { margin-left: auto; }
.btn-usuario {
    display: flex; align-items: center; gap: .6rem; padding: .3rem .55rem .3rem .3rem;
    border: 1px solid var(--cor-borda); border-radius: 999px; background: var(--branco); color: var(--tinta);
}
.btn-usuario:hover { background: var(--cinza-50); }
.avatar {
    width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
    background: var(--degrade); color: var(--branco); font-size: .75rem; font-weight: 700;
}
.btn-usuario-texto { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.btn-usuario-texto strong { font-size: .82rem; font-weight: 600; }
.btn-usuario-texto small { font-size: .7rem; color: var(--cor-texto-suave); }
.btn-usuario > .bi { font-size: .7rem; color: var(--cinza-400); }
.menu-usuario .dropdown-menu { border-color: var(--cor-borda); box-shadow: 0 12px 24px -8px rgba(23, 20, 31, .18); border-radius: var(--raio-pequeno); }
.menu-usuario .dropdown-item { display: flex; align-items: center; gap: .55rem; font-size: .85rem; }
.menu-usuario .dropdown-item:active { background: var(--roxo-suave); color: var(--roxo); }

@media (max-width: 767.98px) {
    .btn-usuario-texto, .btn-usuario > .bi { display: none; }
}

@media print {
    .menu-usuario, .trocar-setor { display: none !important; }
}

/* ---------- 23. Administração de usuários ---------- */
/* As células continuam como célula de tabela (alinhamento da linha);
   o layout flexível fica nos elementos internos. */
.usuario-celula { display: flex; align-items: center; gap: .75rem; min-width: 220px; }
.usuario-celula strong { display: block; font-weight: 600; }
.usuario-celula small { display: block; color: var(--cor-texto-suave); }
.usuario-bloqueado td { opacity: .6; }
.setores-celula { display: flex; flex-wrap: wrap; gap: .35rem; }
.situacao-celula { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.situacao-celula small { color: var(--cor-texto-suave); font-size: .74rem; white-space: nowrap; }
.etiqueta-admin { background: var(--roxo-suave); color: var(--roxo); }
.etiqueta-ativo { background: var(--verde-suave); color: var(--verde); }
.etiqueta-ativo .ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); }

.legenda-niveis {
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .9rem; padding: 0 .25rem;
    font-size: .78rem; color: var(--cor-texto-suave);
}
.legenda-niveis strong { color: var(--tinta); font-weight: 600; }

.opcoes-usuario { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.25rem; }
.opcao-switch {
    display: flex; gap: .75rem; align-items: flex-start; padding: .75rem .9rem; cursor: pointer;
    border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno);
}
.opcao-switch .form-check-input { margin-top: .2rem; flex-shrink: 0; }
.opcao-switch .form-check-input:checked { background-color: var(--roxo); border-color: var(--roxo); }
.opcao-switch strong { display: block; font-weight: 600; }
.opcao-switch small { color: var(--cor-texto-suave); font-size: .76rem; }

/* Setores e níveis: opções lado a lado + descrição do nível escolhido */
.lista-acessos { display: grid; gap: .6rem; }
.acesso-setor {
    margin: 0; padding: .85rem 1rem; min-width: 0;
    border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno);
    transition: opacity .15s;
}
.acesso-setor.desabilitado { opacity: .5; }
.acesso-setor-cabecalho { display: flex; align-items: center; gap: .85rem; margin-bottom: .7rem; }
.acesso-setor-texto { flex: 1; min-width: 0; }
.acesso-setor-texto legend {
    display: flex; gap: .4rem; align-items: center; float: none; width: auto;
    margin: 0; padding: 0; font-size: .9rem; font-weight: 600;
}
.acesso-setor-texto small { color: var(--cor-texto-suave); font-size: .76rem; }

.niveis-opcoes {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px;
    border-radius: var(--raio-pequeno); background: var(--cinza-100);
}
.nivel-opcao {
    padding: .45rem .5rem; border-radius: 6px; cursor: pointer; text-align: center;
    font-size: .8rem; font-weight: 500; color: var(--cinza-600);
    transition: background .15s, color .15s, box-shadow .15s;
}
.nivel-opcao:hover { color: var(--tinta); background: rgba(255, 255, 255, .6); }
.btn-check:checked + .nivel-opcao {
    background: var(--branco); color: var(--roxo); font-weight: 600;
    box-shadow: 0 1px 2px rgba(23, 20, 31, .08), 0 0 0 1px var(--roxo-borda);
}
.btn-check:checked + .nivel-opcao.nivel-nenhum { color: var(--tinta); box-shadow: 0 1px 2px rgba(23, 20, 31, .08); }
.btn-check:focus-visible + .nivel-opcao { box-shadow: var(--anel-foco); }
.acesso-setor:disabled .nivel-opcao { cursor: not-allowed; }

.nivel-descricao {
    display: flex; gap: .4rem; align-items: flex-start;
    margin: .55rem 0 0; font-size: .78rem; color: var(--cor-texto-suave);
}
.nivel-descricao::before { content: "\F431"; font-family: "bootstrap-icons"; color: var(--roxo); }

@media (max-width: 575.98px) {
    .opcoes-usuario { grid-template-columns: 1fr; }
    .niveis-opcoes { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 24. Exclusão parcial de lançamentos ---------- */
.pecas-removidas {
    display: inline-block; margin-left: .3rem; padding: 0 .4rem; border-radius: 999px;
    background: var(--vermelho-suave); color: var(--vermelho); font-size: .72rem; font-weight: 600; cursor: help;
}
.resumo-remover {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 0 0 1rem;
    padding: .75rem .9rem; border-radius: var(--raio-pequeno); background: var(--cinza-50); border: 1px solid var(--cor-borda);
}
.resumo-remover dt { font-size: .7rem; font-weight: 500; color: var(--cor-texto-suave); }
.resumo-remover dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575.98px) { .resumo-remover { grid-template-columns: 1fr 1fr; } }

/* =============================================================================
   25. Setor RH
   ============================================================================= */

/* ---------- Gráficos (componentes/graficos.js) ---------- */
:root {
    --serie-1: var(--roxo);
    --serie-2: var(--roxo-claro);   /* #a78bfa: par validado com o roxo (daltonismo e contraste) */
}
.grafico-vazio { margin: 0; padding: 1.5rem 0; text-align: center; color: var(--cor-texto-suave); font-size: .85rem; }
.grafico-dica {
    position: fixed; z-index: 2000; pointer-events: none; max-width: 260px;
    padding: .45rem .65rem; border-radius: 8px; background: var(--tinta); color: var(--branco);
    font-size: .78rem; line-height: 1.4; box-shadow: 0 8px 20px -6px rgba(23, 20, 31, .35);
}

/* Barras horizontais */
.grafico-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.grafico-barras li {
    display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items: center; gap: .75rem;
    font-size: .8rem; border-radius: 6px; outline: none;
}
.grafico-barras li:hover .grafico-barras-trilho span, .grafico-barras li:focus-visible .grafico-barras-trilho span { filter: brightness(1.15); }
.grafico-barras li:focus-visible { box-shadow: var(--anel-foco); }
.grafico-barras-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); }
.grafico-barras-trilho { height: 8px; border-radius: 4px; background: var(--cinza-100); overflow: hidden; }
.grafico-barras-trilho span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--serie-1); }
.grafico-barras.serie-desconto .grafico-barras-trilho span { background: var(--serie-2); }
.grafico-barras-valor { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tinta); }

/* Colunas */
.grafico-legenda { display: flex; gap: 1rem; margin-bottom: .75rem; font-size: .76rem; color: var(--cor-texto-suave); }
.grafico-legenda span { display: inline-flex; align-items: center; gap: .4rem; }
.grafico-legenda i { width: 10px; height: 10px; border-radius: 3px; }
.serie-1 { --cor: var(--serie-1); }
.serie-2 { --cor: var(--serie-2); }
.grafico-legenda i, .grafico-medidor-legenda i { background: var(--cor); }
.grafico-colunas {
    display: grid; grid-template-columns: repeat(var(--grupos), minmax(0, 1fr)); gap: .5rem; align-items: end;
    height: 210px; padding-top: 1.2rem; margin-bottom: 1.6rem; /* espaço para os rótulos abaixo da base */
    border-bottom: 1px solid var(--cinza-300);
}
.grafico-coluna-grupo { display: flex; flex-direction: column; align-items: stretch; height: 100%; min-width: 0; }
.grafico-coluna-barras { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.grafico-coluna {
    position: relative; flex: 1; max-width: 42px; border-radius: 4px 4px 0 0; background: var(--cor);
    outline: none; transition: filter .15s;
}
.grafico-coluna:hover, .grafico-coluna:focus-visible { filter: brightness(1.15); }
.grafico-coluna:focus-visible { box-shadow: var(--anel-foco); }
.grafico-coluna em {
    position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
    font-style: normal; font-size: .7rem; font-weight: 600; white-space: nowrap; color: var(--tinta); font-variant-numeric: tabular-nums;
}
.grafico-coluna-rotulo {
    margin-top: .4rem; margin-bottom: -1.5rem; text-align: center; font-size: .7rem; color: var(--cor-texto-suave);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grafico-coluna-grupo.atual .grafico-coluna-rotulo { color: var(--roxo); font-weight: 600; }
/* Coluna destacada (mês ou ano atual) em gráfico de uma série: mesmo roxo, tom mais escuro */
.grafico-colunas.uma-serie .grafico-coluna-grupo.atual .grafico-coluna { --cor: var(--roxo-escuro); }

/* Medidor (ex.: gênero) */
.grafico-medidor { height: 12px; border-radius: 6px; background: var(--roxo-borda); overflow: hidden; outline: none; }
.grafico-medidor:focus-visible { box-shadow: var(--anel-foco); }
.grafico-medidor span { display: block; height: 100%; background: var(--serie-1); border-right: 2px solid var(--branco); }
.grafico-medidor-legenda { display: flex; justify-content: space-between; gap: 1rem; margin-top: .6rem; font-size: .8rem; color: var(--cor-texto-suave); }
.grafico-medidor-legenda span { display: inline-flex; align-items: center; gap: .4rem; }
.grafico-medidor-legenda i { width: 10px; height: 10px; border-radius: 3px; }
.grafico-medidor-legenda i.trilho { background: var(--roxo-borda); }
.grafico-medidor-legenda strong { color: var(--tinta); }

/* ---------- Avatares ---------- */
.avatar-func {
    flex-shrink: 0; border-radius: 50%; object-fit: cover; object-position: top center; background: var(--cinza-100);
}
.avatar-func.sem-foto {
    display: grid; place-items: center; background: var(--degrade); color: var(--branco); font-weight: 700;
}
.avatar-p { width: 34px; height: 34px; font-size: .72rem; }
.avatar-m { width: 48px; height: 48px; font-size: .9rem; }
.avatar-g { width: 104px; height: 104px; font-size: 1.8rem; }

/* ---------- Cartões do RH (altura igual, conteúdo rola se precisar) ---------- */
.grade-rh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cartao-rh { display: flex; flex-direction: column; min-width: 0; }
.cartao-rh .cartao-corpo { height: 340px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--cinza-300) transparent; }
.cartao-rh.largo { grid-column: 1 / -1; }
.cartao-rh.largo .cartao-corpo { height: auto; }
.titulo-secao strong { float: right; font-size: .8rem; color: var(--tinta); text-transform: none; letter-spacing: 0; }
@media (max-width: 991.98px) { .grade-rh { grid-template-columns: 1fr; } }

/* Aniversariantes */
.lista-aniversarios { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.aniversario-link {
    display: flex; align-items: center; gap: .75rem; padding: .45rem .5rem; border-radius: var(--raio-pequeno);
    color: var(--tinta); text-decoration: none;
}
.aniversario-link:hover { background: var(--cinza-50); }
.lista-aniversarios li.hoje .aniversario-link { background: var(--roxo-suave); }
.aniversario-texto { flex: 1; min-width: 0; }
.aniversario-texto strong { display: block; font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aniversario-texto small, .aniversario-dia small { display: block; font-size: .74rem; color: var(--cor-texto-suave); }
.aniversario-dia { text-align: right; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.lista-vazia { padding: .5rem; font-size: .82rem; color: var(--cor-texto-suave); }

/* Seletores no topo */
.seletor-competencia, .seletor-pessoa { display: flex; align-items: center; gap: .4rem; }
.seletor-competencia { position: relative; }
.seletor-competencia > .bi { position: absolute; left: .75rem; color: var(--roxo); pointer-events: none; }
.seletor-competencia .form-select { padding-left: 2.1rem; min-width: 210px; }
.seletor-pessoa .form-select { min-width: 300px; }
.seletor-mes { width: auto; }

/* ---------- Funcionários: foto no cadastro ---------- */
.foto-funcionario {
    display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.25rem; padding: .9rem 1rem;
    border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); background: var(--cinza-50);
}
.foto-funcionario strong { display: block; font-weight: 600; }
.foto-funcionario small { color: var(--cor-texto-suave); font-size: .78rem; }
.foto-funcionario .avatar-g { width: 84px; height: 84px; }

/* ---------- Folha mensal ---------- */
.aviso-faltantes {
    display: flex; align-items: center; gap: .75rem; margin-top: 1rem; padding: .7rem 1rem;
    border-radius: var(--raio-pequeno); background: var(--roxo-suave); border: 1px solid var(--roxo-borda); color: var(--tinta); font-size: .86rem;
}
.aviso-faltantes > .bi { color: var(--roxo); font-size: 1.1rem; }
.aviso-faltantes .btn { margin-left: auto; }
.folha-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--cor-texto-suave); }
.folha-status.ok { color: var(--verde); }
.folha-dica { display: flex; gap: .5rem; margin: 0; padding: .75rem 1.25rem; font-size: .76rem; color: var(--cor-texto-suave); border-top: 1px solid var(--cor-borda); }

.folha-grade-area {
    overflow: auto; max-height: calc(100vh - 300px); min-height: 320px; /* altura final calculada em folha.js (termina dentro da tela) */
    scrollbar-color: var(--roxo-claro) var(--cinza-100); /* barras de rolagem visíveis, na cor da marca */
}
.folha-grade-area::-webkit-scrollbar { width: 10px; height: 10px; }
.folha-grade-area::-webkit-scrollbar-track { background: var(--cinza-100); }
.folha-grade-area::-webkit-scrollbar-thumb { background: var(--roxo-claro); border-radius: 5px; border: 2px solid var(--cinza-100); }
.folha-grade-area::-webkit-scrollbar-thumb:hover { background: var(--roxo); }
.folha-grade { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: .8rem; }
.folha-grade th, .folha-grade td { border-bottom: 1px solid var(--cinza-100); border-right: 1px solid var(--cinza-100); padding: 0; background: var(--branco); }
.folha-grade thead th {
    position: sticky; top: 0; z-index: 2; padding: .45rem .5rem; background: var(--cinza-50);
    font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--cor-texto-suave);
    text-align: right; white-space: nowrap;
}
.folha-grade thead tr:nth-child(2) th { top: 29px; }
.folha-grade thead .grupo-provento, .folha-grade thead .grupo-desconto { text-align: center; color: var(--tinta); }
.folha-grade thead .grupo-provento { box-shadow: inset 0 -2px 0 var(--serie-1); }
.folha-grade thead .grupo-desconto { box-shadow: inset 0 -2px 0 var(--serie-2); }
/* Coluna do funcionário fixa à esquerda */
.folha-grade .fixa {
    position: sticky; left: 0; z-index: 1; min-width: 280px; max-width: 280px; padding: .4rem .75rem;
    text-align: left; border-right: 1px solid var(--cor-borda); box-shadow: 4px 0 8px -6px rgba(23, 20, 31, .15);
}
.folha-grade thead .fixa { z-index: 3; vertical-align: bottom; }
.folha-grade .fixa .usuario-celula { min-width: 0; }
.folha-grade .fixa .usuario-celula > div { min-width: 0; overflow: hidden; } /* nome, cargo e área não vazam da coluna */
.folha-grade tbody th.fixa a { display: block; font-weight: 600; color: var(--tinta); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folha-grade tbody th.fixa a:hover { color: var(--roxo); }
.folha-grade tbody th.fixa small { display: block; font-weight: 400; font-size: .72rem; color: var(--cor-texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folha-grade tbody tr:hover > * { background: var(--cinza-50); }
.folha-grade .celula {
    width: 104px; padding: .45rem .5rem; border: 0; background: transparent; text-align: right;
    font-variant-numeric: tabular-nums; color: var(--tinta); outline: none;
}
.folha-grade .celula:focus { background: var(--roxo-suave); box-shadow: inset 0 0 0 2px var(--roxo); }
.folha-grade .celula[readonly] { cursor: default; }
.folha-grade .celula.salvando { color: var(--cor-texto-suave); }
.folha-grade .celula.salvo { animation: celula-salva 1.2s ease-out; }
.folha-grade .celula.erro { background: var(--vermelho-suave); box-shadow: inset 0 0 0 2px var(--vermelho); }
@keyframes celula-salva { from { background: var(--verde-suave); } to { background: transparent; } }
.folha-grade .coluna-total {
    position: sticky; right: 0; z-index: 1; min-width: 130px; padding: .45rem .75rem; text-align: right;
    font-weight: 700; font-variant-numeric: tabular-nums; background: var(--roxo-suave); border-left: 1px solid var(--roxo-borda);
}
.folha-grade thead .coluna-total { z-index: 3; color: var(--roxo); vertical-align: bottom; background: var(--roxo-suave); }
.folha-grade tfoot td, .folha-grade tfoot th {
    position: sticky; bottom: 0; z-index: 1; padding: .55rem .5rem; text-align: right;
    font-weight: 700; font-variant-numeric: tabular-nums; background: var(--cinza-50); border-top: 2px solid var(--cor-borda);
}
.folha-grade tfoot .fixa { z-index: 3; text-align: left; }
.folha-grade tfoot .coluna-total { z-index: 3; background: var(--roxo-suave); }

/* ---------- Pessoal ---------- */
.perfil {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem 1.75rem; border-radius: var(--raio);
    background: var(--degrade-destaque); color: var(--branco); box-shadow: 0 14px 34px -18px rgba(42, 14, 92, .65);
}
.perfil::after {
    content: ""; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, .35) 0%, rgba(139, 92, 246, 0) 70%); pointer-events: none;
}
.perfil > * { position: relative; z-index: 1; }
.perfil .avatar-g { border: 4px solid rgba(255, 255, 255, .85); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4); }
.perfil-texto { flex: 1; min-width: 0; }
.perfil-sobretitulo { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .72); }
.perfil-nome { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: .15rem 0; }
.perfil-cargo { margin: 0; color: rgba(255, 255, 255, .85); }
.perfil-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.perfil-chip {
    display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: 999px;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); font-size: .76rem;
}
.perfil-chip.desligado { background: rgba(224, 70, 75, .35); }
.perfil-editar { align-self: flex-start; }
.indicador-valor-texto { font-size: clamp(1rem, 1.3vw, 1.2rem); white-space: normal; }

.salario-total { display: flex; justify-content: space-between; align-items: baseline; padding: .75rem 1rem; margin-bottom: 1rem; border-radius: var(--raio-pequeno); background: var(--roxo-suave); }
.salario-total small { color: var(--cor-texto-suave); }
.salario-total strong { font-size: 1.4rem; font-weight: 700; color: var(--roxo); font-variant-numeric: tabular-nums; }

.comparativo-item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed var(--cor-borda); font-size: .84rem; }
.comparativo-item:last-child { border-bottom: 0; }
.comparativo-item small { color: var(--cor-texto-suave); }
.comparativo-item small strong { color: var(--tinta); }
.comparativo-item span { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.comparativo-item em { font-style: normal; margin-left: .35rem; font-size: .76rem; }
.comparativo-item em.acima { color: var(--verde); }
.comparativo-item em.abaixo { color: var(--vermelho); }

@media (max-width: 767.98px) {
    .perfil { flex-direction: column; text-align: center; }
    .perfil-chips { justify-content: center; }
    .seletor-pessoa .form-select { min-width: 0; }
}
.link-pessoal { color: inherit; text-decoration: none; }
.link-pessoal:hover strong { color: var(--roxo); text-decoration: underline; }
.tabela thead th.quebra { white-space: normal; } /* título longo pode quebrar em duas linhas */

/* ---------- RH: gráficos redondos (rosca) ---------- */
/* Rampa roxa sequencial (clara → escura) para faixas em ordem: idade, tempo de empresa.
   Validada (luminosidade crescente); a mais clara tem pouco contraste, por isso a
   legenda sempre mostra valor e percentual. */
:root {
    --seq-1: #d9cdf7; --seq-2: #b39af0; --seq-3: #8b5cf6; --seq-4: #5a1cbf; --seq-5: #2a0e5c;
}
.seq-1 { --cor: var(--seq-1); }
.seq-2 { --cor: var(--seq-2); }
.seq-3 { --cor: var(--seq-3); }
.seq-4 { --cor: var(--seq-4); }
.seq-5 { --cor: var(--seq-5); }

.grafico-rosca { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.grafico-rosca-figura { position: relative; width: 170px; height: 170px; flex-shrink: 0; }
.grafico-rosca-figura svg { width: 100%; height: 100%; display: block; overflow: visible; }
.grafico-rosca-trilho { fill: none; stroke: var(--cinza-100); stroke-width: 15; }
.grafico-rosca-fatia {
    fill: none; stroke: var(--cor); stroke-width: 15; outline: none; cursor: default;
    transition: stroke-width .15s, filter .15s;
}
.grafico-rosca-fatia:hover, .grafico-rosca-fatia:focus-visible { stroke-width: 18; filter: brightness(1.08); }
.grafico-rosca-centro {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    pointer-events: none; text-align: center;
}
.grafico-rosca-centro strong { font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums; }
.grafico-rosca-centro small { margin-top: .25rem; font-size: .72rem; color: var(--cor-texto-suave); }

.grafico-rosca-legenda { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: .35rem; }
.grafico-rosca-legenda li {
    display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 3rem; align-items: center; gap: .55rem;
    font-size: .8rem; color: var(--cor-texto-suave);
}
.grafico-rosca-legenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--cor); }
.grafico-rosca-legenda span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); }
.grafico-rosca-legenda strong { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.grafico-rosca-legenda em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- RH: dashboard (período, destaque e cards) ---------- */
.seletor-periodo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.seletor-periodo .seletor-competencia .form-select { min-width: 150px; }
.seletor-periodo-ate { font-size: .82rem; color: var(--cor-texto-suave); }

/* Cards com gráfico redondo: conteúdo centralizado na altura do card */
.detalhe-rolagem.centralizado { display: flex; flex-direction: column; justify-content: safe center; }
.detalhe .titulo-secao:first-child { margin-top: 0; }
@media (max-width: 767.98px) {
    /* Celular: seletores do topo (período do dashboard, competência da folha, funcionário) descem para
       uma linha própria, abaixo do título */
    .topo:has(.seletor-competencia), .topo:has(.seletor-pessoa) { flex-wrap: wrap; row-gap: .6rem; }
    .topo-acoes:has(.seletor-competencia), .topo-acoes:has(.seletor-pessoa) { order: 3; width: 100%; margin-left: 0; }
    .topo:has(.seletor-competencia) .menu-usuario, .topo:has(.seletor-pessoa) .menu-usuario { margin-left: auto; }
    .topo-acoes:has(.seletor-competencia) > .seletor-competencia { flex: 1; min-width: 0; }
    .topo-acoes:has(.seletor-competencia) > .seletor-competencia .form-select { min-width: 0; width: 100%; }
    .topo-acoes > .seletor-pessoa { flex: 1; min-width: 0; }
    .topo-acoes > .seletor-pessoa .form-select { min-width: 0; flex: 1; }
    .seletor-periodo { width: 100%; flex-wrap: nowrap; }
    .seletor-periodo .seletor-competencia { flex: 1; min-width: 0; }
    .seletor-periodo .seletor-competencia .form-select { min-width: 0; width: 100%; }
}
/* Lista de aniversários dentro do card: nomes longos cortam com reticências em vez de empurrar a data */
.lista-aniversarios > li { min-width: 0; }
.aniversario-link { min-width: 0; }

/* ---------- Tabelas com títulos das colunas fixos (Estoque, Consulta, Funcionários) ---------- */
/* A linha de títulos fica sempre visível. Quem decide o modo é app.js (classe .tabela-larga):
   cabe na largura → acompanha a rolagem da página, logo abaixo da barra do topo;
   não cabe → a tabela rola por dentro (nos dois sentidos) e o título fica no topo dela. */
.tabela-cabecalho-fixo thead th {
    position: sticky; top: 0; z-index: 5;
    box-shadow: inset 0 -1px 0 var(--cor-borda); /* linha de baixo continua visível ao "flutuar" */
}
/* Colunas um pouco mais justas (a 1ª e a última mantêm o recuo da borda do cartão) */
.tabela-cabecalho-fixo .tabela > :not(caption) > * > *:not(:first-child):not(:last-child) { padding-left: .6rem; padding-right: .6rem; }

/* Cabe na largura: a página rola normalmente e o título para logo abaixo da barra do topo. */
@media (min-width: 992px) {
    .table-responsive.tabela-cabecalho-fixo:not(.tabela-larga) { overflow: visible; }
    .tabela-cabecalho-fixo:not(.tabela-larga) thead th { top: var(--altura-topo, 0px); }
}
/* Não cabe (tela estreita): a tabela rola por dentro, nos dois sentidos, com altura da tela;
   o título continua fixo no topo da tabela. */
.tabela-cabecalho-fixo { scrollbar-width: thin; }
.tabela-cabecalho-fixo.tabela-larga { max-height: calc(100vh - var(--altura-topo, 0px) - 2rem); overflow: auto; }
@media (max-width: 991.98px) {
    .tabela-cabecalho-fixo { max-height: calc(100vh - var(--altura-topo, 0px) - 2rem); overflow: auto; }
}

/* ---------- Relatório do RH: folha mensal (muitas colunas em A4 deitado) ---------- */
.folha-rh { font-size: .74rem; }
.folha-rh th, .folha-rh td { padding: .35rem .45rem; }
.folha-rh thead th { white-space: normal; vertical-align: bottom; }
.folha-rh thead .grupo-provento, .folha-rh thead .grupo-desconto { text-align: center; }
.folha-rh thead .grupo-provento { box-shadow: inset 0 -2px 0 var(--serie-1); }
.folha-rh thead .grupo-desconto { box-shadow: inset 0 -2px 0 var(--serie-2); }
.folha-rh tbody td:last-child, .folha-rh tfoot td:last-child { background: var(--roxo-suave); color: var(--roxo-escuro); }
.folha-observacao { margin: .6rem 0 0; font-size: .72rem; color: var(--cor-texto-suave); }
@media print {
    /* Largura fixa: todas as colunas cabem no A4 deitado (nome 14%, total 9%, o resto dividido igual) */
    .folha-rh { table-layout: fixed; width: 100%; font-size: 7.5px; }
    .folha-rh .col-nome { width: 14%; }
    .folha-rh .col-total { width: 9%; }
    .folha-rh th { font-size: 7px; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; padding-left: .45rem !important; }
    .folha-rh th, .folha-rh td { padding: .2rem .25rem; }
    .folha-rh td { overflow-wrap: anywhere; }
}

/* Celular: botões do topo só com ícone (o texto fica oculto na tela, mas continua para leitores de tela) */
@media (max-width: 575.98px) {
    .topo-acoes .btn > span:not(.visually-hidden) {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .topo-acoes .btn { padding-left: .7rem; padding-right: .7rem; }
}

/* Relatórios na tela: tabelas largas (ex.: folha do RH) rolam dentro da folha, sem alargar a página.
   Na impressão a folha não rola: a tabela se ajusta ao A4 deitado. */
@media screen {
    .folha { overflow-x: auto; }
}

/* Texto de botão nunca quebra em duas linhas (ex.: "Imprimir folha" no topo); quem cede espaço é o título */
.btn:not(.w-100) { white-space: nowrap; }
.menu-usuario { flex-shrink: 0; }
.topo-titulo { flex: 0 1 auto; min-width: 210px; }
/* Se não couberem ao lado do título, os botões descem como um bloco (alinhados à direita) */
.topo-acoes { flex-wrap: wrap; justify-content: flex-end; row-gap: .5rem; min-width: 0; }
.menu-usuario strong, .menu-usuario small { white-space: nowrap; }
/* Elementos "absolute" dentro da tabela (ex.: rótulo oculto da coluna Ações) ficam presos à
   área de rolagem; sem isso, no celular eles alargavam a página inteira. */
.table-responsive { position: relative; }

/* ---------- RH: importação das planilhas antigas ---------- */
/* Aviso para quem só visualiza (some para quem pode operar) */
.requer-sem-operar { display: none; }
body[data-nivel="visualizar"] .requer-sem-operar { display: block; }

/* Meses de 2026: um quadro por mês, com ou sem folha */
.meses-folha { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.mes-folha {
    display: flex; flex-direction: column; gap: .2rem; padding: .8rem .9rem; border-radius: var(--raio-pequeno);
    border: 1px solid var(--cor-borda); background: var(--branco); text-align: left; color: var(--tinta);
}
.mes-folha-nome { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: .9rem; }
.mes-folha small { color: var(--cor-texto-suave); font-size: .74rem; line-height: 1.35; }
.mes-folha strong { font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mes-folha.com-folha { background: var(--roxo-suave); border-color: var(--roxo-borda); }
.mes-folha.com-folha .bi { color: var(--verde); }
.mes-folha.sem-folha { border-style: dashed; background: var(--cinza-50); }
.mes-folha.sem-folha .bi { color: var(--cinza-300); }
button.mes-folha { cursor: pointer; transition: border-color .15s, background .15s; }
button.mes-folha:hover, button.mes-folha:focus-visible { border-color: var(--roxo); background: var(--roxo-suave); outline: none; }
button.mes-folha .acao-mes { color: var(--roxo); font-weight: 600; font-size: .76rem; }
.mes-folha.selecionado { border: 2px solid var(--roxo); padding: calc(.8rem - 1px) calc(.9rem - 1px); }

/* Etapa 1: mês ao lado da área de arrastar */
.importacao-rh { display: grid; grid-template-columns: 240px 1fr; gap: 1.25rem; align-items: start; }
.importacao-rh .regras-importacao { grid-column: 1 / -1; margin-top: 0; }
.importacao-rh-mes .form-text { display: block; margin-top: .4rem; font-size: .76rem; color: var(--cor-texto-suave); }

/* Etapa 2: total, avisos, tabela e botões */
.importacao-total {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: .9rem 1rem; margin-bottom: 1rem; border-radius: var(--raio-pequeno); background: var(--degrade-destaque); color: var(--branco);
}
.importacao-total small { display: block; font-size: .76rem; color: rgba(255, 255, 255, .75); }
.importacao-total strong { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.importacao-total [data-campo="conferencia"] { font-size: .82rem; color: rgba(255, 255, 255, .9); text-align: right; }
.importacao-total .bi-check-circle-fill { color: #8fd4b1; }
.importacao-avisos {
    margin-bottom: 1rem; padding: .65rem .9rem; border-radius: var(--raio-pequeno);
    background: var(--amarelo-suave); border: 1px solid #f8de7e; font-size: .82rem;
}
.importacao-avisos summary { cursor: pointer; font-weight: 600; color: var(--tinta); }
.importacao-avisos summary .bi { color: var(--amarelo); }
.importacao-avisos ul { margin: .5rem 0 0; padding-left: 1.2rem; max-height: 180px; overflow-y: auto; color: var(--cor-texto-suave); }
.tabela-previa-rh { max-height: 420px; overflow-y: auto; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); }
.tabela-previa-rh thead th { position: sticky; top: 0; z-index: 2; }
.tabela-previa-rh tr.ignorado td { color: var(--cor-texto-suave); }
.importacao-acoes { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

@media (max-width: 767.98px) {
    .importacao-rh { grid-template-columns: 1fr; }
    .importacao-total [data-campo="conferencia"] { text-align: left; }
}

/* ---------- Relatórios: filtros com rótulo, orientação do papel e peças do RH ---------- */
.filtro-relatorio { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .82rem; color: var(--cor-texto-suave); white-space: nowrap; }
.filtro-relatorio .form-select, .filtro-relatorio .form-control { width: auto; min-width: 170px; }
.filtro-relatorio.filtro-largo .form-select { min-width: 300px; }

/* Escolha Horizontal/Vertical ao lado do botão Imprimir */
.orientacao-papel { display: inline-flex; padding: 3px; border-radius: var(--raio-pequeno); background: var(--cinza-100); gap: 2px; }
.orientacao-papel button {
    display: inline-flex; align-items: center; gap: .35rem; border: 0; background: transparent; border-radius: 6px;
    padding: .35rem .7rem; font-size: .8rem; font-weight: 500; color: var(--cinza-600);
}
.orientacao-papel button.ativo { background: var(--branco); color: var(--roxo); box-shadow: 0 1px 3px rgba(23, 20, 31, .12); font-weight: 600; }
.orientacao-papel .folha-icone { display: inline-block; border: 1.5px solid currentColor; border-radius: 2px; }
.orientacao-papel .folha-icone.retrato { width: 9px; height: 12px; }
.orientacao-papel .folha-icone.paisagem { width: 12px; height: 9px; }

/* Na tela, a folha tem a largura do papel escolhido (prévia fiel da impressão) */
html[data-orientacao="retrato"] .folha { max-width: 900px; }

/* Ficha do funcionário: dados do cadastro em grade, à direita do nome */
.folha-ficha { align-items: flex-start; }
.folha-ficha .folha-tecido-dados { flex-wrap: wrap; justify-content: flex-end; row-gap: .5rem; max-width: 62%; }
.folha-ficha .folha-tecido-dados .largo { flex-basis: 100%; text-align: right; }

/* Participação de cada área (barra fina, mesma cor da marca) */
.barra-participacao { display: inline-block; width: 70px; height: 6px; margin-right: .4rem; vertical-align: middle; border-radius: 3px; background: var(--cinza-100); overflow: hidden; }
.barra-participacao > span { display: block; height: 100%; background: var(--roxo); border-radius: 0 3px 3px 0; }

@media print {
    /* Vertical: sem o menu lateral, a folha usa a largura toda do A4 em pé */
    html[data-orientacao="retrato"] .sidebar { display: none !important; }
    html[data-orientacao="retrato"] .conteudo { margin-left: 0 !important; }
    html[data-orientacao="retrato"] .topo { display: none !important; } /* o cabeçalho da folha já tem logo e título */

    /* O papel tem largura de "tela pequena": mantém o layout de relatório (sem as adaptações de celular) */
    .topo .d-lg-none { display: none !important; }
    .folha-cabecalho, .folha-tecido { flex-direction: row !important; align-items: flex-end !important; }
    .folha-meta { text-align: right !important; }
    .folha-resumo { grid-template-columns: repeat(4, 1fr) !important; }
    .folha-colunas { grid-template-columns: 1fr 1fr !important; }
    .barra-participacao { width: 45px; }
}
@media (max-width: 767.98px) {
    .filtro-relatorio, .filtro-relatorio .form-select, .filtro-relatorio .form-control { width: 100%; min-width: 0; }
    .filtro-relatorio.filtro-largo .form-select { min-width: 0; }
    .folha-ficha .folha-tecido-dados { max-width: none; justify-content: flex-start; }
    .folha-ficha .folha-tecido-dados .largo { text-align: left; }
}

/* Comparativo mensal: demonstrativo (rubricas nas linhas, meses nas colunas) */
.folha-matriz td:first-child { white-space: nowrap; }
.folha-matriz .linha-grupo td {
    padding-top: .6rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--roxo); border-bottom: 2px solid var(--serie-1);
}
.folha-matriz .linha-grupo.desconto td { border-bottom-color: var(--serie-2); }
.folha-matriz .linha-subtotal td { font-weight: 700; background: var(--cinza-50); }
.folha-matriz .coluna-total { background: var(--roxo-suave); font-weight: 600; }
.folha-matriz tfoot .linha-info td { font-weight: 500; background: var(--branco); color: var(--cor-texto-suave); border-top: 0; }
@media print {
    .folha-matriz { font-size: 8.5px; }
    .folha-matriz th, .folha-matriz td { padding: .25rem .3rem; }
    /* Títulos de coluna da folha podem quebrar (a regra "número não quebra" vale só para os valores) */
    .folha-rh thead th.num { white-space: normal !important; }
}
@media print {
    /* Valores dos indicadores numa linha só, mesmo com 4 por linha no A4 em pé */
    .folha-kpi { padding: .55rem .7rem; }
    .folha-kpi strong { font-size: .95rem; }
    .folha-kpi-extra { font-size: .72rem; }
}

/* =============================================================================
   26. Setor Consultoria (somente consulta)
   ============================================================================= */


/* Pontos de atenção: cor de status + ícone + rótulo (nunca só a cor) */
.etiqueta-alerta { background: var(--vermelho-suave); color: var(--vermelho); }
.etiqueta-atencao { background: var(--amarelo-suave); color: var(--amarelo); }
.etiqueta-info { background: var(--roxo-suave); color: var(--roxo); }
.pontos-atencao { list-style: none; margin: 0; padding: 0; }
.ponto-atencao {
    display: flex; align-items: center; gap: 1rem; padding: .9rem 1.15rem;
    border-bottom: 1px solid var(--cor-borda); border-left: 3px solid transparent;
}
.ponto-atencao:last-child { border-bottom: 0; }
.ponto-atencao > .bi { font-size: 1.15rem; flex-shrink: 0; }
.ponto-atencao.alerta { border-left-color: var(--vermelho); }
.ponto-atencao.alerta > .bi { color: var(--vermelho); }
.ponto-atencao.atencao { border-left-color: var(--amarelo); }
.ponto-atencao.atencao > .bi { color: var(--amarelo); }
.ponto-atencao.info { border-left-color: var(--roxo-claro); }
.ponto-atencao.info > .bi { color: var(--roxo); }
.ponto-atencao-texto { flex: 1; min-width: 0; }
.ponto-atencao-meta { display: flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--cor-texto-suave); }
.ponto-atencao-texto strong { display: block; margin: .2rem 0 .1rem; font-size: .92rem; font-weight: 600; }
.ponto-atencao-texto small { display: block; font-size: .8rem; color: var(--cor-texto-suave); line-height: 1.45; }
.pontos-atencao .lista-vazia { padding: 1.1rem 1.15rem; }

.setor-metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.setor-metrica { padding: .9rem 1.15rem; border-bottom: 1px solid var(--cinza-100); border-right: 1px solid var(--cinza-100); min-width: 0; }
.setor-metrica:nth-child(3n) { border-right: 0; }
.setor-metrica small { display: block; font-size: .74rem; color: var(--cor-texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* rótulo numa linha: cards lado a lado com a mesma altura */
.setor-metrica strong { display: block; margin-top: .15rem; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.setor-metrica span { display: block; margin-top: .1rem; font-size: .74rem; color: var(--roxo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setor-consultoria-rodape { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1.15rem; background: var(--cinza-50); }


@media (max-width: 767.98px) {
    .setor-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .setor-metrica:nth-child(3n) { border-right: 1px solid var(--cinza-100); }
    .setor-metrica:nth-child(2n) { border-right: 0; }
    .ponto-atencao { flex-wrap: wrap; }
    .ponto-atencao .btn { margin-left: auto; }
}

/* Tabelas dentro dos cards de análise: cabem na largura do card (nome corta com reticências) */
.tabela-analise { table-layout: fixed; width: 100%; }
.tabela-analise .col-num { width: 22%; }
.tabela-analise td:first-child strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-analise td:first-child small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cor-texto-suave); }
.tabela-analise thead th.col-num { white-space: nowrap; }

/* Painel de um ponto de atenção: lista só dos itens daquele ponto */
.painel-ponto { --bs-offcanvas-width: min(880px, 100vw); }
.painel-ponto .offcanvas-body { display: flex; flex-direction: column; gap: 1rem; overflow: hidden; }
.painel-ponto .resumo-detalhe { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 0; }
/* A tabela rola por dentro (nos dois sentidos) e o título das colunas fica fixo no topo dela */
.tabela-ponto { border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); overflow: auto; flex: 1; min-height: 0; }
.tabela-ponto thead th { position: sticky; top: 0; z-index: 2; }
.tabela-ponto .celula-dupla { max-width: 240px; }
.tabela-ponto .celula-dupla strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-ponto .celula-dupla small { display: block; font-size: .74rem; color: var(--cor-texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-ponto tfoot td { font-weight: 700; background: var(--cinza-50); border-top: 1px solid var(--cor-borda); }
.tabela-ponto td.text-end { white-space: nowrap; } /* números numa linha; textos (cargo, área) podem quebrar */
.tabela-ponto thead th { white-space: normal; vertical-align: bottom; }
.painel-ponto-rodape { padding: .85rem 1rem; border-top: 1px solid var(--cor-borda); background: var(--cinza-50); }

/* Visão geral da Consultoria: cards expansíveis */
.detalhe.inteiro { grid-column: 1 / -1; }
/* Cards de lista e de indicadores: altura do conteúdo (os de gráfico mantêm a altura fixa) */
.detalhe.altura-livre .detalhe-corpo { height: auto; }
.detalhe-ajuda { margin: 0; padding: .75rem 1.15rem; font-size: .8rem; color: var(--cor-texto-suave); border-bottom: 1px solid var(--cor-borda); }

/* Setores que ainda vão entrar no sistema: faixa discreta abaixo dos cards */
.setores-em-breve-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.setor-em-breve {
    display: flex; align-items: center; gap: .85rem; padding: .85rem 1.15rem;
    border: 1px dashed var(--cinza-300); border-radius: var(--raio); background: var(--cinza-50);
}
.setor-em-breve .cabecalho-icone { background: var(--cinza-100); color: var(--cinza-500); }
.setor-em-breve > div { flex: 1; min-width: 0; }
.setor-em-breve strong { display: block; font-size: .92rem; font-weight: 600; }
.setor-em-breve small { display: block; font-size: .78rem; color: var(--cor-texto-suave); }
@media (max-width: 767.98px) { .setores-em-breve-lista { grid-template-columns: 1fr; } }

/* ---------- Folha mensal: grade maior e linhas realçadas (facilita o lançamento) ---------- */
.folha-grade { font-size: .875rem; }
.folha-grade thead th { font-size: .7rem; padding: .5rem .6rem; }
.folha-grade thead tr:first-child th { height: 33px; }           /* altura fixa da 1ª linha do cabeçalho... */
.folha-grade thead tr:nth-child(2) th { top: 33px; }             /* ...para a 2ª linha grudar logo abaixo */
.folha-grade .celula { width: 118px; padding: .7rem .6rem; }
.folha-grade .fixa { min-width: 300px; max-width: 300px; padding: .55rem .9rem; }
.folha-grade tbody th.fixa a { font-size: .9rem; }
.folha-grade tbody th.fixa small { font-size: .74rem; }
.folha-grade .coluna-total { min-width: 140px; padding: .7rem .85rem; font-size: .9rem; }

/* Zebrado: linhas alternadas (contando só as visíveis, quando a pesquisa filtra) */
.folha-grade tbody tr:nth-child(even of :not([hidden])) > * { background: #f9f8fb; }
.folha-grade tbody tr > .coluna-total, .folha-grade tbody tr:nth-child(even of :not([hidden])) > .coluna-total { background: var(--roxo-suave); }
/* Linha sob o mouse */
/* (repete o seletor do zebrado para vencer a cor das linhas pares) */
.folha-grade tbody tr:hover > *, .folha-grade tbody tr:nth-child(even of :not([hidden])):hover > * { background: #efedf6; }
.folha-grade tbody tr:hover > .coluna-total, .folha-grade tbody tr:nth-child(even of :not([hidden])):hover > .coluna-total { background: var(--roxo-borda); }
/* Linha em edição: destaque forte + faixa roxa ao lado do nome */
.folha-grade tbody tr:focus-within > *, .folha-grade tbody tr:nth-child(even of :not([hidden])):focus-within > * { background: #e6e2f1; border-bottom-color: var(--roxo-borda); }
.folha-grade tbody tr:focus-within > .fixa { box-shadow: inset 4px 0 0 var(--roxo), 4px 0 8px -6px rgba(23, 20, 31, .15); }
.folha-grade tbody tr:focus-within > .fixa a { color: var(--roxo-escuro); }
.folha-grade tbody tr:focus-within > .coluna-total, .folha-grade tbody tr:nth-child(even of :not([hidden])):focus-within > .coluna-total { background: var(--roxo-borda); color: var(--roxo-escuro); }
.folha-grade .celula:focus { background: var(--branco); box-shadow: inset 0 0 0 2px var(--roxo); } /* a célula em edição fica branca dentro da linha roxa */

/* ---------- 25. Desenvolvimento: modelos, ficha, importação e dashboard ---------- */
/* Imagem do modelo (ou ícone no lugar) */
.foto-modelo { display: block; width: 100%; object-fit: cover; object-position: top center; background: var(--cinza-100); }
.foto-modelo.sem-foto { display: grid; place-items: center; color: var(--cinza-300); background: var(--cinza-50); }
.foto-card { aspect-ratio: 3 / 4; }
.foto-card.sem-foto { font-size: 2.4rem; }
.foto-ficha { aspect-ratio: 3 / 4; border-radius: var(--raio); }
.foto-ficha.sem-foto { font-size: 3.5rem; }
.foto-mini { width: 44px; height: 58px; flex-shrink: 0; border-radius: 6px; }
.foto-mini.sem-foto { font-size: 1.1rem; }
.foto-cadastro { width: 84px; height: 112px; border-radius: var(--raio-pequeno); border: 1px solid var(--cor-borda); }
.foto-cadastro.sem-foto { font-size: 1.6rem; }

/* Barra fina de % vendido (uma cor só) */
.barra-venda { display: block; height: 6px; border-radius: 3px; background: var(--roxo-borda); overflow: hidden; }
.barra-venda > span { display: block; height: 100%; border-radius: 3px; background: var(--degrade); transition: width .4s ease; }

/* Lista de modelos: cartões com imagem */
.filtro-modelos { width: auto; min-width: 170px; }
.grade-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.grade-modelos > .vazio, .grade-modelos > .sem-resultados, .grade-modelos > .grafico-vazio { grid-column: 1 / -1; }
.grade-modelos > .sem-resultados { text-align: center; color: var(--cor-texto-suave); padding: 2.5rem 1rem; margin: 0; }
.cartao-modelo {
    display: flex; flex-direction: column; overflow: hidden; color: var(--tinta); text-decoration: none;
    border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--branco);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cartao-modelo:hover, .cartao-modelo:focus-visible {
    border-color: var(--roxo-borda); box-shadow: 0 10px 24px -14px rgba(42, 14, 92, .45); transform: translateY(-2px); color: var(--tinta); outline: none;
}
.cartao-modelo-foto { position: relative; }
.cartao-modelo-etiquetas { position: absolute; left: .5rem; bottom: .5rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.cartao-modelo-etiquetas .etiqueta { box-shadow: 0 1px 3px rgba(23, 20, 31, .15); }
.cartao-modelo-corpo { display: flex; flex-direction: column; gap: .35rem; padding: .8rem .9rem .9rem; }
.cartao-modelo-ref { font-size: .72rem; font-weight: 600; letter-spacing: .03em; color: var(--cor-texto-suave); text-transform: uppercase; }
.cartao-modelo-nome { font-size: .86rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-modelo-venda { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-top: .15rem; }
.cartao-modelo-pct { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--roxo); font-variant-numeric: tabular-nums; }
.cartao-modelo-venda small { font-size: .74rem; color: var(--cor-texto-suave); text-align: right; }
.cartao-modelo-rodape {
    display: flex; justify-content: space-between; gap: .5rem; margin-top: .3rem; padding-top: .55rem;
    border-top: 1px solid var(--cinza-100); font-size: .74rem; color: var(--cor-texto-suave); white-space: nowrap;
}
.cartao-modelo-rodape .bi { color: var(--roxo); }

/* Ficha do modelo: imagem ao lado do destaque e do cadastro */
.ficha-modelo { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 1rem; align-items: start; }
.ficha-modelo-foto { padding: .5rem; }
.ficha-modelo-dados { min-width: 0; }
.ficha-modelo-dados .destaque { grid-template-columns: auto 1fr; }
.ficha-modelo-dados .destaque-metricas { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
.ficha-campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.25rem; margin: 0; }
.ficha-campos dt { font-size: .72rem; font-weight: 500; color: var(--cor-texto-suave); margin-bottom: .15rem; }
.ficha-campos dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ficha-unidades { grid-column: span 4; }
.ficha-grafico { grid-column: span 2; }
.ficha-unidades .linha-fabrica td { background: var(--cinza-50); color: var(--tinta-suave); }
.ficha-unidades tfoot th { background: var(--roxo-suave); font-variant-numeric: tabular-nums; }
@media (max-width: 1199.98px) {
    .ficha-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ficha-unidades, .ficha-grafico { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    .ficha-modelo { grid-template-columns: 1fr; }
    .ficha-modelo-foto { max-width: 280px; }
    .ficha-modelo-dados .destaque-metricas { grid-template-columns: 1fr; }
}

/* Importação: um quadro para cada relatório */
.importacao-dev { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.area-arquivo-ultima { margin-top: .35rem; font-size: .76rem; font-weight: 600; color: var(--roxo); }
@media (max-width: 767.98px) { .importacao-dev { grid-template-columns: 1fr; } }
/* Três relatórios (04/11/2026): estoque, venda de produtos e venda em promoção, com o lembrete do mesmo intervalo */
.importacao-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .importacao-tres { grid-template-columns: 1fr; } }
.importacao-lembrete { display: flex; align-items: center; gap: .45rem; margin: .75rem 0 0; padding: .55rem .8rem; border-radius: var(--raio-pequeno); background: var(--roxo-suave); color: var(--roxo-escuro); font-size: .8rem; }
.importacao-lembrete .bi { color: var(--roxo); }
.importacao-avisos.bloqueio { border-color: var(--vermelho); background: var(--vermelho-suave); }
.importacao-avisos.bloqueio summary, .importacao-avisos.bloqueio summary .bi, .importacao-avisos.bloqueio ul { color: var(--vermelho); }
.previa-lojas { color: rgba(255, 255, 255, .75); font-size: .8rem; }
.previa-lojas b { color: var(--branco); }

/* Dashboard: maior/menor % de venda e análise por tipo */
.filtro-tipo-dev { width: auto; min-width: 180px; }
.lista-modelos { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; counter-reset: posicao; }
.lista-modelos-item {
    display: flex; align-items: center; gap: .75rem; padding: .45rem .5rem; border-radius: var(--raio-pequeno);
    color: var(--tinta); text-decoration: none;
}
.lista-modelos-item:hover { background: var(--cinza-50); color: var(--tinta); }
.lista-modelos-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.lista-modelos-texto strong { font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-modelos-texto small { font-size: .74rem; color: var(--cor-texto-suave); }
.lista-modelos-pct { min-width: 52px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.detalhe-corpo.detalhe-corpo-auto { height: auto; }
.detalhe-corpo-auto > .table-responsive { max-height: 560px; overflow: auto; }
.detalhe-corpo-auto thead th { position: sticky; top: 0; z-index: 2; }
.detalhe-corpo-auto tfoot th { position: sticky; bottom: 0; z-index: 2; background: var(--roxo-suave); }
.col-pct-venda { min-width: 170px; }
.pct-com-barra { display: flex; align-items: center; gap: .6rem; }
.pct-com-barra .barra-venda { flex: 1; }
.pct-com-barra strong { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
#tabelaTipos tr[data-tipo] { cursor: pointer; }
/* Celular: a tabela por unidade rola por dentro do card, sem alargar a página */
.ficha-unidades, .ficha-grafico { min-width: 0; }
@media (max-width: 767.98px) {
    .ficha-modelo { grid-template-columns: minmax(0, 1fr); }
    .ficha-modelo + .grade-detalhes { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 26. Desenvolvimento: coleções e semanas (pastas) ---------- */
/* Caminho: Coleções › INVERNO 2026 › 2ª semana */
.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .9rem; font-size: .85rem; color: var(--cor-texto-suave); }
.trilha a { color: var(--roxo); text-decoration: none; font-weight: 500; }
.trilha a:hover { text-decoration: underline; }
.trilha > .bi { font-size: .7rem; color: var(--cinza-400); }
.trilha [aria-current] { color: var(--tinta); font-weight: 600; }

/* Cabeçalho da coleção aberta */
.cabecalho-colecao {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: 1rem; padding: 1rem 1.15rem;
    border: 1px solid var(--roxo-borda); border-radius: var(--raio); background: var(--roxo-suave);
}
.cabecalho-colecao h2 { font-size: 1.1rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.cabecalho-colecao p { margin: .15rem 0 0; font-size: .82rem; color: var(--cor-texto-suave); }
.cabecalho-colecao > div:nth-child(2) { flex: 1; min-width: 220px; }
.cabecalho-colecao-acoes { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Pastas (coleções e semanas) */
.grade-pastas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .85rem; }
.grade-pastas > .vazio, .grade-pastas > .grafico-vazio { grid-column: 1 / -1; }
.pasta { position: relative; min-width: 0; }
.pasta-link {
    display: flex; flex-direction: column; gap: .6rem; height: 100%; padding: 1rem 1.1rem;
    border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--branco);
    color: var(--tinta); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pasta-link:hover, .pasta-link:focus-visible {
    border-color: var(--roxo-borda); box-shadow: 0 10px 24px -14px rgba(42, 14, 92, .45); transform: translateY(-2px); color: var(--tinta); outline: none;
}
.pasta.ativa .pasta-link { border: 2px solid var(--roxo); padding: calc(1rem - 1px) calc(1.1rem - 1px); background: var(--roxo-suave); }
.pasta-icone {
    width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center;
    border-radius: 10px; background: var(--roxo-suave); color: var(--roxo); font-size: 1.25rem;
}
.pasta-neutra .pasta-icone { background: var(--cinza-100); color: var(--cinza-500); }
.pasta-texto { min-width: 0; padding-right: 1.8rem; }
.pasta-texto strong { display: block; font-size: .95rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasta-texto small { display: block; margin-top: .1rem; font-size: .76rem; color: var(--cor-texto-suave); }
.pasta-numeros { display: flex; gap: 1rem; font-size: .78rem; color: var(--cor-texto-suave); }
.pasta-numeros strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.pasta-venda { display: flex; align-items: center; gap: .6rem; margin-top: auto; }
.pasta-venda .barra-venda { flex: 1; }
.pasta-venda strong { min-width: 42px; text-align: right; font-size: .9rem; color: var(--roxo); font-variant-numeric: tabular-nums; }
.pasta-vazia { margin-top: auto; font-size: .78rem; color: var(--cor-texto-suave); }
.pasta-editar { position: absolute; top: .65rem; right: .65rem; }
.pasta-nova {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 150px;
    border: 2px dashed var(--cinza-300); border-radius: var(--raio); background: var(--cinza-50); color: var(--cor-texto-suave);
    transition: border-color .15s, background .15s, color .15s;
}
.pasta-nova i { font-size: 1.6rem; color: var(--roxo); }
.pasta-nova strong { color: var(--tinta); font-size: .88rem; }
.pasta-nova small { font-size: .74rem; }
.pasta-nova:hover, .pasta-nova:focus-visible { border-color: var(--roxo); background: var(--roxo-suave); outline: none; }

/* Modelos agrupados por semana */
.grupo-modelos { margin-bottom: 1.5rem; }
.grupo-modelos-cabecalho { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; padding-bottom: .45rem; border-bottom: 1px solid var(--cor-borda); }
.grupo-modelos-cabecalho h3 { font-size: .95rem; font-weight: 700; margin: 0; }
.grupo-modelos-cabecalho small { font-size: .78rem; color: var(--cor-texto-suave); }
.cartao-modelo-contexto { font-size: .7rem; font-weight: 600; color: var(--roxo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dashboard: barras por coleção/semana */
.grafico-grupos { max-height: 460px; }

/* Consultoria: cartão do Desenvolvimento com 6 números lado a lado */
@media (min-width: 1200px) {
    .setor-metricas-seis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Relatório por loja: nome da unidade sobre as colunas Vd./Est. */
.tabela-lojas th.grupo-unidade { text-align: center; border-bottom: 1px solid var(--cor-borda); }

/* ---------- 27. Desenvolvimento: Produtos (tabela) e ficha do produto impressa ---------- */
.barra-filtros-produtos { padding-top: .75rem; padding-bottom: .75rem; background: var(--cinza-50); }
.barra-filtros-produtos .form-select { width: auto; min-width: 180px; }
.produto-celula { display: flex; align-items: center; gap: .75rem; min-width: 260px; }
.produto-celula strong { display: block; font-weight: 600; }
.produto-celula small { display: block; color: var(--cor-texto-suave); }
.produto-etiquetas { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.produto-etiquetas .etiqueta { font-size: .68rem; padding: .05rem .45rem; }
.foto-lista { width: 36px; height: 48px; flex-shrink: 0; border-radius: 6px; }
.foto-lista.sem-foto { font-size: .95rem; }

/* Ficha impressa: imagem ao lado do destaque e dos números */
.ficha-impressa { display: grid; grid-template-columns: 190px 1fr; gap: 1rem; align-items: start; }
.ficha-impressa-foto img, .ficha-impressa-foto .sem-foto {
    display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center;
    border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno);
}
.ficha-impressa-foto .sem-foto {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    background: var(--cinza-50); color: var(--cinza-400); font-size: 2.2rem;
}
.ficha-impressa-foto .sem-foto small { font-size: .75rem; }
.ficha-impressa-dados { min-width: 0; }
.ficha-impressa-dados .folha-destaque { margin-bottom: .75rem; }
.ficha-impressa-dados .folha-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.ficha-impressa-campos {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 .5rem;
    border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); overflow: hidden;
}
.ficha-impressa-campos > div { padding: .5rem .7rem; border-right: 1px solid var(--cinza-100); border-bottom: 1px solid var(--cinza-100); min-width: 0; }
.ficha-impressa-campos dt { font-size: .7rem; font-weight: 500; color: var(--cor-texto-suave); }
.ficha-impressa-campos dd { margin: .1rem 0 0; font-size: .82rem; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
    .ficha-impressa { grid-template-columns: 1fr; }
    .ficha-impressa-foto { max-width: 220px; }
    .ficha-impressa-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
    .ficha-impressa { grid-template-columns: 170px 1fr; }
    .ficha-impressa-campos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Relatórios do Desenvolvimento: seis abas numa linha. Em telas médias a descrição não cabe
   ao lado do ícone; fica só o título (curto), sem quebrar o texto. */
@media (min-width: 992px) and (max-width: 1599.98px) {
    .abas-compactas .aba-relatorio { align-items: center; }
    .abas-compactas .aba-relatorio small { display: none; }
}

/* Relatórios do Desenvolvimento: colunas curtas não quebram (tipo, datas, números) */
.sem-quebra { white-space: nowrap; }
.tabela-relatorio-dev th { white-space: nowrap; }
.tabela-relatorio-dev td.num, .tabela-relatorio-dev td.sem-quebra { white-space: nowrap; }
@media print {
    .tabela-relatorio-dev th { white-space: nowrap !important; }
}
/* Na vertical (A4 em pé), as tabelas largas ficam mais compactas para caber na folha;
   os títulos das colunas podem usar duas linhas. */
html[data-orientacao="retrato"] .tabela-relatorio-dev { font-size: .72rem; }
html[data-orientacao="retrato"] .tabela-relatorio-dev th,
html[data-orientacao="retrato"] .tabela-relatorio-dev td { padding-left: .35rem; padding-right: .35rem; }
html[data-orientacao="retrato"] .tabela-relatorio-dev th { white-space: normal; }
@media print {
    html[data-orientacao="retrato"] .tabela-relatorio-dev th { white-space: normal !important; }
}
/* A linha de baixo do nome do modelo (REF · tipo · semana) pode quebrar: é ela que se ajusta à folha */
.tabela-relatorio-dev td:first-child .codigo { white-space: normal; }

/* Títulos alinhados à direita (colunas de números): a setinha de ordenação não ocupa espaço
   (fica sobre o recuo da célula), para o texto do título terminar exatamente onde terminam os números. */
.tabela th.text-end[data-ordenar]::after { margin-left: .15rem; margin-right: calc(-.15rem - 1em); }


/* ---------- Produtos: tabela com larguras fixas e mais respiro ----------
   Colunas de números com a mesma largura, alinhadas à direita (título e valor na mesma linha
   vertical); linhas com altura uniforme (a 2ª linha do produto corta com "…" em vez de quebrar).
   Abaixo da largura mínima a tabela rola para o lado dentro do cartão. */
.tabela-produtos { table-layout: fixed; min-width: 1060px; }
/* Larguras em % da tabela: calculadas para o espaço entre o conteúdo de colunas vizinhas ficar
   parecido em todas elas; como são proporcionais, a tabela se distribui igual em 1366, 1440 ou 1920 px. */
.tabela-produtos .col-produto { width: 24.1%; }
.tabela-produtos .col-pasta { width: 12.5%; }
.tabela-produtos .col-produzidas { width: 10.3%; }
.tabela-produtos .col-vendidas { width: 8.8%; }
.tabela-produtos .col-pct { width: 13.7%; }
.tabela-produtos .col-fabrica { width: 7.6%; }
.tabela-produtos .col-lojas { width: 7.6%; }
.tabela-produtos .col-promo { width: 8.9%; }
.tabela-produtos .col-acao { width: 6.5%; }
.tabela-cabecalho-fixo .tabela-produtos.tabela > :not(caption) > * > * { padding-top: .8rem; padding-bottom: .8rem; }
/* respiro lateral das colunas do meio (vence a regra geral .tabela-cabecalho-fixo, que deixa .6rem) */
.tabela-cabecalho-fixo .tabela-produtos.tabela > :not(caption) > * > *:not(:first-child):not(:last-child) { padding-left: .9rem; padding-right: .9rem; }
.tabela-cabecalho-fixo .tabela-produtos > :not(caption) > * > *:first-child { padding-left: 1.25rem; }
.tabela-cabecalho-fixo .tabela-produtos > :not(caption) > * > *:last-child { padding-right: 1rem; }
.tabela-produtos thead th { vertical-align: bottom; line-height: 1.35; padding-top: .8rem; padding-bottom: .8rem; white-space: normal; }
.tabela-produtos td { font-variant-numeric: tabular-nums; }
.tabela-produtos .produto-celula { min-width: 0; gap: .85rem; }
.tabela-produtos .produto-texto { min-width: 0; }
.tabela-produtos .produto-texto strong,
.tabela-produtos .produto-texto small,
.tabela-produtos .celula-pasta strong,
.tabela-produtos .celula-pasta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-produtos .produto-texto small, .tabela-produtos .celula-pasta small { margin-top: .15rem; font-size: .76rem; }
.tabela-produtos .pct-com-barra { gap: .75rem; }
.tabela-produtos .pct-com-barra strong { min-width: 38px; }
.tabela-produtos .col-pct-venda, .tabela-produtos thead th.text-end { min-width: 0; } /* a largura vem do <colgroup> */
/* O nome do produto pode usar duas linhas (não é cortado); a 2ª linha (REF · tipo · estilista) corta com "…" */
.tabela-produtos .produto-texto strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.tabela-cabecalho-fixo .tabela-produtos > :not(caption) > * > *:first-child { padding-right: .9rem; }
.tabela-produtos .foto-lista { width: 34px; height: 46px; }
.tabela-produtos .celula-envio { margin-top: .15rem; font-size: .74rem; color: var(--cor-texto-suave); white-space: nowrap; }
/* Mais distância entre a coluna de vendidas e a barra do % vendido, e entre o último número e a impressora */
.tabela-cabecalho-fixo .tabela-produtos.tabela > :not(caption) > * > .col-pct-venda:not(:first-child):not(:last-child) { padding-left: 2.6rem; }
.tabela-cabecalho-fixo .tabela-produtos > :not(caption) > * > .col-acoes { padding-left: .5rem; }

/* Telas grandes: o nome do produto não cresce com a coluna; ela fica com uma parte menor
   e o restante vai para as outras colunas, mantendo os espaços parecidos entre todas. */
@media (min-width: 1700px) {
    .tabela-produtos .col-produto { width: 21%; }
    .tabela-produtos .col-pasta { width: 10.5%; }
    .tabela-produtos .col-produzidas { width: 8.5%; }
    .tabela-produtos .col-vendidas { width: 8.5%; }
    .tabela-produtos .col-pct { width: 17.5%; }
    .tabela-produtos .col-fabrica { width: 9.3%; }
    .tabela-produtos .col-lojas { width: 9.3%; }
    .tabela-produtos .col-promo { width: 9.7%; }
    .tabela-produtos .col-acao { width: 5.7%; }
    .tabela-cabecalho-fixo .tabela-produtos.tabela > :not(caption) > * > .col-pct-venda:not(:first-child):not(:last-child) { padding-left: 5rem; }
}

/* ---------- 28. Desenvolvimento: faixas de % (vendido) ----------
   0–69% vermelho · 70–79% amarelo · 80–100% verde. O número aparece sempre ao lado,
   então a leitura não depende só da cor. Os % "ao contrário" (na fábrica, saldo,
   participação nas vendas) não usam as faixas: neles, valor alto não é bom. */
.faixa-baixa { --cor-faixa: #e0464b; --cor-faixa-texto: #c4262c; }
.faixa-media { --cor-faixa: #fcc419; --cor-faixa-texto: #a16207; }
.faixa-alta  { --cor-faixa: #1f9d6f; --cor-faixa-texto: #157a55; }

/* Barras finas (% vendido), gráfico de barras e barra dos relatórios */
.barra-venda[class*="faixa-"] { background: var(--cinza-100); }
.barra-venda[class*="faixa-"] > span,
.grafico-barras li[class*="faixa-"] .grafico-barras-trilho span,
.barra-participacao[class*="faixa-"] > span { background: var(--cor-faixa); }
/* Número do % na cor da faixa (tom mais escuro, para ler bem sobre o branco) */
.pct-faixa[class*="faixa-"] { color: var(--cor-faixa-texto) !important; }
/* Anéis (destaque do Dashboard e da Ficha, folhas impressas) */
.destaque-anel[class*="faixa-"], .folha-anel[class*="faixa-"] { --cor-anel: var(--cor-faixa); }

@media print {
    .barra-venda[class*="faixa-"] > span, .barra-participacao[class*="faixa-"] > span,
    .destaque-anel, .folha-anel { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Cadastro do modelo: grade corte (PP a GG) com a soma, tecidos da peça e costura por parte */
.grade-producao { margin: 0; padding: .85rem 1rem 1rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); background: var(--cinza-50); }
.grade-producao legend { float: none; width: auto; margin: 0 0 .5rem; padding: 0; font-size: .875rem; }
.grade-producao-campos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; align-items: start; }
.grade-numero { font-weight: 500; color: var(--roxo-claro); margin-left: 2px; }
.grade-producao-campos label,
.grade-producao-total .rotulo { display: block; margin-bottom: .25rem; font-size: .75rem; font-weight: 600; color: var(--cor-texto-suave); text-align: center; }
.grade-producao-total { padding-left: .6rem; border-left: 1px solid var(--cor-borda); }
.grade-soma {
    display: flex; align-items: center; justify-content: center; min-height: calc(1.5em + .75rem + 2px);
    border-radius: var(--bs-border-radius); background: var(--roxo-suave); color: var(--roxo-escuro); font-weight: 600;
}
.grade-soma.alerta { background: var(--amarelo-suave); color: var(--amarelo); }
.grade-producao .form-text { margin-top: .5rem; }
.grade-producao .form-text.texto-alerta { color: var(--amarelo); font-weight: 500; }
@media (max-width: 575.98px) {
    .grade-producao-campos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .grade-producao-total { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
}

/* Linhas de tecidos / costuras: [tecido | consumo | unidade | x] e [parte | valor | x] */
.composicao-tecido { display: grid; grid-template-columns: minmax(0, 1fr) 130px 140px 36px; gap: .5rem; align-items: start; }
.composicao-costura { display: grid; grid-template-columns: minmax(0, 1fr) 170px 36px; gap: .5rem; align-items: start; }
.composicao-cabecalho { margin-bottom: .25rem; font-size: .75rem; font-weight: 600; color: var(--cor-texto-suave); }
.composicao-linhas { display: grid; gap: .5rem; }
.composicao-linha .btn-icone { height: calc(1.5em + .75rem + 2px); }
.composicao-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .65rem; }
.composicao-total { font-size: .875rem; color: var(--cor-texto-suave); }
.composicao-total strong { color: var(--tinta); }
@media (max-width: 575.98px) {
    .composicao-tecido { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
    .composicao-tecido > :first-child { grid-column: 1 / -1; }
    .composicao-cabecalho.composicao-tecido { display: none; }
    .composicao-costura { grid-template-columns: minmax(0, 1fr) 130px 36px; }
    /* Cada tecido ocupa duas linhas: um separador deixa claro onde começa o próximo */
    #linhasTecidos { gap: .75rem; }
    #linhasTecidos .composicao-linha + .composicao-linha { padding-top: .75rem; border-top: 1px dashed var(--cor-borda); }
}

/* Ficha do modelo: cartões de tecidos e de costura lado a lado */
.ficha-composicao { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
@media (max-width: 991.98px) {
    .ficha-composicao { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 29. Tecidos: esteira de prioridade dos lançamentos (arrastar e soltar) ---------- */
.tabela .col-arrastar { width: 1%; padding-left: .5rem !important; padding-right: 0 !important; }
.alca-arrastar {
    display: grid; place-items: center; width: 28px; height: 32px; padding: 0;
    border: 0; border-radius: 6px; background: transparent; color: var(--cinza-400);
    cursor: grab; touch-action: none; /* no celular o dedo arrasta a linha em vez de rolar a página */
}
.alca-arrastar:hover, .alca-arrastar:focus-visible { background: var(--roxo-suave); color: var(--roxo); outline: none; }
.alca-arrastar:focus-visible { box-shadow: var(--anel-foco); }
.em-arrasto, .em-arrasto * { cursor: grabbing !important; user-select: none; }
/* Linha sendo arrastada: destacada e "levantada" do resto da lista */
.tabela tr.arrastando > td { background: var(--roxo-suave) !important; }
.tabela tr.arrastando > td:first-child { box-shadow: inset 3px 0 0 var(--roxo); }
.tabela tr.arrastando .alca-arrastar { color: var(--roxo); }
.dica-esteira { margin: 0; padding: .6rem 1rem; font-size: .76rem; color: var(--cor-texto-suave); border-top: 1px solid var(--cinza-100); }
.dica-esteira .bi { color: var(--roxo); }

/* ---------- 30. Tecidos: bolinha com a cor do tecido (deduzida do nome — componentes/cor-tecido.js) ---------- */
.cor-tecido { display: inline-flex; align-items: center; gap: .5rem; }
.cor-bolinha {
    display: inline-block; flex: none; width: 1rem; height: 1rem; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(23, 20, 31, .18); /* contorno: cores claras (off, branco) aparecem no fundo branco */
}
.cor-bolinha.cor-desconhecida { background: transparent; border: 1.5px dashed var(--cinza-500); box-shadow: none; }
.campo-cor { position: relative; }
.campo-cor .cor-bolinha { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 5; }
.campo-cor .cor-bolinha:not([hidden]) ~ .form-control { padding-left: 2.25rem; }
.campo-cor .invalid-feedback { position: static; }

/* ---------- 31. Dashboard limpo (Desenvolvimento) ----------
   Do geral para o detalhe, com pouco texto: filtros numa linha, destaque enxuto, uma faixa de
   números (sem frases) e seções expansíveis sem instruções. Escopo: .painel-limpo. */
.painel-limpo .barra-filtros { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.painel-limpo .barra-filtros-campos { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.painel-limpo .barra-filtros .form-select { width: auto; min-width: 0; font-size: .84rem; border-radius: 10px; }
.painel-limpo .barra-filtros .seletor-competencia .form-select { min-width: 132px; padding-top: .3rem; padding-bottom: .3rem; }
.painel-limpo .barra-filtros .seletor-competencia > .bi { font-size: .8rem; }
.selo-dados {
    display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: 999px;
    font-size: .76rem; font-weight: 500; color: var(--cor-texto-suave);
    background: var(--branco); border: 1px solid var(--cor-borda); cursor: default;
}
.selo-dados-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--cinza-300); }
.selo-dados.ok .selo-dados-ponto { background: var(--verde); box-shadow: 0 0 0 3px rgba(31, 157, 111, .15); }
.selo-dados.atrasado .selo-dados-ponto { background: var(--vermelho); box-shadow: 0 0 0 3px rgba(224, 70, 75, .15); }

/* Destaque: só o % vendido, as peças vendidas e uma linha de contexto */
.destaque.destaque-limpo { grid-template-columns: auto 1fr; gap: 1.75rem; padding: 1.5rem 2rem; }
.destaque-limpo .destaque-anel { width: 108px; height: 108px; padding: 9px; }
.destaque-limpo .destaque-anel-centro strong { font-size: 1.35rem; }
.destaque-limpo .destaque-titulo { font-size: 1.6rem; font-weight: 700; margin-bottom: .25rem; }
.destaque-limpo .destaque-descricao { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.destaque-aviso {
    display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 999px;
    font-size: .74rem; background: rgba(255, 255, 255, .14); color: var(--branco);
}

/* Faixa de números: um único cartão com divisórias finas. Flexível: quando quebra a linha,
   o que sobra estica e ocupa a largura toda (sem célula vazia). */
.faixa-numeros {
    display: flex; flex-wrap: wrap; gap: 1px;
    padding: 0; overflow: hidden; background: var(--cor-borda); margin-bottom: .5rem;
}
.faixa-numeros .numero { flex: 1 1 170px; display: flex; flex-direction: column; gap: .15rem; padding: 1.05rem 1.35rem; background: var(--branco); min-width: 0; }
.faixa-numeros small { font-size: .76rem; font-weight: 500; color: var(--cor-texto-suave); }
.faixa-numeros strong { font-size: clamp(1.2rem, 1.55vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa-numeros .numero-extra { font-size: .74rem; color: var(--cor-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa-numeros .numero-destaque strong { color: var(--roxo); }

/* Títulos de seção: uma palavra, sem instruções */
.painel-limpo .secao-titulo {
    margin: 2rem 0 .65rem; font-size: .74rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .1em; color: var(--cor-texto-suave);
}
.painel-limpo .detalhe-cabecalho { padding: 1rem 1.25rem; }
.painel-limpo .detalhe-titulo strong { font-size: .95rem; }
.painel-limpo .detalhe-rodape { justify-content: center; min-height: 46px; background: transparent; }
.link-discreto { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; font-weight: 600; color: var(--roxo); text-decoration: none; }
.link-discreto:hover { color: var(--roxo-escuro); }
.link-discreto .bi { transition: transform .15s; }
.link-discreto:hover .bi { transform: translateX(2px); }

/* Lista de modelos: % em destaque e "vendidas/produzidas" discreto embaixo */
.painel-limpo .lista-modelos-pct small { display: block; font-size: .7rem; font-weight: 500; color: var(--cor-texto-suave); }

/* Abas segmentadas (card de lojas: vendas, estoque, promoção) */
.abas-segmentadas { display: inline-flex; align-self: flex-start; gap: 2px; margin: 1rem 1.15rem 0; padding: 3px; border-radius: 10px; background: var(--cinza-100); }
.abas-segmentadas button {
    border: 0; background: transparent; padding: .35rem .95rem; border-radius: 8px;
    font-size: .82rem; font-weight: 600; color: var(--cor-texto-suave); transition: background .15s, color .15s;
}
.abas-segmentadas button:hover { color: var(--tinta); }
.abas-segmentadas button.ativa { background: var(--branco); color: var(--tinta); box-shadow: 0 1px 3px rgba(23, 20, 31, .1); }
.abas-segmentadas button:focus-visible { outline: 0; box-shadow: var(--anel-foco); }
.nota-grafico { margin: .75rem 0 0; font-size: .74rem; color: var(--cor-texto-suave); }

@media (max-width: 575.98px) {
    .destaque.destaque-limpo { grid-template-columns: 1fr; justify-items: start; padding: 1.25rem; }
    .faixa-numeros .numero { flex-basis: 140px; padding: .9rem 1.1rem; }
}

/* Versão limpa aplicada a todos os dashboards (.painel-limpo): cabeçalhos dos cards sem o ícone
   colorido, títulos de grupo antigos no mesmo estilo dos novos e sem as instruções. */
.painel-limpo .detalhe-cabecalho > .cabecalho-icone { display: none; }
.painel-limpo .rotulo-grupo { margin: 2rem 0 .65rem; font-size: .74rem; font-weight: 600; letter-spacing: .1em; color: var(--cor-texto-suave); }
.painel-limpo .rotulo-grupo span { display: none; }
.painel-limpo > .destaque:first-child, .painel-limpo > .barra-filtros + .destaque { margin-top: 0; }
.painel-limpo .faixa-numeros strong .indicador-unidade { font-size: .6em; }

/* Versão limpa em todo o sistema: cabeçalhos de cartão e de card expansível sem o ícone colorido */
.cartao-cabecalho .cabecalho-titulo > .cabecalho-icone,
.detalhe-cabecalho > .cabecalho-icone { display: none; }

/* "Como funciona": regras recolhidas num resumo que abre com um clique */
.como-funciona { margin-top: .9rem; }
.como-funciona > summary {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none;
    font-size: .8rem; font-weight: 600; color: var(--cor-texto-suave);
}
.como-funciona > summary::-webkit-details-marker { display: none; }
.como-funciona > summary::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: .65rem; transition: transform .15s; }
.como-funciona[open] > summary::after { transform: rotate(180deg); }
.como-funciona > summary:hover { color: var(--roxo); }
.como-funciona .regras-importacao { margin-top: .6rem; }

/* Abas de tipo de relatório compactas em todo o sistema: título (e ícone); a descrição vira dica */
.abas-relatorio .aba-relatorio small { display: none; }
.abas-relatorio .aba-relatorio { align-items: center; }

/* Indicadores das telas de operação (Folha mensal, Pessoal) no mesmo desenho da faixa de números:
   um cartão só, divisórias finas, sem ícone; a frase de apoio fica pequena e numa linha. */
.grade-indicadores {
    display: flex; flex-wrap: wrap; gap: 1px; padding: 0; overflow: hidden;
    background: var(--cor-borda); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra);
}
.grade-indicadores > .indicador {
    flex: 1 1 170px; min-width: 0; padding: 1.05rem 1.35rem;
    border: 0; border-radius: 0; box-shadow: none; background: var(--branco);
}
.grade-indicadores .indicador-icone { display: none; }
.grade-indicadores .indicador-rotulo { font-size: .76rem; }
.grade-indicadores .indicador-valor { font-weight: 700; }
.grade-indicadores .indicador-detalhe { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grade-indicadores .indicador-destaque { background: var(--branco); }

/* Relatórios impressos: números numa grade única com divisórias finas (em vez de caixas cinza separadas).
   O contorno de cada número cobre o espaço de 1px entre eles; célula vazia no fim fica branca. */
.folha-resumo { gap: 1px; padding: 0; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); overflow: hidden; background: var(--branco); }
.folha-kpi { border: 0; border-radius: 0; background: var(--branco); outline: 1px solid var(--cor-borda); }
.folha-kpi-destaque { background: var(--branco); }
/* As abas nunca passam da largura da tela (títulos longos quebram a linha dentro da aba) */
.abas-relatorio .aba-relatorio { min-width: 0; }
.abas-relatorio .aba-relatorio strong { overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
    .abas-relatorio { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------- 32. Campos de filtro no modelo novo (o mesmo da barra do dashboard) ----------
   Compactos (altura 34px, fonte .84rem, cantos 10px), sem rótulo escrito (o próprio valor diz o que é;
   o rótulo vira dica e continua para leitores de tela) e sem botão "Atualizar" (aplica ao trocar). */
.barra-ferramentas .form-select, .barra-ferramentas .form-control,
.controles-relatorio .form-select, .controles-relatorio .form-control,
.topo-acoes .form-select,
.painel-limpo .barra-filtros .form-select {
    min-height: 34px; padding-top: .3rem; padding-bottom: .3rem;
    font-size: .84rem; border-radius: 10px;
}
.barra-ferramentas .form-select, .controles-relatorio .form-select, .topo-acoes .form-select { padding-left: .8rem; padding-right: 2.1rem; background-position: right .7rem center; }
.barra-ferramentas .campo-busca .form-control, .controles-relatorio .campo-busca .form-control { padding-left: 2.1rem; }
.topo-acoes .seletor-competencia .form-select, .topo-acoes .seletor-pessoa .form-select { padding-left: 2rem; }
.topo-acoes .seletor-competencia > .bi { font-size: .8rem; left: .7rem; }
.seletor-competencia .form-select { min-width: 132px; }
.filtro-modelos, .barra-filtros-produtos .form-select { min-width: 150px; }

/* Relatórios: os filtros ficam numa linha solta (sem o cartão em volta) */
.controles-relatorio { padding: 0; margin-bottom: 1rem; gap: .5rem; background: transparent; border: 0; box-shadow: none; }
.controles-relatorio .form-select { min-width: 150px; }
.controles-relatorio > button[type="submit"] { display: none; } /* aplica sozinho ao trocar (app.js) */
.filtro-relatorio { gap: .35rem; }
.filtro-relatorio > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.filtro-relatorio.filtro-ate > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: .82rem; color: var(--cor-texto-suave); }
.filtro-relatorio .form-select, .filtro-relatorio .form-control { min-width: 150px; }
.filtro-relatorio.filtro-largo .form-select { min-width: 280px; }
.barra-filtros-produtos { background: transparent; }
/* Barras com busca + chips + selects: a busca cede espaço para tudo caber numa linha */
.barra-ferramentas { gap: .5rem; }
.barra-ferramentas .campo-busca { flex: 1 1 190px; }
.filtro-modelos { max-width: 200px; }


/* ---------- 33. Identidade nova (a mesma da tela de login) dentro do sistema ----------
   Roxo mais vivo com ondas lilás nos destaques, brilho lilás suave no fundo, cartões mais
   arredondados com sombra arroxeada difusa e títulos fortes e compactos. */
:root {
    --degrade-destaque: linear-gradient(110deg, #170c38 0%, #2a0e5c 50%, #5a1cbf 100%);
    --ondas-destaque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='xMaxYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238b5cf6'/%3E%3Cstop offset='.5' stop-color='%236a2fd6'/%3E%3Cstop offset='1' stop-color='%233a1488'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237c4ce8'/%3E%3Cstop offset='1' stop-color='%232a0e5c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M860 0 C830 70 760 95 770 160 C780 225 850 240 890 205 C930 170 905 120 950 85 C990 55 1060 50 1100 0 Z' fill='url(%23a)' opacity='.45'/%3E%3Cpath d='M1200 70 C1130 95 1080 150 1095 210 C1105 255 1070 285 1040 300 L1200 300 Z' fill='url(%23b)' opacity='.35'/%3E%3Cpath d='M0 255 C60 240 120 255 150 285 C158 293 158 298 156 300 L0 300 Z' fill='url(%23a)' opacity='.3'/%3E%3C/svg%3E");
    --raio: 16px;
    --raio-pequeno: 10px;
    --sombra: 0 1px 2px rgba(23, 20, 31, .03), 0 12px 32px -20px rgba(23, 12, 56, .22);
}
body {
    background:
        radial-gradient(45% 40% at 20% 0%, rgba(42, 14, 92, .05) 0%, transparent 70%),
        radial-gradient(40% 45% at 100% 100%, rgba(90, 28, 191, .04) 0%, transparent 70%),
        var(--cinza-50);
    background-attachment: fixed;
}
/* Destaques roxos (dashboards, ficha do modelo, pessoal): ondas por cima do degradê */
.destaque {
    background: var(--ondas-destaque) right center / cover no-repeat, var(--degrade-destaque);
    border-radius: 20px;
    box-shadow: 0 24px 48px -28px rgba(42, 14, 92, .7);
}
.destaque::after { display: none; }
.destaque-anel-centro { background: #1f0d47; }
/* Títulos das páginas com o mesmo peso do "Entrar" do login */
.topo h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.035em; }
.destaque-titulo { font-weight: 800; letter-spacing: -.03em; }
/* Caixas de seleção roxas quando marcadas */
.form-check-input:checked { background-color: var(--roxo); border-color: var(--roxo); }
.form-check-input:focus { box-shadow: var(--anel-foco); border-color: var(--roxo); }

/* Anel do % vendido sobre o roxo escuro do destaque (Ficha do modelo): as cores das faixas
   ganham versões mais claras e um brilho leve, para o verde (e o amarelo/vermelho) não se
   apagarem no fundo roxo. Nos cartões brancos e nas folhas impressas, continuam os tons normais. */
.destaque .destaque-anel.faixa-alta  { --cor-anel: #3ee6a1; filter: drop-shadow(0 0 10px rgba(62, 230, 161, .35)); }
.destaque .destaque-anel.faixa-media { --cor-anel: #ffd43b; filter: drop-shadow(0 0 10px rgba(255, 212, 59, .3)); }
.destaque .destaque-anel.faixa-baixa { --cor-anel: #ff6b6b; filter: drop-shadow(0 0 10px rgba(255, 107, 107, .3)); }
.destaque .destaque-anel { background: conic-gradient(var(--cor-anel, var(--branco)) calc(var(--progresso) * 1%), rgba(255, 255, 255, .14) 0); }

/* ---------- 34. Botões no roxo escuro (o mesmo degradê dos destaques) ----------
   Botão principal: degradê do azul-noite ao violeta; ao passar o mouse, um pouco mais escuro. */
.btn-primary {
    background-image: linear-gradient(110deg, #2a0e5c 0%, #5a1cbf 100%);
    border-color: #3f1590;
    box-shadow: 0 6px 16px -10px rgba(42, 14, 92, .8);
}
.btn-primary:hover, .btn-primary:focus-visible {
    background-image: linear-gradient(110deg, #1f0a47 0%, #4a17a3 100%);
    border-color: #2a0e5c;
}
.btn-primary:active { background-image: linear-gradient(110deg, #170c38 0%, #3f1590 100%); }
.btn-primary:disabled, .btn-primary.disabled { background-image: none; box-shadow: none; --bs-btn-disabled-bg: #8a7fb0; --bs-btn-disabled-border-color: #8a7fb0; }

/* ---------- 35. Gráficos do padrão limpo (aprovados no protótipo, out/2026) ----------
   Usados por assets/js/componentes/graficos-limpos.js nos dashboards do RH, do Desenvolvimento
   e da Consultoria. Cores da Artsy; faixas de % vendido pelas variáveis --cor-faixa (seção 28). */
.detalhe.dois-tercos { grid-column: span 4; }
.detalhe.detalhe-alto { --altura-detalhe: 540px; }
.detalhe.detalhe-baixo { --altura-detalhe: 270px; }
@media (max-width: 1199.98px) { .detalhe.dois-tercos { grid-column: span 2; } }
@media (max-width: 767.98px) { .detalhe.dois-tercos { grid-column: span 1; } }

/* Rosca + legenda (ao lado ou embaixo) */
.gr-rosca-bloco { display: flex; align-items: center; gap: 18px; width: 100%; }
.gr-rosca-bloco.embaixo { flex-direction: column; gap: 16px; }
.gr-rosca { position: relative; width: 120px; flex: none; }
.gr-rosca-bloco.embaixo .gr-rosca { width: 140px; }
.gr-rosca svg { display: block; width: 100%; }
.gr-rosca-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gr-rosca-centro b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.gr-rosca-centro span { font-size: .72rem; color: var(--cor-texto-suave); }
.gr-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; min-width: 0; width: 100%; font-size: .8rem; }
.gr-legenda li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 40px; column-gap: 10px; align-items: center; }
.gr-legenda li:not(:has(em)) { grid-template-columns: 10px minmax(0, 1fr) 40px; }
.gr-legenda i { width: 10px; height: 10px; border-radius: 50%; }
.gr-legenda span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-legenda em { font-style: normal; color: var(--cor-texto-suave); text-align: right; font-variant-numeric: tabular-nums; }
.gr-legenda b { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.gr-legenda small { grid-column: 2 / -1; font-size: .72rem; color: var(--cor-texto-suave); }

/* Colunas com eixo */
.gr-colunas { display: flex; gap: 8px; height: 200px; margin-top: 18px; }
.gr-eixo { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 22px; font-size: .68rem; color: var(--cor-texto-suave); text-align: right; min-width: 18px; font-variant-numeric: tabular-nums; }
.gr-eixo span { line-height: 0; white-space: nowrap; }
.gr-area-colunas { position: relative; flex: 1; display: flex; align-items: stretch; gap: 10px; padding-bottom: 22px; }
.gr-linhas { position: absolute; inset: 0 0 22px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.gr-linhas i { border-top: 1px dashed #e6e2f1; }
.gr-linhas i:last-child { border-top-style: solid; border-color: var(--cor-borda); }
.gr-col { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.gr-col > span { position: absolute; bottom: -20px; max-width: 100%; font-size: .7rem; color: var(--cor-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-par { display: flex; align-items: flex-end; justify-content: center; gap: 5px; width: 100%; height: 100%; }
.gr-col-barra { position: relative; width: 100%; max-width: 34px; min-height: 2px; border-radius: 6px 6px 2px 2px; background: #8b5cf6; }
.gr-colunas.agrupadas .gr-col-barra { max-width: 28px; background: var(--roxo); }
.gr-col-barra.maior { background: var(--roxo); }
.gr-col-barra.clara, .gr-colunas.agrupadas .gr-col-barra.clara { background: #a78bfa; }
.gr-col-barra b { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: .72rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gr-legenda-topo { display: flex; gap: 14px; font-size: .74rem; color: var(--cor-texto-suave); }
.gr-legenda-topo i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--roxo); }
.gr-legenda-topo i.clara { background: #a78bfa; }

/* Trilhos com marcador */
.gr-trilhos { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; width: 100%; }
.gr-trilhos li { display: grid; grid-template-columns: 104px 1fr 28px; align-items: center; gap: 12px; font-size: .8rem; white-space: nowrap; }
.gr-trilhos li > span { overflow: hidden; text-overflow: ellipsis; }
.gr-trilhos b { text-align: right; font-variant-numeric: tabular-nums; }
.gr-trilho { position: relative; height: 3px; border-radius: 2px; background: #e6e2f1; }
.gr-trilho i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: linear-gradient(90deg, #a78bfa, var(--roxo)); }
.gr-trilho i::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--roxo); box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(42, 14, 92, .35); }

/* Barras com o nome em cima */
.gr-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gr-barras li { display: grid; gap: 4px; font-size: .78rem; }
.gr-barras-txt { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.gr-barras-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-barras-txt b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gr-barra { height: 6px; border-radius: 4px; background: var(--roxo-suave); overflow: hidden; }
.gr-barra i { display: block; height: 100%; border-radius: 4px; background: var(--roxo); }

/* Rubricas da folha (proventos e descontos) */
.gr-rubricas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gr-rubricas li { display: grid; grid-template-columns: minmax(96px, 128px) 1fr minmax(96px, auto) 52px; align-items: center; gap: 12px; font-size: .8rem; }
.gr-rubricas li > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-rubricas .gr-barra { height: 8px; }
.gr-rubricas b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.gr-rubricas em { font-style: normal; text-align: right; color: var(--cor-texto-suave); font-size: .74rem; font-variant-numeric: tabular-nums; }
.gr-rubricas.clara .gr-barra i { background: #a78bfa; }
.gr-grupo-titulo { display: flex; justify-content: space-between; margin: 0 0 10px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gr-grupo-titulo strong { font-size: .85rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.gr-grupo + .gr-grupo { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cor-borda); }

/* Área (linha com preenchimento) e resumo embaixo */
.gr-area { display: block; width: 100%; height: auto; overflow: visible; }
.gr-area text { font-family: Inter, sans-serif; font-size: 11px; fill: var(--cor-texto-suave); }
.gr-area text.gr-dica { fill: #fff; font-weight: 700; font-size: 11.5px; }
.gr-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 14px; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); background: var(--cor-borda); overflow: hidden; }
.gr-resumo div { background: #fff; padding: 10px 14px; min-width: 0; }
.gr-resumo span { display: block; font-size: .72rem; color: var(--cor-texto-suave); }
.gr-resumo b { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.gr-resumo small { font-size: .7rem; color: var(--cor-texto-suave); }
.gr-area-com-resumo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(200px, 1fr); gap: 28px; align-items: center; }
.gr-area-com-resumo .gr-resumo { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
@media (max-width: 991.98px) { .gr-area-com-resumo { grid-template-columns: minmax(0, 1fr); } .gr-area-com-resumo .gr-resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Tabelas enxutas com barra de % vendido na cor da faixa (coleções e tipos de peça) */
.gr-tabela { display: grid; font-size: .82rem; }
.gr-tab-cab, .gr-tab-linha { display: grid; align-items: center; gap: 20px; padding: 10px 0; }
.gr-tab-colecoes .gr-tab-cab, .gr-tab-colecoes .gr-tab-linha { grid-template-columns: minmax(140px, 1.2fr) minmax(200px, 3fr) 90px 90px 70px; }
.gr-tab-tipos .gr-tab-cab, .gr-tab-tipos .gr-tab-linha { grid-template-columns: minmax(120px, 1fr) minmax(200px, 2.6fr) 110px 90px 110px 70px; }
.gr-tab-cab { padding-top: 0; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-texto-suave); border-bottom: 1px solid var(--cor-borda); }
.gr-tab-linha { border-bottom: 1px solid var(--cor-borda); font-variant-numeric: tabular-nums; }
.gr-tab-linha:last-child { border-bottom: 0; }
.gr-tab-linha.total { font-weight: 700; border-top: 1px solid var(--cor-borda); }
.gr-tab-linha.clicavel { cursor: pointer; border-radius: 8px; }
.gr-tab-linha.clicavel:hover { background: var(--roxo-suave); }
.gr-tab-linha > b, .gr-tab-linha > div > b { font-weight: 700; }
.gr-tab-linha > div > small { display: block; font-size: .7rem; color: var(--cor-texto-suave); }
.gr-tab-cab > span:nth-child(n+3), .gr-tab-linha > span { text-align: right; }
.gr-tab-linha small { color: var(--cor-texto-suave); font-size: .72rem; }
.gr-bullet { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 12px; }
.gr-bullet::before { content: ""; grid-area: 1 / 1; height: 8px; border-radius: 4px; background: var(--roxo-suave); }
.gr-bullet i { grid-area: 1 / 1; display: block; height: 8px; border-radius: 4px; background: var(--cor-faixa, var(--roxo)); }
.gr-bullet b { font-weight: 800; text-align: right; }
.gr-faixas-legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: .72rem; color: var(--cor-texto-suave); }
.gr-faixas-legenda i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--cor-faixa); }
@media (max-width: 991.98px) { .gr-tabela { overflow-x: auto; } .gr-tab-cab, .gr-tab-linha { min-width: 640px; } }

/* Modelos (maior e menor % de venda): posição, foto, nome, barra e % */
.gr-modelos { list-style: none; margin: 0; padding: 0; }
.gr-modelos li { border-bottom: 1px solid var(--cor-borda); }
.gr-modelos li:last-child { border-bottom: 0; }
.gr-modelo { display: grid; grid-template-columns: 18px 44px minmax(0, 1fr) 64px; align-items: center; gap: 12px; padding: 10px 0; color: inherit; text-decoration: none; }
a.gr-modelo:hover .gr-modelo-txt b { color: var(--roxo); }
.gr-posicao { font-size: .78rem; font-weight: 700; color: var(--cor-texto-suave); text-align: center; font-variant-numeric: tabular-nums; }
.gr-modelo .foto-modelo { width: 44px; height: 52px; border-radius: 10px; }
.gr-modelo-txt { min-width: 0; }
.gr-modelo-txt b { display: block; font-size: .84rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-modelo-txt small { display: block; font-size: .72rem; color: var(--cor-texto-suave); }
.gr-modelo-txt .barra-venda { margin-top: 7px; }
.gr-modelo-num { text-align: right; font-variant-numeric: tabular-nums; }
.gr-modelo-num b { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.gr-modelo-num small { display: block; font-size: .72rem; color: var(--cor-texto-suave); }

/* Aniversariantes: lista compacta (avatar, nome e área; data e idade à direita) */
.gr-pessoas { list-style: none; margin: 0; padding: 0; }
.gr-pessoas li { border-bottom: 1px solid var(--cor-borda); }
.gr-pessoas li:last-child { border-bottom: 0; }
.gr-pessoa { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 0; color: inherit; text-decoration: none; font-size: .8rem; }
.gr-pessoas li.hoje .gr-pessoa { background: var(--roxo-suave); border-radius: 10px; padding-inline: 8px; }
.gr-pessoa .avatar-func { width: 32px; height: 32px; }
.gr-pessoa-txt { min-width: 0; }
.gr-pessoa-txt b, .gr-pessoa-txt small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-pessoa-txt b { font-weight: 600; }
.gr-pessoa-txt small { font-size: .72rem; color: var(--cor-texto-suave); }
.gr-pessoa-quando { text-align: right; font-variant-numeric: tabular-nums; }
.gr-pessoa-quando b { display: block; font-weight: 600; }
.gr-pessoa-quando small { display: block; font-size: .72rem; color: var(--cor-texto-suave); }

/* Consultoria · Visão geral: pontos de atenção enxutos e cartões dos setores */
.gr-pontos { list-style: none; margin: 0; padding: 0 1.25rem .5rem; }
.gr-pontos li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--cor-borda); }
.gr-pontos li:last-child { border-bottom: 0; }
.gr-pontos li.lista-vazia { display: block; }
.gr-ponto-marca { width: 10px; height: 10px; border-radius: 50%; align-self: start; margin-top: 4px; }
.gr-pontos .alerta .gr-ponto-marca { background: #e0464b; box-shadow: 0 0 0 4px #fdf0f0; }
.gr-pontos .atencao .gr-ponto-marca { background: #fcc419; box-shadow: 0 0 0 4px #fff8d6; }
.gr-pontos .info .gr-ponto-marca { background: var(--roxo); box-shadow: 0 0 0 4px var(--roxo-suave); }
.gr-ponto-txt { min-width: 0; }
.gr-ponto-txt small { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-texto-suave); }
.gr-pontos .alerta .gr-ponto-txt small { color: #c4262c; }
.gr-pontos .atencao .gr-ponto-txt small { color: #a16207; }
.gr-ponto-txt strong { display: block; font-size: .88rem; font-weight: 700; margin-top: 1px; }
.gr-ponto-txt span { display: block; font-size: .76rem; color: var(--cor-texto-suave); }
.gr-ponto-acao { padding: 0; border: 0; background: none; font-size: .78rem; font-weight: 600; color: var(--roxo); white-space: nowrap; }
.gr-ponto-acao:hover { color: var(--roxo-escuro); text-decoration: underline; }
.gr-setor { display: flex; flex-direction: column; gap: 16px; padding: 1rem 1.25rem 1.25rem; }
.gr-setor-topo { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 16px; }
.gr-setor-topo p { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--cor-texto-suave); }
.gr-setor-topo p b { color: var(--tinta); }
.gr-setor-anel { position: relative; width: 96px; }
.gr-setor-anel svg { display: block; width: 100%; }
.gr-setor-anel > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gr-setor-anel b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.gr-setor-anel span { font-size: .66rem; color: var(--cor-texto-suave); }
.gr-setor-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); background: var(--cor-borda); overflow: hidden; }
.gr-setor-nums div { background: #fff; padding: 10px 12px; min-width: 0; }
.gr-setor-nums dt { font-size: .7rem; font-weight: 500; color: var(--cor-texto-suave); }
.gr-setor-nums dd { margin: 1px 0 0; font-size: .95rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-setor-nums small { display: block; font-size: .68rem; color: var(--cor-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Desenvolvimento · categorias de peça (Vestidos, Blusas...): a linha da categoria soma os tipos
   e abre a lista deles; os tipos ficam recuados, com um fio roxo à esquerda. */
.gr-categoria { border-bottom: 1px solid var(--cor-borda); }
.gr-categoria .gr-tab-linha { border-bottom: 0; }
.gr-categoria-linha { cursor: pointer; border-radius: 8px; }
.gr-categoria-linha:hover { background: var(--roxo-suave); }
.gr-categoria-linha:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }
.gr-categoria-linha > div > b { display: flex; align-items: center; gap: 8px; }
.gr-categoria-linha > div > small { padding-left: 22px; }
.gr-categoria-seta { font-size: .8rem; color: var(--roxo); transition: transform .15s ease; }
.gr-categoria.aberta .gr-categoria-seta { transform: rotate(90deg); }
.gr-categoria.aberta { background: linear-gradient(var(--roxo-suave), var(--roxo-suave)) left top / 3px 100% no-repeat; }
.gr-categoria-tipos { padding-bottom: 8px; }
.gr-subtipo { padding-top: 7px; padding-bottom: 7px; font-size: .78rem; }
.gr-subtipo > b { font-weight: 600 !important; padding-left: 22px; color: var(--tinta); }
.gr-categoria-ver { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 4px 22px; font-size: .76rem; font-weight: 600; color: var(--roxo); text-decoration: none; }
.gr-categoria-ver:hover { color: var(--roxo-escuro); text-decoration: underline; }
/* Em 2/3 da largura: colunas mais justas para caber sem rolagem. */
.detalhe.dois-tercos .gr-tab-tipos .gr-tab-cab, .detalhe.dois-tercos .gr-tab-tipos .gr-tab-linha { grid-template-columns: minmax(118px, 1.1fr) minmax(120px, 2fr) 112px 84px 80px 54px; gap: 14px; }
@media (max-width: 991.98px) { .gr-categoria { min-width: 640px; } }

/* Relatório da coleção: linha da categoria em destaque e os tipos recuados embaixo. */
.tabela-categorias .linha-categoria td { background: var(--roxo-suave); }
.tabela-categorias .linha-categoria td:first-child { color: var(--roxo-escuro); }
.tabela-categorias .linha-tipo td:first-child { padding-left: 1.6rem; font-weight: 500; }
.tabela-categorias .nota-tipo { font-weight: 500; font-size: .9em; color: var(--cor-texto-suave); }

/* Consultoria · Visão geral: folha de pagamento por mês sem rolagem, centralizada na vertical
   (mesma altura de antes, espaço igual em cima e embaixo) e na largura toda do card. */
.gr-folha-mensal { display: flex; flex-direction: column; justify-content: center; min-height: 300px; padding: 1.1rem 1.15rem; overflow: visible; }

/* Desenvolvimento · Dashboard: estoque parado nas lojas em reais (peças × preço de venda).
   Total em destaque no roxo escuro da marca, à esquerda; o valor de cada loja em barras, à direita. */
.estoque-parado { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 1.5rem; align-items: center; padding: 1.1rem 1.15rem; }
.estoque-parado-total { display: flex; flex-direction: column; gap: .3rem; padding: 1.25rem 1.35rem; border-radius: 14px; color: #fff;
    background: linear-gradient(135deg, #170c38 0%, #2a0e5c 45%, #5a1cbf 100%); box-shadow: 0 14px 30px -18px rgba(42, 14, 92, .75); }
.estoque-parado-total small { font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.estoque-parado-total strong { font-size: clamp(1.55rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.estoque-parado-total span { font-size: .8rem; color: rgba(255, 255, 255, .85); }
.estoque-parado-total .estoque-parado-nota { margin-top: .45rem; padding-top: .55rem; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .74rem; color: rgba(255, 255, 255, .7); }
.estoque-parado-lojas .gr-barras { gap: 14px; }
.estoque-parado-lojas .gr-barras li { font-size: .82rem; }
.estoque-parado-lojas .gr-barra { height: 10px; }
@media (max-width: 767.98px) { .estoque-parado { grid-template-columns: 1fr; gap: 1.1rem; } }
/* Ao lado da Participação nas vendas: aberto, o card acompanha a altura do vizinho, com o conteúdo centralizado na vertical. */
.detalhe[data-detalhe="parado"].aberto { align-self: stretch; display: flex; flex-direction: column; }
.detalhe[data-detalhe="parado"].aberto > .detalhe-corpo { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* Relatório "Dashboard" (Desenvolvimento): o painel dentro da folha. Na tela os cards fechados
   aparecem para poder abrir; no papel só os abertos, sem rolagem interna e sem quebrar no meio. */
.folha-dashboard .painel-limpo { margin: 0; }
.folha-dashboard .barra-filtros { margin-bottom: 1rem; }
@media print {
    .folha-dashboard .barra-filtros-campos, .folha-dashboard .detalhe-seta, .folha-dashboard .detalhe-rodape,
    .folha-dashboard .gr-categoria-ver, .folha-dashboard .vazio { display: none !important; }
    .folha-dashboard .barra-filtros { justify-content: flex-end; margin-bottom: .5rem; }
    .folha-dashboard .detalhe:not(.aberto) { display: none !important; }
    .folha-dashboard .detalhe, .folha-dashboard .destaque, .folha-dashboard .faixa-numeros { break-inside: avoid; box-shadow: none !important; }
    .folha-dashboard .detalhe-corpo, .folha-dashboard .detalhe-rolagem { height: auto !important; max-height: none !important; overflow: visible !important; }
    .folha-dashboard .sem-cards-abertos { display: none !important; } /* seção sem nenhum card aberto (relatorios.js) */
    /* A folha usa a largura toda (sem o menu) e mantém a grade da tela: cards lado a lado, como no painel */
    html:has(.folha-dashboard) .sidebar { display: none !important; }
    html:has(.folha-dashboard) .conteudo { margin-left: 0 !important; }
    .folha-dashboard .abas-segmentadas { display: none !important; }
    .folha-dashboard .grade-detalhes { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: .6rem; }
    .folha-dashboard .detalhe.inteiro { grid-column: 1 / -1 !important; }
    .folha-dashboard .detalhe.dois-tercos { grid-column: span 4 !important; }
    .folha-dashboard .detalhe.metade { grid-column: span 3 !important; }
    .folha-dashboard .detalhe.terco { grid-column: span 2 !important; }
    .folha-dashboard .faixa-numeros { flex-wrap: nowrap !important; }
    .folha-dashboard .faixa-numeros .numero { flex: 1 1 0 !important; padding: .8rem 1rem; }
}
/* Estoque parado no relatório Dashboard (27/10/2026), na prévia e no papel: o valor total vira uma faixa
   em cima e as 5 lojas ficam numa linha só, sem cortar os valores (o card ocupa 2/3 da folha). */
.folha-dashboard .estoque-parado { grid-template-columns: 1fr; gap: .6rem; padding: .8rem .9rem .5rem; }
.folha-dashboard .estoque-parado .estoque-parado-total { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 1rem; row-gap: .15rem; padding: .7rem 1rem; box-shadow: none; }
.folha-dashboard .estoque-parado .estoque-parado-total small { flex-basis: 100%; font-size: .62rem; }
.folha-dashboard .estoque-parado .estoque-parado-total strong { font-size: 1.45rem; }
.folha-dashboard .estoque-parado .estoque-parado-total span { font-size: .72rem; }
.folha-dashboard .estoque-parado .estoque-parado-total .estoque-parado-nota { margin: 0 0 0 auto; padding: 0; border: 0; font-size: .68rem; }
.folha-dashboard .estoque-parado .estoque-parado-lojas .ppa-blocos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.folha-dashboard .estoque-parado .estoque-parado-lojas .ppa-blocos .pcl-num { gap: 1px; padding: 8px; border-radius: 10px; }
.folha-dashboard .estoque-parado .estoque-parado-lojas .ppa-blocos .pcl-num small { font-size: .56rem; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folha-dashboard .estoque-parado .estoque-parado-lojas .ppa-blocos .pcl-num small i { width: 7px; height: 7px; margin-right: 4px; }
.folha-dashboard .estoque-parado .estoque-parado-lojas .ppa-blocos .pcl-num b { font-size: .92rem; }
.folha-dashboard .estoque-parado .estoque-parado-lojas .ppa-blocos .pcl-num span { font-size: .6rem; }
.folha-dashboard .estoque-parado-rodape { padding: 0 .9rem .6rem; font-size: .62rem; }

/* Relatórios com 7 abas ou mais (Desenvolvimento): abas mais justas, para o nome caber inteiro (sem quebrar a palavra) */
.abas-relatorio.abas-muitas { gap: .6rem; }
.abas-relatorio.abas-muitas .aba-relatorio { gap: .5rem; padding: .75rem .7rem; }
.abas-relatorio.abas-muitas .aba-icone { width: 32px; height: 32px; border-radius: 9px; }
.abas-relatorio.abas-muitas .aba-relatorio strong { overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1199.98px) { .abas-relatorio.abas-muitas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Tecidos · Dashboard: barras de compras e investimentos mais espaçadas (ocupam a altura do card) */
#graficoCompras .gr-barras, #graficoInvestimentos .gr-barras { gap: 18px; padding-top: .25rem; }
#graficoCompras .gr-barra, #graficoInvestimentos .gr-barra { height: 8px; }

/* Rosca: número do centro com mais de 6 caracteres ("725,3 mil") menor, sem encostar no anel */
.gr-rosca-centro b.longo { font-size: 1.12rem; letter-spacing: -.02em; }
.gr-rosca-centro span { max-width: 74px; line-height: 1.15; }

/* ---------- 36. Animações e efeitos dos painéis (out/2026) ----------
   Discretas (até ~1 s, desaceleração suave). Os números aparecem prontos; animam só:
   - os gráficos ao serem desenhados (barras crescem, colunas sobem, roscas e linhas se desenham, anéis enchem);
   - o destaque roxo ao abrir a página (as ondas deslizam para o lugar e um brilho atravessa uma vez);
   - os blocos da página, que surgem de cima para baixo.
   Ao passar o mouse (só fora dos gráficos): card sobe de leve, número da faixa ganha o tom roxo e o
   ícone do menu lateral desliza. Os gráficos não reagem ao mouse.
   Para quem pediu menos movimento (ex.: "efeitos de animação" desligados no Windows) saem só os
   deslocamentos (deslizar e girar). Na impressão nada anima. */
@property --progresso { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes surgir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes crescer-largura { from { width: 0; } }
@keyframes crescer-altura { from { height: 0; } }
@keyframes desenhar-arco { from { stroke-dasharray: 0 999; } }
@keyframes girar-rosca { from { transform: rotate(-40deg) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes desenhar-linha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ondas-entram { from { background-position: calc(100% + 140px) center, 0 0; } to { background-position: right center, 0 0; } }
@keyframes brilho-passa { from { transform: translateX(-60%) skewX(-18deg); opacity: 0; } 20% { opacity: 1; } to { transform: translateX(420%) skewX(-18deg); opacity: 0; } }
@keyframes conteudo-entra { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes anel-enche { from { --progresso: 0; } }

/* ----- Entrada dos gráficos ----- */
.gr-barra > i, .gr-bullet > i, .barra-venda > span, .ranking-coberto, .ranking-excedente, .gr-trilho > i {
    animation: crescer-largura .8s cubic-bezier(.22, .8, .24, 1) both;
}
.gr-barras li:nth-child(2) .gr-barra > i, .gr-rubricas li:nth-child(2) .gr-barra > i, .ranking-item:nth-child(2) span { animation-delay: .05s; }
.gr-barras li:nth-child(3) .gr-barra > i, .gr-rubricas li:nth-child(3) .gr-barra > i, .ranking-item:nth-child(3) span { animation-delay: .1s; }
.gr-barras li:nth-child(4) .gr-barra > i, .gr-rubricas li:nth-child(4) .gr-barra > i, .ranking-item:nth-child(4) span { animation-delay: .15s; }
.gr-barras li:nth-child(n+5) .gr-barra > i, .gr-rubricas li:nth-child(n+5) .gr-barra > i, .ranking-item:nth-child(n+5) span { animation-delay: .2s; }

.gr-col-barra { animation: crescer-altura .8s cubic-bezier(.22, .8, .24, 1) both; }
.gr-col:nth-child(2) .gr-col-barra { animation-delay: .05s; }
.gr-col:nth-child(3) .gr-col-barra { animation-delay: .1s; }
.gr-col:nth-child(4) .gr-col-barra { animation-delay: .15s; }
.gr-col:nth-child(n+5) .gr-col-barra { animation-delay: .2s; }
.gr-col-barra b { animation: aparecer .3s ease .75s both; }

.gr-rosca svg { animation: girar-rosca .7s cubic-bezier(.22, .8, .24, 1) both; }
.gr-rosca circle, .gr-setor-anel circle + circle { animation: desenhar-arco 1s cubic-bezier(.22, .8, .24, 1) both; }
.gr-legenda li { animation: aparecer .4s ease both; }
.gr-legenda li:nth-child(2) { animation-delay: .05s; }
.gr-legenda li:nth-child(3) { animation-delay: .1s; }
.gr-legenda li:nth-child(4) { animation-delay: .15s; }
.gr-legenda li:nth-child(n+5) { animation-delay: .2s; }

.gr-area .gr-area-linha { stroke-dasharray: 1; animation: desenhar-linha 1.1s cubic-bezier(.22, .8, .24, 1) both; }
.gr-area .gr-area-preenchimento { animation: aparecer .6s ease .5s both; }
.gr-area circle, .gr-area .gr-area-etiqueta { animation: aparecer .35s ease .9s both; }

/* ----- Ao abrir a página ----- */
/* Blocos surgem de cima para baixo */
.painel-limpo > * { animation: surgir .45s cubic-bezier(.22, .8, .24, 1) both; }
.painel-limpo > :nth-child(2) { animation-delay: .05s; }
.painel-limpo > :nth-child(3) { animation-delay: .1s; }
.painel-limpo > :nth-child(4) { animation-delay: .15s; }
.painel-limpo > :nth-child(5) { animation-delay: .2s; }
.painel-limpo > :nth-child(6) { animation-delay: .25s; }
.painel-limpo > :nth-child(n+7) { animation-delay: .3s; }

/* Destaque roxo: as ondas deslizam para o lugar, o conteúdo entra e um brilho atravessa uma vez */
.destaque { animation: ondas-entram 1.2s cubic-bezier(.22, .8, .24, 1) both; }
.painel-limpo > .destaque { animation: surgir .45s cubic-bezier(.22, .8, .24, 1) both, ondas-entram 1.2s cubic-bezier(.22, .8, .24, 1) both; }
/* O anel branco se desenha do zero até o valor (também quando o valor já vem escrito na página) */
.destaque > .destaque-anel { animation: conteudo-entra .6s cubic-bezier(.22, .8, .24, 1) .15s backwards, anel-enche 1.3s cubic-bezier(.22, .8, .24, 1) .2s backwards; }
.destaque > .destaque-texto { animation: conteudo-entra .6s cubic-bezier(.22, .8, .24, 1) .25s backwards; }
.destaque::before {
    content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 28%; z-index: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .13), rgba(255, 255, 255, 0));
    animation: brilho-passa 1.6s cubic-bezier(.4, 0, .2, 1) .45s both;
}

/* ----- Ao passar o mouse ----- */
/* Cards: sobem de leve */
.detalhe { transition: box-shadow .2s, border-color .2s, transform .2s cubic-bezier(.22, .8, .24, 1); }
.detalhe:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(42, 14, 92, .4); }

/* Faixa de números: o número em foco ganha o tom roxo e um traço embaixo */
.faixa-numeros .numero { transition: background-color .2s, box-shadow .2s; }
.faixa-numeros .numero strong { transition: color .2s; }
.faixa-numeros .numero:hover { background: #fbfaff; box-shadow: inset 0 -2px 0 var(--roxo); }
.faixa-numeros .numero:hover strong { color: var(--roxo); }

/* Anéis de % (destaque, ficha do modelo): vão suaves do valor antigo ao novo quando um filtro muda */
.destaque-anel, .folha-anel { transition: --progresso 1.1s cubic-bezier(.22, .8, .24, 1); }

/* Menu lateral: o ícone desliza um pouco e ganha o roxo */
.sidebar-link i { transition: transform .2s cubic-bezier(.22, .8, .24, 1), color .2s; }
.sidebar-link:hover i { transform: translateX(2px); color: var(--roxo); }

/* Menos movimento: sem deslizar nem girar (o resto continua) */
@media (prefers-reduced-motion: reduce) {
    .painel-limpo > *, .gr-rosca svg { animation-name: aparecer; }
    .destaque, .painel-limpo > .destaque { animation: aparecer .45s ease both; }
    .destaque > .destaque-texto { animation-name: aparecer; }
    .destaque > .destaque-anel { animation-name: aparecer, anel-enche; } /* o anel continua enchendo */
    .detalhe:hover, .sidebar-link:hover i { transform: none; }
}

@media print {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .destaque::before { display: none; }
}

/* ---------- 37. Menu lateral recolhido (out/2026) ----------
   No computador (a partir de 992px) o menu fica fino, só com o logo e os ícones; o conteúdo ganha o espaço.
   Com o mouse em cima (ou navegando pelo teclado) ele abre por cima da tela, sem empurrar o conteúdo,
   e os textos aparecem no mesmo lugar (nada muda de posição). Celular (menu de deslizar) e impressão
   continuam como antes. */
:root { --sidebar-recolhido: 72px; }

@media screen and (min-width: 992px) {
    .conteudo { margin-left: var(--sidebar-recolhido); }
    .sidebar {
        width: var(--sidebar-recolhido); overflow: hidden; z-index: 1040;
        transition: width .22s cubic-bezier(.22, .8, .24, 1), box-shadow .22s;
    }
    .sidebar:hover, .sidebar:focus-within {
        width: var(--sidebar-largura);
        box-shadow: 12px 0 32px -16px rgba(42, 14, 92, .28);
        transition-delay: .08s; /* não abre quando o mouse só passa pelo caminho */
    }

    /* Textos escondidos com o menu fechado; ocupam o mesmo lugar, então nada se mexe ao abrir */
    .sidebar-marca-texto, .sidebar-link span, .sidebar-secao, .status-texto, .status-link {
        opacity: 0; white-space: nowrap; transition: opacity .15s;
    }
    .sidebar:hover :is(.sidebar-marca-texto, .sidebar-link span, .sidebar-secao, .status-texto, .status-link),
    .sidebar:focus-within :is(.sidebar-marca-texto, .sidebar-link span, .sidebar-secao, .status-texto, .status-link) {
        opacity: 1; transition-delay: .12s;
    }
    .sidebar:not(:hover):not(:focus-within) :is(.sidebar-marca-texto a, .status-link) { pointer-events: none; }

    /* Fechado: o título de cada grupo vira um traço fino entre os ícones */
    .sidebar-secao { position: relative; }
    .sidebar-secao::after {
        content: ""; position: absolute; left: 0; top: 50%; width: 24px; border-top: 1px solid var(--cor-borda);
        opacity: 1; transition: opacity .15s;
    }
    .sidebar:not(:hover):not(:focus-within) .sidebar-secao { opacity: 1; color: transparent; }
    .sidebar:hover .sidebar-secao::after, .sidebar:focus-within .sidebar-secao::after { opacity: 0; }

    /* A página ativa continua marcada com o menu fechado (fundo lilás só em volta do ícone) */
    .sidebar:not(:hover):not(:focus-within) .sidebar-link { width: 44px; }
}

/* ---------- 38. Transferências entre lojas (Desenvolvimento, out/2026) ----------
   A peça parada vai para a loja que vende o modelo (TransferenciaService.php). Mesmo padrão limpo do dashboard:
   destaque, faixa de números, colunas por loja (envia / recebe) e rosca das rotas; embaixo, um card com as peças
   em cards limpos (como os das Coleções, maiores): foto com o total de peças, nome e "loja → loja". */
.transf-cartao { align-self: stretch; } /* lojas e rotas com a mesma altura */
.transf-cartao .cartao-corpo { min-height: 260px; display: flex; flex-direction: column; justify-content: center; }

/* Card das peças: cabeçalho com as abas, filtros numa linha e a grade */
.transf-pecas { margin-top: 1rem; }
.transf-pecas > .cartao-cabecalho { flex-wrap: wrap; gap: .75rem; }
.transf-ferramentas { flex-wrap: wrap; }
.transf-ferramentas .form-select { width: auto; }
.transf-ferramentas .campo-busca { flex: 1 1 200px; }
.transf-conta { margin-left: .2rem; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .75; }
.transf-aviso-obs {
    display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--raio);
    background: var(--roxo-suave); color: var(--roxo-escuro); font-size: .8rem;
}
.transf-aviso-obs .bi { color: var(--roxo); margin-top: .05rem; }

.grade-transf { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }
.grade-transf > .sem-resultados { grid-column: 1 / -1; text-align: center; color: var(--cor-texto-suave); padding: 2.5rem 1rem; margin: 0; }
.cartao-transf {
    display: flex; flex-direction: column; overflow: hidden; color: var(--tinta); text-decoration: none;
    border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--branco);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cartao-transf:hover, .cartao-transf:focus-visible {
    border-color: var(--roxo-borda); box-shadow: 0 12px 28px -16px rgba(42, 14, 92, .5); transform: translateY(-3px); color: var(--tinta); outline: none;
}
.cartao-transf-foto { position: relative; }
.cartao-transf-foto .foto-card { aspect-ratio: 4 / 5; }
/* Total de peças: etiqueta discreta sobre a foto, igual às dos cards das Coleções (branca, texto roxo) */
.transf-selo-pecas {
    position: absolute; top: .55rem; right: .55rem; display: inline-flex; align-items: baseline; gap: .2rem;
    padding: .15rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--roxo);
    font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 1px 3px rgba(23, 20, 31, .15);
    backdrop-filter: blur(4px);
}
.transf-selo-pecas small { font-size: .72rem; font-weight: 500; color: var(--cor-texto-suave); }
.cartao-transf-corpo { display: flex; flex-direction: column; gap: .3rem; flex: 1; padding: .85rem 1rem .9rem; }

/* Rotas: uma linha simples por transferência — "Mirassol → Bom Retiro" e a quantidade */
.transf-rotas { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.transf-rota { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--cinza-600); min-width: 0; }
.transf-rota span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transf-rota .bi { color: var(--roxo); font-size: .8rem; flex-shrink: 0; }
.transf-rota b { margin-left: auto; padding-left: .5rem; color: var(--roxo); font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.transf-rodape {
    display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-top: auto; padding-top: .6rem;
    border-top: 1px solid var(--cinza-100); font-size: .74rem; color: var(--cor-texto-suave); white-space: nowrap;
}
.transf-rodape strong { font-size: .84rem; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cartao-transf-corpo .transf-rotas + .transf-rodape { margin-top: .55rem; }
.cartao-transf-corpo { justify-content: flex-start; }

/* Em observação: mesmo card, mais apagado */
.cartao-transf.em-observacao .transf-selo-pecas { color: var(--cor-texto-suave); }
.cartao-transf.em-observacao .foto-card { filter: saturate(.75); }
.transf-rota.obs b { color: var(--roxo-claro); }

.transf-mais { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-top: 1.25rem; }
.transf-mais:has(.contador:empty):has(.btn[hidden]) { display: none; }
.transf-regra { margin: 0; padding: .9rem 1.25rem 1.1rem; border-top: 1px solid var(--cor-borda); }
.transf-regra ul { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .8rem; color: var(--cor-texto-suave); display: grid; gap: .3rem; }

/* Lista de separação impressa: um bloco por loja que envia, com o quadradinho para marcar à mão */
.transf-folha-origem { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.4rem 0 .5rem; font-size: .95rem; font-weight: 700; text-transform: none; letter-spacing: -.01em; color: var(--roxo-escuro); }
.transf-folha-origem small { font-size: .78rem; font-weight: 500; color: var(--cor-texto-suave); }
.transf-folha-tabela { break-inside: auto; }
.transf-folha-tabela tr { break-inside: avoid; }
.transf-folha-ok { width: 70px; text-align: center !important; }
.caixa-marcar { display: inline-block; width: 14px; height: 14px; border: 1.5px solid var(--cinza-400); border-radius: 3px; vertical-align: middle; }

/* Celular: um card por linha, com a foto à esquerda (os nomes das lojas cabem inteiros); filtros na largura toda */
@media (max-width: 575.98px) {
    .grade-transf { grid-template-columns: 1fr; gap: .7rem; }
    .cartao-transf { flex-direction: row; }
    .cartao-transf-foto { flex: 0 0 92px; }
    .transf-pecas > .cartao-corpo { padding: .75rem; }
    .transf-rota { font-size: .76rem; gap: .25rem; }
    .transf-rodape { flex-wrap: wrap; row-gap: .1rem; }
    .cartao-transf-foto .foto-card { aspect-ratio: auto; height: 100%; min-height: 150px; }
    .cartao-transf-corpo { min-width: 0; padding: .7rem .85rem .75rem; }
    .transf-selo-pecas { top: .4rem; right: auto; left: .4rem; }
    .cartao-transf .cartao-modelo-etiquetas { display: none; }
    .transf-ferramentas .form-select, .transf-ferramentas .campo-busca { flex: 1 1 100%; width: 100%; }
}

/* ---------- 39. Dicas dos títulos dos cards (out/2026) ----------
   assets/js/componentes/dicas.js: título com data-ajuda ganha o ⓘ cinza e uma caixa escura com a explicação curta. */
.dica-flutuante {
    position: fixed; z-index: 2100; max-width: 240px; padding: .45rem .65rem; border-radius: 8px;
    background: var(--tinta); color: var(--branco); font-size: .76rem; font-weight: 400; line-height: 1.45;
    letter-spacing: normal; text-transform: none; text-align: left; white-space: normal;
    box-shadow: 0 8px 20px -6px rgba(23, 20, 31, .35); pointer-events: none;
    opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility .12s;
}
.dica-flutuante.visivel { opacity: 1; visibility: visible; }
.dica-flutuante::after {
    content: ""; position: absolute; left: var(--seta, 50%); top: 100%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--tinta);
}
.dica-flutuante.embaixo::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--tinta); }
[data-ajuda]::after {
    content: "\f431"; font-family: "bootstrap-icons"; font-weight: normal; font-size: .78em;
    margin-left: .3rem; vertical-align: -.05em; color: var(--cinza-400); transition: color .15s;
}
[data-ajuda]:hover::after { color: var(--roxo); }
@media print { [data-ajuda]::after, .dica-flutuante { display: none !important; } }

/* =============================================================================
   27. Dashboard do Desenvolvimento · Categorias e tipos de peça em blocos
   (aprovado no protótipo em 23/10/2026: a categoria é uma linha limpa, sem barra;
   cada tipo é um bloco com o % grande e o fundo suave na cor da faixa)
   ============================================================================= */
.tpo-pct, .tpo-bloco { --tpo-fundo: var(--cinza-100); --tpo-texto: var(--cor-texto-suave); }
.tpo-pct.faixa-alta, .tpo-bloco.faixa-alta { --tpo-fundo: var(--verde-suave); --tpo-texto: var(--cor-faixa-texto); }
.tpo-pct.faixa-media, .tpo-bloco.faixa-media { --tpo-fundo: var(--amarelo-suave); --tpo-texto: var(--cor-faixa-texto); }
.tpo-pct.faixa-baixa, .tpo-bloco.faixa-baixa { --tpo-fundo: var(--vermelho-suave); --tpo-texto: var(--cor-faixa-texto); }

.tpo-categorias .gr-categoria.aberta { background: none; }
.tpo-cat-cab { display: grid; grid-template-columns: 18px 1fr auto 64px; align-items: center; gap: 14px; padding: 14px 6px; border-radius: 10px; }
.gr-categoria-linha .tpo-cat-cab:hover { background: var(--roxo-suave); }
.tpo-cat-cab > .tpo-cat-nome b { display: block; font-weight: 700; }
.tpo-cat-cab > .tpo-cat-nome small, .tpo-cat-vend { display: block; font-size: .76rem; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; padding-left: 0; }
.tpo-total { border-top: 1px solid var(--cor-borda); }
.tpo-total .tpo-cat-nome b { font-weight: 800; }

.tpo-cat-cab > .tpo-pct { display: block; justify-self: end; min-width: 52px; text-align: center; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--tpo-fundo); color: var(--tpo-texto); }
.tpo-cat-corpo { padding: 4px 6px 18px 38px; }

.tpo-blocos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 6px; }
.tpo-bloco { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--tpo-fundo); color: inherit; text-align: left; font: inherit; }
.tpo-bloco.clicavel { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.tpo-bloco.clicavel:hover { transform: translateY(-2px); box-shadow: 0 6px 16px -8px rgba(29, 22, 48, .25); }
.tpo-bloco.clicavel:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }
.tpo-bloco .tpo-nome { max-width: 100%; font-size: .74rem; letter-spacing: .02em; color: var(--cor-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpo-bloco b { font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--tpo-texto); font-variant-numeric: tabular-nums; }
.tpo-bloco small { font-size: .74rem; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .tpo-cat-corpo { padding-left: 6px; } .tpo-cat-cab { grid-template-columns: 18px 1fr 60px; } .tpo-cat-vend { display: none; } }
@media (prefers-reduced-motion: reduce) { .tpo-bloco.clicavel { transition: none; } }
@media print { .tpo-bloco { break-inside: avoid; } }

/* =============================================================================
   28. Dashboard do Desenvolvimento · Desempenho por coleção (anel + números), faixa de preço
   que mais vende e pontos a melhorar (aprovados no protótipo em 24/10/2026)
   ============================================================================= */
.pcl-lista { display: flex; flex-direction: column; gap: 8px; }
.pcl-linha { display: grid; grid-template-columns: 96px minmax(150px, 220px) minmax(0, 1fr); gap: 24px; align-items: center; padding: 6px 0; }
.pcl-linha + .pcl-linha { border-top: 1px solid var(--cor-borda); padding-top: 14px; }
.pcl-anel { width: 96px; height: 96px; padding: 9px; border-radius: 50%; display: grid;
    background: conic-gradient(var(--cor-faixa, var(--roxo)) calc(var(--progresso) * 1%), var(--cinza-100) 0); }
.pcl-anel b { display: grid; place-items: center; border-radius: 50%; background: var(--branco, #fff); font-size: 1.2rem; font-weight: 800; color: var(--cor-faixa-texto, var(--roxo)); font-variant-numeric: tabular-nums; }
.pcl-nome b { display: block; font-weight: 800; font-size: 1rem; }
.pcl-nome small { font-size: .74rem; color: var(--cor-texto-suave); }
.pcl-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pcl-num { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--cinza-100); }
.pcl-num small { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-texto-suave); }
.pcl-num b { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pcl-num span { font-size: .7rem; color: var(--cor-texto-suave); }
.pcl-num:last-child { background: var(--roxo-suave); }
.pcl-num:last-child b { color: var(--roxo); }
@media (max-width: 991.98px) { .pcl-linha { grid-template-columns: 80px 1fr; } .pcl-anel { width: 80px; height: 80px; } .pcl-numeros { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pcl-base { margin: 0 0 14px; font-size: .76rem; color: var(--cor-texto-suave); }
.pcl-base b { color: var(--roxo); }

.pcl-precos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; align-items: end; }
.pcl-preco { display: grid; grid-template-rows: auto 140px auto auto; justify-items: center; gap: 4px; text-align: center; }
.pcl-preco small { font-size: .78rem; font-weight: 800; color: var(--cor-faixa-texto); font-variant-numeric: tabular-nums; }
.pcl-preco > span { width: 100%; max-width: 42px; display: flex; align-items: flex-end; border-radius: 8px; background: var(--cinza-100); }
.pcl-preco > span i { display: block; width: 100%; border-radius: 8px; background: var(--cor-faixa); animation: crescer-altura .8s cubic-bezier(.22, .8, .24, 1) both; }
.pcl-preco b { font-size: .7rem; font-weight: 600; }
.pcl-preco em { font-style: normal; font-size: .66rem; color: var(--cor-texto-suave); }

.pcl-pontos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pcl-pontos li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.pcl-pontos i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--vermelho-suave); color: var(--vermelho); }
.pcl-pontos b { display: block; font-size: .86rem; }
.pcl-pontos span { font-size: .8rem; color: var(--cor-texto-suave); }
@media print { .pcl-anel, .pcl-preco > span i, .pcl-pontos i { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* =============================================================================
   29. Dashboard do Desenvolvimento · Maior e menor % de venda em lista com anéis
   (aprovado no protótipo em 24/10/2026; o anel é o .pcl-anel da seção 28, menor)
   ============================================================================= */
.pmd-linha { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) 54px; gap: 12px; align-items: center; padding: 8px 6px; color: inherit; text-decoration: none; border-radius: 8px; }
a.pmd-linha:hover { background: var(--roxo-suave); }
a.pmd-linha:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }
.pmd-pos { font-size: .74rem; font-weight: 700; color: var(--cor-texto-suave); text-align: center; font-variant-numeric: tabular-nums; }
.pmd-foto { width: 40px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.pmd-foto.sem-foto { display: grid; place-items: center; font-size: 1rem; }
.pmd-nome { display: flex; flex-direction: column; min-width: 0; font-size: .84rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmd-nome small { font-weight: 400; font-size: .72rem; color: var(--cor-texto-suave); overflow: hidden; text-overflow: ellipsis; }
.pcl-anel.pmd-anel { width: 54px; height: 54px; padding: 5px; }
.pcl-anel.pmd-anel b { font-size: .74rem; }

/* =============================================================================
   30. Dashboard do Desenvolvimento · mudanças aprovadas no protótipo em 26/10/2026
   ============================================================================= */
/* Colunas com o mesmo desenho em todos os cards (Desempenho por unidade, Promoção, Faixa de preço):
   barras da mesma largura e cantos, número em cima, eixo, grade tracejada e linha de base. */
.gr-col-barra, .gr-colunas.agrupadas .gr-col-barra { max-width: 34px; border-radius: 8px 8px 3px 3px; }
.gr-par { gap: 6px; }

/* Desempenho por coleção: título + período, gráfico de área e os 4 números embaixo */
.pcl-area-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pcl-area-titulo { font-size: .8rem; color: var(--cor-texto-suave); }
.pcl-area-titulo b { color: var(--cor-texto); }
.pcl-area-periodo { width: auto; }
.gd-area { position: relative; width: 100%; }
.gd-grafico { display: block; width: 100%; height: auto; overflow: visible; }
.gd-grafico text { font-family: inherit; font-size: 12px; fill: var(--cor-texto-suave); }
.gd-grade { stroke: #ebe8f3; }
.gd-guia { stroke: var(--cor-borda); stroke-width: 1; }
.pcl-numeros-area { margin-top: 16px; }
.pcl-numeros-area .pcl-num b.pct-faixa { color: var(--cor-faixa-texto); }
@media (max-width: 767.98px) { .pcl-numeros-area { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Dica ao passar o mouse nos gráficos com dica (gráfico de área) */
.gd-dica { position: fixed; z-index: 1080; min-width: 160px; padding: 8px 12px; border: 1px solid var(--cor-borda); border-radius: 10px; background: #fff;
    box-shadow: 0 12px 30px -12px rgba(29, 22, 48, .35); font-size: .78rem; pointer-events: none; opacity: 0; transition: opacity .1s ease; }
.gd-dica.visivel { opacity: 1; }
.gd-dica-titulo { font-weight: 700; margin-bottom: 4px; }
.gd-dica-linha { display: flex; align-items: center; gap: 8px; padding: 1px 0; }
.gd-dica-linha i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.gd-dica-linha span { color: var(--cor-texto-suave); }
.gd-dica-linha b { margin-left: auto; padding-left: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Maior / Menor % de venda: tabela com foto, vendidas e o % em pílula */
.pmd-tabela { width: 100%; border-collapse: collapse; font-size: .84rem; }
.pmd-tabela th { padding: 0 8px 10px; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-texto-suave); text-align: left; border-bottom: 1px solid var(--cor-borda); white-space: nowrap; }
.pmd-tabela td { padding: 8px; border-bottom: 1px solid var(--cor-borda); vertical-align: middle; }
.pmd-tabela tbody tr:last-child td { border-bottom: 0; }
.pmd-tabela tbody tr:hover { background: var(--roxo-suave); }
.pmd-tabela .dir { text-align: right; }
.pmd-tab-pos { width: 28px; color: var(--cor-texto-suave); font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pmd-tab-modelo { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.pmd-tab-foto { width: 36px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.pmd-tab-modelo > span { min-width: 0; }
.pmd-tab-modelo b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmd-tab-modelo small { display: block; font-size: .72rem; color: var(--cor-texto-suave); }
.pmd-tab-vend { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pmd-tab-vend small { font-weight: 400; color: var(--cor-texto-suave); }
.pmd-tabela .tpo-pct { display: inline-block; min-width: 52px; text-align: center; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--tpo-fundo); color: var(--tpo-texto); }

/* Estoque parado: um bloco de números por loja (A6), a maior em destaque */
.ppa-blocos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ppa-blocos .pcl-num { gap: 4px; padding: 18px; border-radius: 14px; min-width: 0; background: var(--cinza-100); }
.ppa-blocos .pcl-num small { font-size: .74rem; }
.ppa-blocos .pcl-num small i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.ppa-blocos .pcl-num b { font-size: 1.4rem; white-space: nowrap; color: var(--cor-texto); }
.ppa-blocos .pcl-num span { font-size: .78rem; }
.ppa-blocos .pcl-num.ppa-maior { background: var(--roxo-suave); }
.ppa-blocos .pcl-num.ppa-maior b { color: var(--roxo); }
.ppa-blocos .pcl-num:last-child:not(.ppa-maior) { background: var(--cinza-100); }
.ppa-blocos .pcl-num:last-child:not(.ppa-maior) b { color: var(--cor-texto); }
@media (max-width: 991.98px) { .ppa-blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Categorias: lista com anéis em duas colunas (B2) */
.pti-lista { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.pti-item { width: 100%; display: grid; grid-template-columns: 46px minmax(0, 1fr) 54px; gap: 12px; align-items: center; padding: 7px 6px;
    border: 0; border-bottom: 1px solid var(--cor-borda); border-radius: 8px; background: none; color: inherit; text-align: left; font: inherit; }
.pti-item.clicavel { cursor: pointer; }
.pti-item.clicavel:hover { background: var(--roxo-suave); }
.pti-item.clicavel:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }
.pcl-anel.pti-anel { width: 46px; height: 46px; padding: 4px; }
.pcl-anel.pti-anel b { font-size: .68rem; }
.pti-nome { display: flex; flex-direction: column; min-width: 0; font-size: .84rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pti-nome small { font-weight: 400; font-size: .72rem; color: var(--cor-texto-suave); overflow: hidden; text-overflow: ellipsis; }
.pti-saldo { display: flex; flex-direction: column; align-items: flex-end; }
.pti-saldo b { font-size: .86rem; font-variant-numeric: tabular-nums; }
.pti-saldo small { font-size: .66rem; color: var(--cor-texto-suave); }
@media (max-width: 991.98px) { .pti-lista { grid-template-columns: 1fr; } }

/* Dobras de tela: os cards abertos lado a lado ficam com a mesma altura (acompanham o mais alto
   da linha) e, nos gráficos, o conteúdo fica centralizado na vertical. */
.grade-detalhes > .detalhe.aberto { align-self: stretch; display: flex; flex-direction: column; }
.grade-detalhes > .detalhe.aberto > .detalhe-corpo:not([hidden]) { flex: 1 0 auto; }
.detalhe[data-detalhe="lojas"].aberto .detalhe-rolagem:not([hidden]),
.detalhe[data-detalhe="precos"].aberto .detalhe-rolagem:not([hidden]),
.detalhe[data-detalhe="pontos"].aberto .detalhe-rolagem:not([hidden]),
.detalhe[data-detalhe="mix"].aberto .detalhe-rolagem:not([hidden]),
.detalhe[data-detalhe="participacao"].aberto .detalhe-rolagem:not([hidden]) { display: flex; flex-direction: column; justify-content: center; }
@media print { .ppa-blocos .pcl-num, .pti-anel, .pmd-tabela .tpo-pct { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .gd-dica { display: none; } }

/* =============================================================================
   40. Animações dos gráficos do Desenvolvimento que ainda não tinham, aviso de dado fixo no rodapé do
   estoque parado (27/10/2026). Mesmo ritmo da seção 36 (até ~1 s, desaceleração suave).
   ============================================================================= */
/* Área do "Desempenho por coleção": a linha se desenha e o degradê aparece depois */
.gd-linha { stroke-dasharray: 1; animation: desenhar-linha 1.1s cubic-bezier(.22, .8, .24, 1) both; }
.gd-preenchimento { animation: aparecer .6s ease .5s both; }

/* Anéis de % (tipos de peça, maior e menor %, desempenho por coleção): enchem do zero até o valor */
.pcl-anel { animation: anel-enche 1.1s cubic-bezier(.22, .8, .24, 1) .1s backwards; }

/* Blocos de números (desempenho por coleção): surgem um depois do outro. No estoque parado só o valor total anima (contagem em dashboard.js). */
.pcl-numeros .pcl-num { animation: surgir .45s cubic-bezier(.22, .8, .24, 1) both; }
.pcl-numeros .pcl-num:nth-child(2) { animation-delay: .06s; }
.pcl-numeros .pcl-num:nth-child(3) { animation-delay: .12s; }
.pcl-numeros .pcl-num:nth-child(4) { animation-delay: .18s; }
.pcl-numeros .pcl-num:nth-child(n+5) { animation-delay: .24s; }

/* Listas (maior e menor %, tipos de peça): as linhas aparecem em sequência */
.pmd-tabela tbody tr, .pti-lista > li { animation: aparecer .35s ease both; }
.pmd-tabela tbody tr:nth-child(2), .pti-lista > li:nth-child(2) { animation-delay: .04s; }
.pmd-tabela tbody tr:nth-child(3), .pti-lista > li:nth-child(3) { animation-delay: .08s; }
.pmd-tabela tbody tr:nth-child(4), .pti-lista > li:nth-child(4) { animation-delay: .12s; }
.pmd-tabela tbody tr:nth-child(5), .pti-lista > li:nth-child(5) { animation-delay: .16s; }
.pmd-tabela tbody tr:nth-child(n+6), .pti-lista > li:nth-child(n+6) { animation-delay: .2s; }

/* Barras horizontais (vendas por loja na ficha do modelo): crescem da esquerda */
.grafico-barras-trilho > span { animation: crescer-largura .8s cubic-bezier(.22, .8, .24, 1) both; }
.grafico-barras li:nth-child(2) .grafico-barras-trilho > span { animation-delay: .05s; }
.grafico-barras li:nth-child(3) .grafico-barras-trilho > span { animation-delay: .1s; }
.grafico-barras li:nth-child(4) .grafico-barras-trilho > span { animation-delay: .15s; }
.grafico-barras li:nth-child(n+5) .grafico-barras-trilho > span { animation-delay: .2s; }

/* Estoque parado nas lojas: aviso de que é um dado geral fixo (não muda com os filtros) */
.estoque-parado-rodape { margin: 0; padding: 0 1.15rem 1rem; font-size: .7rem; }

@media (prefers-reduced-motion: reduce) {
    .pcl-numeros .pcl-num { animation-name: aparecer; }
}
.estoque-parado-total [data-ind="valor_parado"] { font-variant-numeric: tabular-nums; }

/* =============================================================================
   38. Relatórios em folha A4 (aprovado no protótipo em 04/11/2026): impressão e prévia na tela
   ============================================================================= */

/* Impressão: o papel leva só o relatório, nas duas orientações (sem o menu lateral, sem o
   título "Relatórios" do topo da tela: o cabeçalho da folha já tem logo e título). */
@media print {
    .sidebar, .topo { display: none !important; }
    .conteudo { margin-left: 0 !important; }
    .pagina { padding: 0 !important; }
    .folha { width: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; zoom: 1 !important; }
    /* Título de seção nunca fica sozinho no fim da folha */
    .secao-titulo, .folha h2, .folha h3 { break-after: avoid; }
}

/* Tela (computador): a prévia é uma folha A4 de verdade (794 × 1123 px em pé, 1123 × 794 deitada),
   com a margem de 5 mm do papel como recuo interno. O conteúdo fica com a mesma largura do papel,
   então colunas e quebras de linha são as mesmas da impressão. A folha fica centralizada e
   ampliada ou reduzida por igual para caber na tela (relatorios.js define --zoom-folha). */
@media screen and (min-width: 992px) {
    html[data-orientacao] .folha {
        --folha-l: 1123px; --folha-a: 794px;
        box-sizing: border-box; width: var(--folha-l); max-width: none; min-height: var(--folha-a);
        padding: 19px; margin: 0 auto 1.5rem; border-radius: 4px;
        zoom: var(--zoom-folha, 1);
        font-size: 11px; /* mesmo tamanho de letra da impressão */
    }
    html[data-orientacao="retrato"] .folha { --folha-l: 794px; --folha-a: 1123px; }
    /* Tabelas compactas, como no papel */
    html[data-orientacao] .folha-tabela { font-size: 9.5px; table-layout: auto; }
    html[data-orientacao] .folha-tabela th { font-size: 8px; padding: .35rem .4rem; white-space: normal; }
    html[data-orientacao] .folha-tabela td { padding: .3rem .4rem; }
    html[data-orientacao] .folha-tabela .num { white-space: nowrap; }
}

/* Relatório impresso do Dashboard (04/11/2026): o quadro "Valor total" do Estoque parado no mesmo
   formato do destaque roxo do topo do relatório (mais alto, ondas lilás sobre o degradê, cantos de 20 px,
   textos em coluna). O card do dashboard principal não muda. */
.folha-dashboard .estoque-parado .estoque-parado-total {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 1.5rem; row-gap: .3rem;
    min-height: 140px; padding: 1.6rem 2rem; border-radius: 20px;
    background: var(--ondas-destaque) right center / cover no-repeat, var(--degrade-destaque);
}
.folha-dashboard .estoque-parado .estoque-parado-total small { grid-column: 1 / -1; align-self: start; font-size: .66rem; letter-spacing: .1em; }
.folha-dashboard .estoque-parado .estoque-parado-total strong { grid-column: 1; font-size: 1.85rem; letter-spacing: -.02em; }
.folha-dashboard .estoque-parado .estoque-parado-total span { grid-column: 1; font-size: .78rem; }
.folha-dashboard .estoque-parado .estoque-parado-total .estoque-parado-nota { grid-column: 2; grid-row: 2 / span 2; align-self: end; margin: 0; padding: 0; border: 0; font-size: .72rem; text-align: right; }
/* Na vertical a nota da fábrica desce para baixo do valor (não espreme o número) */
html[data-orientacao="retrato"] .folha-dashboard .estoque-parado .estoque-parado-total .estoque-parado-nota { grid-column: 1; grid-row: auto; text-align: left; margin-top: .3rem; }

/* Cadastro do modelo: tecido da peça pelo código (aprovado no protótipo em 04/11/2026); o nome vem da base de tecidos */
#blocoTecidos .composicao-tecido { grid-template-columns: 130px minmax(0, 1fr) 120px 120px 36px; }
.tecido-nome { background: var(--roxo-suave); border-color: var(--roxo-borda); color: var(--cor-texto-suave); cursor: default; text-overflow: ellipsis; }
.tecido-nome.achado { color: var(--tinta); font-weight: 500; }
.tecido-nome:focus { box-shadow: none; border-color: var(--roxo-borda); background: var(--roxo-suave); }
.tecido-situacao:empty { display: none; }
.tecido-situacao { margin-top: .25rem; font-size: .75rem; color: var(--cor-texto-suave); }
.tecido-situacao.aviso { color: #a15c07; }
.tecido-aviso-salvar { margin-top: .6rem; font-size: .8125rem; color: var(--verde); }
.tecido-aviso-salvar.erro { color: #c2263a; }
@media (max-width: 575.98px) {
    #blocoTecidos .composicao-tecido { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
    #blocoTecidos .composicao-tecido > :first-child { grid-column: 1 / 2; }
    #blocoTecidos .composicao-tecido > .tecido-nome-caixa { grid-column: 2 / -1; }
}

/* Relatório Dashboard no papel (04/11/2026): o painel é impresso um pouco menor (80%), por igual, para os
   blocos aproveitarem a folha A4 inteira em vez de pular para a próxima e deixar meia folha em branco. */
@media print {
    .folha-dashboard { zoom: .8; }
    .folha-dashboard .secao-titulo { break-after: avoid; }
    /* Destaque e faixa de números mais baixos no papel: a primeira linha de cards cabe na 1ª folha */
    .folha-dashboard .destaque { padding-top: 1rem !important; padding-bottom: 1rem !important; margin-bottom: .6rem; }
    .folha-dashboard .barra-filtros { margin-bottom: .3rem !important; }
    .folha-dashboard .faixa-numeros { margin-bottom: .6rem; }
}

/* =============================================================================
   40. Mesmo padrão de Relatórios / Importação / Dados nos 3 setores (aprovado no protótipo em 10/11/2026)
   - Topo de Dashboard, Relatórios e Importação, sempre na mesma ordem:
     [Dados de · Última importação] [Importar relatórios] [ações da página] (layout.php)
   - Relatórios: abas numa fileira, barra de filtros com o papel à direita e a folha A4 sobre a "mesa",
     no tamanho real ou menor (relatorios.js), sem "pulo" ao abrir.
   ============================================================================= */

.topo-dados { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.topo-dados + .topo-acoes { margin-left: 0; }
/* Sem ações da página (Dashboards do Desenvolvimento e do RH): o menu do usuário não pode pegar o
   "margin-left: auto" da regra antiga, senão divide a sobra com o indicador e o bloco vai para o centro. */
.topo-dados ~ .topo-acoes:empty + .menu-usuario { margin-left: 0; }
.topo-acoes { align-items: center; }

/* Indicador de dados */
.dados-setor {
    display: inline-flex; align-items: center; gap: .65rem;
    padding: .3rem .8rem .3rem .65rem; border-radius: 10px;
    background: var(--branco); border: 1px solid var(--cor-borda);
    font-size: .74rem; line-height: 1.15; white-space: nowrap;
}
.dados-setor .selo-dados-ponto { flex-shrink: 0; background: var(--verde); box-shadow: 0 0 0 3px rgba(31, 157, 111, .15); }
.dados-setor.atrasado .selo-dados-ponto { background: #e0a100; box-shadow: 0 0 0 3px rgba(224, 161, 0, .18); }
.dados-setor small { display: block; color: var(--cor-texto-suave); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; }
.dados-setor strong { display: block; font-weight: 600; color: var(--tinta); }
.dados-setor-sep { width: 1px; align-self: stretch; background: var(--cor-borda); }

/* Botão Importar */
.btn-importar { display: inline-flex; align-items: center; gap: .4rem; }
.btn-importar .bi { color: var(--roxo); }

/* Abas de relatório numa fileira só (rola na horizontal se faltar espaço) */
.abas-linha {
    display: flex; gap: .4rem; margin-bottom: .75rem; padding: .3rem;
    background: var(--branco); border: 1px solid var(--cor-borda); border-radius: 12px;
    overflow-x: auto; scrollbar-width: thin;
}
.abas-linha .aba-linha {
    flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .5rem .85rem; border-radius: 9px; white-space: nowrap;
    font-size: .82rem; font-weight: 500; color: var(--cor-texto-suave); text-decoration: none;
    transition: background-color .15s, color .15s;
}
.abas-linha .aba-linha .bi { font-size: .95rem; }
.abas-linha .aba-linha:hover { background: var(--roxo-suave); color: var(--roxo); }
.abas-linha .aba-linha.ativa { background: var(--roxo); color: var(--branco); }

/* Barra de filtros do relatório: filtros à esquerda, papel à direita */
.barra-relatorio {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
    padding: .6rem .75rem; margin-bottom: 1rem;
    background: var(--branco); border: 1px solid var(--cor-borda); border-radius: 12px;
}
.barra-relatorio-campos { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.barra-relatorio .form-select, .barra-relatorio .form-control { width: auto; min-width: 170px; font-size: .84rem; border-radius: 9px; padding-top: .35rem; padding-bottom: .35rem; }
.barra-relatorio .campo-busca { min-width: 300px; }
.barra-relatorio .btn { font-size: .84rem; padding: .35rem .8rem; border-radius: 9px; }
.barra-relatorio-descricao { font-size: .8rem; color: var(--cor-texto-suave); }
.barra-relatorio-papel { display: flex; align-items: center; gap: .5rem; margin-left: auto; font-size: .74rem; color: var(--cor-texto-suave); }

/* Mesa: fundo cinza onde a folha fica, como numa prévia de impressão */
.mesa-relatorio { padding: 1.5rem; border-radius: 14px; background: #ebe9f1; overflow: hidden; }
.mesa-relatorio .folha { margin-left: auto; margin-right: auto; }
@media screen and (min-width: 992px) {
    .mesa-relatorio .folha { box-shadow: 0 8px 30px rgba(20, 10, 50, .12); border: 0; }
    /* Sem pulo: a folha só aparece depois que o relatorios.js calcula o zoom (classe "pronta").
       Se o script falhar, ela aparece sozinha depois de 1,5 s. */
    .mesa-relatorio .folha:not(.pronta) { visibility: hidden; animation: folha-aparece 0s linear 1.5s forwards; }
}
@keyframes folha-aparece { to { visibility: visible; } }

@media print {
    .topo-dados { display: none !important; }
    .mesa-relatorio { padding: 0; background: none; border-radius: 0; overflow: visible; }
    .mesa-relatorio .folha { visibility: visible !important; box-shadow: none; }
    html, body, .app, .conteudo, .pagina, .mesa-relatorio { background: #fff !important; }
}

@media (max-width: 991.98px) {
    .dados-setor small { display: none; }
    .btn-importar span { display: none; }
    .mesa-relatorio { padding: .5rem; }
    .barra-relatorio .campo-busca { min-width: 0; flex: 1; }
}
@media (max-width: 575.98px) {
    .dados-setor-sep, .dados-setor > span:last-child { display: none; } /* no celular só "Dados de" */
}