/* =========================================================
   ARTINET BI — folha de estilo do módulo novo
   =========================================================
   Vale para: paineis.php, painel.php, estudio.php, modelo.php,
   dados.php e publico.php. O painel antigo de OS Técnicas continua
   usando `assets/style.css` — os dois não se misturam (todas as
   classes daqui começam com `bi-`), então dá pra evoluir um sem
   quebrar o outro.

   Princípios que guiaram este arquivo:
   - Preferir ROLAGEM a esconder conteúdo. Já tivemos gráfico cortado
     em notebook 1366×768 por tentar forçar tudo numa tela só.
   - Tudo dimensionado em variáveis no :root, pra ajustar densidade e
     cor num lugar só.
   - `min-width: 0` em todo item de grid/flex que contém gráfico —
     sem isso, um rótulo comprido empurra a coluna e estoura o layout
     (bug clássico de CSS Grid que já nos mordeu antes).
   ========================================================= */

:root {
    --azul:        #1364c4;
    --azul-escuro: #0e4e9c;
    --azul-claro:  #e9f1fb;
    --azul-vivo:   #2f86e8;
    --laranja:     #f2622e;
    --tinta:       #101a2c;
    --tinta-2:     #55647c;
    --tinta-3:     #8593a8;
    --fundo:       #f2f5f9;
    --cartao:      #ffffff;
    --borda:       #e6ebf3;
    --borda-forte: #ccd7e6;
    --verde:       #17925f;
    --vermelho:    #d64545;
    --amarelo:     #e9a800;

    --raio-g:   14px;
    --raio:     10px;
    --raio-p:   7px;

    /* Sombras em duas camadas: uma linha de contato bem próxima e um
       halo largo e leve. Uma sombra só, chapada, é o que dá aquele ar de
       "caixa colada na tela" — duas dão profundidade sem pesar. */
    --sombra:   0 1px 2px rgba(16, 26, 44, .05), 0 1px 3px rgba(16, 26, 44, .04);
    --sombra-m: 0 2px 4px rgba(16, 26, 44, .05), 0 10px 24px -6px rgba(16, 26, 44, .14);
    --sombra-g: 0 8px 16px rgba(16, 26, 44, .10), 0 28px 60px -12px rgba(16, 26, 44, .28);
    --anel:     0 0 0 3px rgba(19, 100, 196, .22);

    --topo-altura: 56px;
    --transicao: .16s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body.bi-body {
    background: var(--fundo);
    color: var(--tinta);
    /* "Inter" e "Segoe UI Variable" entram primeiro pra quem as tiver
       instaladas (Windows 11 e boa parte dos Macs/Linux com fonte de
       sistema recente): elas têm números de largura fixa e desenho mais
       fechado, que é o que faz uma tela cheia de indicador parecer
       ferramenta em vez de página. Quem não tem cai na pilha de sempre —
       nada é baixado, o projeto não usa CDN. */
    font-family: "Inter", "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.bi-sem-rolagem { overflow: hidden; }

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .6em; font-weight: 650; line-height: 1.22; letter-spacing: -.018em; }
h1 { font-size: clamp(20px, 2vw, 25px); }
h2 { font-size: clamp(16px, 1.6vw, 19px); }
h3 { font-size: 16px; }

/* Todo número do sistema com algarismo de largura fixa: sem isto uma
   coluna de valores "dança" a cada atualização, porque o 1 é mais
   estreito que o 8. É o detalhe que mais separa planilha de relatório. */
.bi-kpi-valor, .bi-medidor-valor, .bi-lista-valor,
.bi-tabela td.num, .bi-tabela th.num, .bi-auto-marca,
.bi-cartao-painel-rodape, .bi-detalhe-topo {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Foco visível e consistente — hoje cada navegador desenhava o seu.
   `:focus-visible` só aparece pra quem navega por teclado, então o mouse
   continua sem contorno nenhum. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--azul-vivo);
    outline-offset: 2px;
    border-radius: var(--raio-p);
}

/* Quem prefere menos movimento não recebe nenhum. */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------
   Barra do topo
   --------------------------------------------------------- */
.bi-topo {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 18px;
    height: var(--topo-altura);
    padding: 0 18px;
    /* Um degradê discreto no azul-marinho em vez de chapado: dá
       profundidade à barra sem virar enfeite. A linha clara embaixo
       separa o topo do conteúdo melhor do que uma sombra pesada. */
    background: linear-gradient(180deg, #16233c 0%, #101a2c 100%);
    color: #fff;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .07), 0 1px 3px rgba(16, 26, 44, .18);
}

.bi-marca {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    text-decoration: none;
    flex: 0 0 auto;
}
.bi-marca:hover { text-decoration: none; opacity: .9; }
.bi-marca-simbolo { width: 26px; height: 26px; object-fit: contain; }
.bi-marca-texto { display: flex; flex-direction: column; line-height: 1; }
.bi-marca-texto strong { font-size: 15px; letter-spacing: .3px; }
.bi-marca-texto small { font-size: 8.5px; letter-spacing: 2.4px; color: var(--tinta-3); }

.bi-menu { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bi-menu::-webkit-scrollbar { display: none; }

.bi-menu-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 8px;
    color: #b8c4d6;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: var(--transicao);
}
.bi-menu-item:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.bi-menu-item.ativo {
    background: linear-gradient(180deg, var(--azul-vivo), var(--azul));
    color: #fff; font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 26, 44, .3), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.bi-menu-icone { font-size: 14px; }

.bi-usuario { display: flex; align-items: center; gap: 14px; font-size: 12.5px; flex: 0 0 auto; }
.bi-usuario a { color: #c3cddc; }
.bi-usuario a:hover { color: #fff; }
.bi-usuario-nome { color: #fff; font-weight: 600; }
.bi-sair { color: var(--laranja) !important; }

/* ---------------------------------------------------------
   Área de conteúdo
   --------------------------------------------------------- */
.bi-conteudo {
    padding: 22px;
    max-width: 1720px;
    margin: 0 auto;
}
.bi-body-total .bi-conteudo {
    padding: 0;
    max-width: none;
    height: calc(100vh - var(--topo-altura));
    overflow: hidden;
}

.bi-cabecalho-pagina {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.bi-cabecalho-pagina p { margin: 0; color: var(--tinta-2); font-size: 13px; }
.bi-cabecalho-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------
   Botões
   --------------------------------------------------------- */
.bi-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--borda-forte);
    border-radius: 8px;
    background: #fff;
    color: var(--tinta);
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 550;
    cursor: pointer;
    transition: var(--transicao);
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(16, 26, 44, .04);
}
.bi-botao:hover:not(:disabled) {
    border-color: var(--borda-forte); background: #f7f9fc; color: var(--azul);
    box-shadow: 0 1px 3px rgba(16, 26, 44, .08);
}
/* O botão AFUNDA um pixel ao ser pressionado. Custa uma linha e é o que
   faz a interface responder ao toque em vez de só mudar de cor. */
.bi-botao:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.bi-botao:disabled { opacity: .5; cursor: not-allowed; }
.bi-botao-primario {
    background: linear-gradient(180deg, var(--azul-vivo), var(--azul));
    border-color: var(--azul-escuro); color: #fff;
    box-shadow: 0 1px 2px rgba(16, 26, 44, .18), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.bi-botao-primario:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--azul), var(--azul-escuro));
    border-color: var(--azul-escuro); color: #fff;
}
.bi-botao-perigo {
    background: linear-gradient(180deg, #e05a5a, var(--vermelho));
    border-color: #b93a3a; color: #fff;
    box-shadow: 0 1px 2px rgba(16, 26, 44, .18), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.bi-botao-perigo:hover:not(:disabled) { background: linear-gradient(180deg, var(--vermelho), #b93a3a); color: #fff; }
.bi-botao-neutro { background: #eef2f8; border-color: transparent; }
.bi-botao-fantasma { background: transparent; border-color: transparent; color: var(--tinta-2); }
.bi-botao-fantasma:hover:not(:disabled) { background: #eef2f8; }
.bi-botao-p { padding: 5px 10px; font-size: 12.5px; }
.bi-botao-icone { padding: 6px 9px; }

/* ---------------------------------------------------------
   Campos de formulário
   --------------------------------------------------------- */
.bi-campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.bi-campo > label,
.bi-rotulo {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tinta-2);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.bi-entrada,
.bi-campo input[type="text"],
.bi-campo input[type="number"],
.bi-campo input[type="password"],
.bi-campo input[type="date"],
.bi-campo input[type="datetime-local"],
.bi-campo select,
.bi-campo textarea {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-p);
    background: #fff;
    color: var(--tinta);
    font-size: 13.5px;
    font-family: inherit;
    transition: var(--transicao);
}
.bi-entrada:focus,
.bi-campo input:focus,
.bi-campo select:focus,
.bi-campo textarea:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(13, 106, 191, .13);
}
.bi-campo-ajuda { font-size: 11.5px; color: var(--tinta-3); }
.bi-caixa-marcar { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.bi-caixa-marcar input { width: 15px; height: 15px; accent-color: var(--azul); cursor: pointer; }

/* Interruptor liga/desliga (tela Dados) */
.bi-interruptor { position: relative; display: inline-block; width: 38px; height: 21px; flex: 0 0 auto; }
.bi-interruptor input { opacity: 0; width: 0; height: 0; }
.bi-interruptor span {
    position: absolute; inset: 0; cursor: pointer;
    background: var(--borda-forte); border-radius: 21px; transition: var(--transicao);
}
.bi-interruptor span::before {
    content: ""; position: absolute; width: 15px; height: 15px; left: 3px; bottom: 3px;
    background: #fff; border-radius: 50%; transition: var(--transicao);
}
.bi-interruptor input:checked + span { background: var(--verde); }
.bi-interruptor input:checked + span::before { transform: translateX(17px); }
.bi-interruptor input:disabled + span { opacity: .5; cursor: wait; }

/* ---------------------------------------------------------
   Cartões e blocos
   --------------------------------------------------------- */
.bi-cartao {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    min-width: 0;
}
.bi-cartao-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px; border-bottom: 1px solid var(--borda);
}
.bi-cartao-topo h3 { margin: 0; font-size: 14px; }
.bi-cartao-corpo { padding: 14px; min-width: 0; }

.bi-selo {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 20px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
    background: #eef2f8; color: var(--tinta-2);
}
.bi-selo-ok      { background: #e4f5ed; color: var(--verde); }
.bi-selo-alerta  { background: #fdf3d8; color: #97710a; }
.bi-selo-erro    { background: #fbe7e6; color: var(--vermelho); }
.bi-selo-info    { background: var(--azul-claro); color: var(--azul); }

/* ---------------------------------------------------------
   Estados: vazio, carregando, erro
   --------------------------------------------------------- */
.bi-vazio {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 26px 16px; min-height: 110px;
    color: var(--tinta-3); text-align: center;
}
.bi-vazio-icone { font-size: 26px; opacity: .8; }
.bi-vazio p { margin: 0; font-size: 13px; max-width: 380px; }
.bi-vazio-erro { color: var(--vermelho); }

.bi-carregando { position: relative; pointer-events: none; }
.bi-carregando::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(255, 255, 255, .62);
    background-image: linear-gradient(90deg, transparent, rgba(13, 106, 191, .10), transparent);
    background-size: 220px 100%; background-repeat: no-repeat;
    animation: bi-brilho 1.1s infinite linear;
    border-radius: inherit; z-index: 5;
}
@keyframes bi-brilho {
    from { background-position: -220px 0; }
    to   { background-position: calc(100% + 220px) 0; }
}

/* ---------------------------------------------------------
   Avisos (toasts)
   --------------------------------------------------------- */
.bi-avisos {
    position: fixed; right: 16px; bottom: 16px; z-index: 200;
    display: flex; flex-direction: column; gap: 8px; max-width: min(420px, 92vw);
}
.bi-aviso {
    padding: 11px 14px; border-radius: var(--raio-p);
    background: var(--tinta); color: #fff; font-size: 13px;
    box-shadow: var(--sombra-g); cursor: pointer;
    animation: bi-entrar .2s ease;
    border-left: 3px solid var(--azul);
}
.bi-aviso-ok   { border-left-color: var(--verde); }
.bi-aviso-erro { border-left-color: var(--vermelho); }
.bi-aviso-info { border-left-color: var(--azul); }
.bi-aviso.saindo { opacity: 0; transform: translateX(12px); transition: .3s; }
@keyframes bi-entrar { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------
   Modal
   --------------------------------------------------------- */
/* `.bi-modal-fundo` declara display:flex, e regra de autor vence a folha
   do navegador — sem esta linha o atributo `hidden` não esconderia nada.
   (O painel já resolvia isso no <style> dele; aqui vale pra todas.) */
[hidden] { display: none !important; }

.bi-modal-fundo {
    position: fixed; inset: 0; z-index: 150;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(22, 35, 58, .5); backdrop-filter: blur(2px);
    animation: bi-entrar .15s ease;
}
.bi-modal {
    background: #fff; border-radius: var(--raio); box-shadow: var(--sombra-g);
    width: 100%; max-height: 88vh; display: flex; flex-direction: column;
}
.bi-modal-normal { max-width: 460px; }
.bi-modal-larga  { max-width: 780px; }
.bi-modal-total  { max-width: 1200px; }
.bi-modal-topo {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--borda);
}
.bi-modal-topo h3 { margin: 0; font-size: 15.5px; }
.bi-modal-fechar {
    border: none; background: transparent; font-size: 26px; line-height: 1;
    color: var(--tinta-3); cursor: pointer; padding: 0 4px;
}
.bi-modal-fechar:hover { color: var(--tinta); }
.bi-modal-corpo { padding: 18px; overflow: auto; }
.bi-modal-texto { margin: 0 0 4px; font-size: 14px; }
.bi-modal-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* Abas dentro de modal (compartilhamento) */
.bi-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 16px; }
.bi-aba {
    padding: 8px 14px; border: none; background: transparent; cursor: pointer;
    font-size: 13.5px; font-family: inherit; color: var(--tinta-2);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.bi-aba.ativa { color: var(--azul); border-bottom-color: var(--azul); font-weight: 600; }

/* ---------------------------------------------------------
   Visualizações (usadas por bi-viz.js)
   --------------------------------------------------------- */
.bi-viz-tela { position: relative; width: 100%; height: 100%; min-height: 180px; }
.bi-viz-tela canvas { max-width: 100%; }

.bi-kpis {
    display: grid; gap: 12px; height: 100%;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    align-content: center;
}
.bi-kpi {
    position: relative; padding: 15px 17px 15px 19px;
    border-radius: var(--raio); background: #fff;
    border: 1px solid var(--borda);
    box-shadow: var(--sombra);
    min-width: 0; overflow: hidden;
    transition: var(--transicao);
}
/* A faixa colorida vira um elemento com degradê em vez de uma borda
   chapada — mesma leitura, acabamento melhor, e não empurra o texto. */
.bi-kpi::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    /* Cor chapada primeiro e degradê depois, nesta ordem de propósito:
       navegador que não conhece `color-mix` descarta só a segunda linha
       e fica com a faixa sólida, em vez de ficar sem faixa nenhuma. */
    background: var(--cor, var(--azul));
    background: linear-gradient(180deg, var(--cor, var(--azul)),
                color-mix(in srgb, var(--cor, var(--azul)) 62%, #fff));
}
.bi-kpi.clicavel { cursor: pointer; }
.bi-kpi.clicavel:hover { box-shadow: var(--sombra-m); transform: translateY(-1px); border-color: var(--borda-forte); }
.bi-kpi-valor {
    font-size: clamp(24px, 3.2vw, 36px); font-weight: 700; line-height: 1.08;
    letter-spacing: -.03em; color: var(--tinta); overflow-wrap: anywhere;
}
.bi-kpi-rotulo {
    margin-top: 4px; font-size: 11px; font-weight: 650; color: var(--tinta-3);
    text-transform: uppercase; letter-spacing: .6px;
}

.bi-medidor-centro {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; pointer-events: none; padding-top: 12px;
}
.bi-medidor-valor { font-size: clamp(22px, 3vw, 32px); font-weight: 700; }
.bi-medidor-meta { font-size: 12px; color: var(--tinta-2); }

.bi-tabela-caixa { width: 100%; height: 100%; overflow: auto; }
.bi-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.bi-tabela th, .bi-tabela td {
    padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--borda);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
}
.bi-tabela thead th {
    position: sticky; top: 0; z-index: 2;
    background: #f7f9fc; color: var(--tinta-3);
    font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .5px;
    padding-top: 9px; padding-bottom: 9px;
    /* Sombra em vez de borda: numa tabela com rolagem, a borda do
       cabeçalho fixo "pula" um pixel conforme a linha passa por baixo. */
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--borda-forte);
    user-select: none;
}
.bi-tabela thead th:hover { color: var(--azul); }
.bi-tabela td.num, .bi-tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.bi-tabela tbody tr:hover { background: #f7f9fc; }
/* Linha escolhida no filtro cruzado — o equivalente, na tabela, à barra
   acesa enquanto as outras ficam apagadas. */
.bi-tabela tbody tr.selecionada { background: var(--azul-claro); box-shadow: inset 3px 0 0 var(--azul); }
.bi-tabela tbody tr.selecionada:hover { background: #dceaf8; }
.bi-tabela tbody tr:last-child td { border-bottom: none; }

.bi-matriz th.linha, .bi-matriz th.canto {
    background: #f7f9fc; font-weight: 600; font-size: 12px; color: var(--tinta);
    position: sticky; left: 0; z-index: 1;
}
.bi-matriz th.canto { z-index: 3; }
.bi-matriz .total { font-weight: 700; background: #f2f6fb; }
.bi-matriz tr.rodape td, .bi-matriz tr.rodape th { font-weight: 700; background: #f2f6fb; border-top: 2px solid var(--borda); }
.bi-mapa-calor td.num { font-weight: 600; }

.bi-funil { display: flex; flex-direction: column; gap: 7px; padding: 8px 2px; }
.bi-funil-etapa { display: flex; align-items: center; gap: 10px; }
.bi-funil-barra {
    height: 26px; border-radius: 4px; display: flex; align-items: center;
    justify-content: flex-end; padding: 0 8px; min-width: 42px; transition: width .3s;
}
.bi-funil-barra span { color: #fff; font-size: 12px; font-weight: 700; }
.bi-funil-rotulo {
    flex: 1; font-size: 12.5px; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.bi-funil-rotulo em { color: var(--tinta-3); font-style: normal; margin-left: 6px; font-size: 11.5px; }

.bi-lista { display: flex; flex-direction: column; }
.bi-lista-item {
    position: relative; display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-bottom: 1px solid var(--borda); font-size: 13px;
}
.bi-lista-item:hover { background: #f7f9fc; }
.bi-lista-fundo { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; }
.bi-lista-pos {
    position: relative; width: 20px; text-align: center; font-size: 11px;
    font-weight: 700; color: var(--tinta-3); flex: 0 0 auto;
}
.bi-lista-rotulo { position: relative; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-lista-valor { position: relative; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------
   PAINÉIS (paineis.php)
   --------------------------------------------------------- */
.bi-grade-paineis {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.bi-cartao-painel {
    position: relative; display: flex; flex-direction: column; gap: 8px; padding: 17px;
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-g);
    box-shadow: var(--sombra); transition: var(--transicao); cursor: pointer;
    min-height: 156px;
}
.bi-cartao-painel:hover { box-shadow: var(--sombra-m); transform: translateY(-2px); border-color: var(--borda-forte); }
.bi-cartao-painel:active { transform: translateY(0); }
/* O emoji sozinho boiava no canto do cartão. Numa plaquinha arredondada
   ele vira identidade do painel — mesma ideia do avatar de um usuário. */
.bi-cartao-painel-icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto;
    font-size: 21px; line-height: 1;
    background: linear-gradient(160deg, #f0f5fb, #e4edf8);
    border: 1px solid var(--borda);
    border-radius: 11px;
}
.bi-cartao-painel h3 { margin: 0; font-size: 15px; }
.bi-cartao-painel p { margin: 0; font-size: 12.5px; color: var(--tinta-2); flex: 1; }
.bi-cartao-painel-rodape {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding-top: 9px; border-top: 1px solid var(--borda);
    font-size: 11.5px; color: var(--tinta-3);
}
.bi-cartao-painel-selos { display: flex; gap: 5px; flex-wrap: wrap; }
.bi-cartao-novo {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; border: 2px dashed var(--borda-forte); background: transparent;
    color: var(--tinta-2); font-size: 14px; font-family: inherit; cursor: pointer;
    border-radius: var(--raio); min-height: 150px; transition: var(--transicao);
}
.bi-cartao-novo:hover { border-color: var(--azul); color: var(--azul); background: var(--azul-claro); }
.bi-cartao-novo span { font-size: 28px; }

/* Menu de contexto (⋯) */
.bi-menu-contexto { position: relative; }
.bi-menu-contexto-lista {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 190px;
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-p);
    box-shadow: var(--sombra-g); padding: 4px; display: none;
}
.bi-menu-contexto.aberto .bi-menu-contexto-lista { display: block; }
.bi-menu-contexto-lista button {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 7px 10px; border: none; background: transparent; border-radius: var(--raio-p);
    font-size: 13px; font-family: inherit; color: var(--tinta); cursor: pointer;
}
.bi-menu-contexto-lista button:hover { background: #eef2f8; }
.bi-menu-contexto-lista button.perigo { color: var(--vermelho); }
.bi-menu-contexto-lista hr { border: none; border-top: 1px solid var(--borda); margin: 4px 0; }

/* ---------------------------------------------------------
   PAINEL (painel.php) — barra de filtros e grade de widgets
   --------------------------------------------------------- */
.bi-barra-filtros {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
    padding: 12px 14px; margin-bottom: 14px;
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-g);
    box-shadow: var(--sombra);
}
.bi-filtro { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.bi-filtro > label { font-size: 11px; font-weight: 700; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .4px; }
.bi-barra-filtros-acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Período: o seletor e, quando é "entre datas", os dois campos de data.
   Em tela estreita eles descem pra linha de baixo em vez de espremer. */
.bi-periodo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* O seletor não estica: sem largura própria ele crescia até o tamanho
   dos dois campos de data e o filtro "Período" ficava três vezes maior
   que os vizinhos. */
.bi-periodo > select { flex: 0 0 auto; width: 172px; }
.bi-periodo-datas { display: flex; gap: 5px; align-items: center; }
.bi-periodo-datas input { width: 138px; }
.bi-periodo-datas span { color: var(--tinta-3); font-size: 12px; }
@media (max-width: 720px) {
    .bi-periodo-datas input { width: 100%; min-width: 120px; }
    .bi-periodo-datas { flex: 1 1 100%; }
}

/*
 * Tarja do modo de edição. Fica no alto do painel, em cor de aviso, para
 * que ninguém confunda "estou olhando" com "estou mexendo" — foi
 * justamente essa confusão que motivou separar os dois modos.
 */
.bi-tarja-edicao {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 9px 13px; margin-bottom: 12px;
    background: #fff7e6; border: 1px solid #f0d38a;
    border-radius: var(--raio); font-size: 13px; color: #7a5c00;
}
.bi-tarja-edicao a { color: #7a5c00; font-weight: 600; margin-left: auto; }
.bi-tarja-edicao,
.bi-tarja-cruzado { border-radius: var(--raio-g); }

/* Atualização automática (barra de ações do painel) */
.bi-auto-atualizar {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--tinta-2);
}
.bi-auto-atualizar select { padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.bi-auto-marca {
    font-size: 11.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bi-tarja-cruzado {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 13px; margin-bottom: 12px;
    background: var(--azul-claro); border: 1px solid #bcd8f2;
    border-radius: var(--raio); font-size: 13px; color: var(--azul-escuro);
}
.bi-tarja-cruzado strong { font-weight: 700; }
.bi-tarja-nota { font-size: 11.5px; color: var(--tinta-3); font-style: italic; }
.bi-marca-cruzado {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid #bcd8f2; border-radius: 20px; padding: 3px 6px 3px 11px;
}
.bi-marca-cruzado button {
    border: none; background: transparent; cursor: pointer; color: var(--tinta-2);
    font-size: 15px; line-height: 1; padding: 0 3px;
}
.bi-marca-cruzado button:hover { color: var(--vermelho); }

/* ---------------------------------------------------------
   Detalhamento (os registros por trás de um número)
   --------------------------------------------------------- */
.bi-detalhe { display: flex; flex-direction: column; gap: 10px; min-height: 240px; }
.bi-detalhe-topo {
    font-size: 12.5px; font-weight: 600; color: var(--tinta-2);
    padding-bottom: 8px; border-bottom: 1px solid var(--borda);
}
/* Altura limitada + rolagem por dentro: uma lista de 500 registros não
   pode empurrar o rodapé do modal pra fora da tela. */
.bi-detalhe-corpo { max-height: min(56vh, 520px); overflow: auto; border-radius: var(--raio-p); }
.bi-detalhe-rodape { display: flex; gap: 8px; align-items: center; }
.bi-detalhe-rodape [data-csv] { margin-left: auto; }

/* Nota do dono, dentro do modal de permissões */
.bi-nota-dono {
    display: flex; gap: 9px; align-items: flex-start;
    padding: 10px 12px; margin-bottom: 14px;
    background: var(--azul-claro); border: 1px solid #cfe0f3;
    border-radius: var(--raio-p); font-size: 12.5px; color: var(--tinta-2);
}
.bi-nota-dono strong { color: var(--tinta); }

/* Widgets */
.bi-widget {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-g);
    box-shadow: var(--sombra); overflow: hidden; min-width: 0;
    transition: box-shadow var(--transicao), border-color var(--transicao);
}
.bi-widget:hover { box-shadow: var(--sombra-m); }
.bi-widget.destacado { border-color: var(--azul); box-shadow: var(--anel), var(--sombra-m); }
.bi-widget-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 11px 14px 9px; flex: 0 0 auto;
}
.bi-widget-titulo {
    font-size: 13.5px; font-weight: 650; margin: 0; min-width: 0;
    letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* O menu (⋯) só aparece quando o ponteiro está no quadro: um painel com
   oito quadros mostrava oito reticências competindo com os números.
   Continua sempre visível pra quem navega por teclado e no toque. */
@media (hover: hover) {
    .bi-widget-acoes { opacity: 0; transition: opacity var(--transicao); }
    .bi-widget:hover .bi-widget-acoes,
    .bi-widget-acoes:focus-within { opacity: 1; }
    /* `:has()` numa regra separada: se o navegador não entender o
       seletor, ele descarta ESTA linha e não a de cima junto — o que
       deixaria o menu invisível pra sempre. */
    .bi-widget-acoes:has(.aberto) { opacity: 1; }
    /* Mesmo efeito sem depender de :has() — o painel.js já marca o
       quadro cujo menu está aberto com `menu-aberto`. */
    .bi-widget.menu-aberto .bi-widget-acoes { opacity: 1; }
}
.bi-widget-acoes { display: flex; gap: 2px; align-items: center; flex: 0 0 auto; }
/* Mesmo princípio da prévia do Estúdio: o conteúdo do quadro rola por
   dentro dele em vez de vazar pra cima do quadro vizinho. */
.bi-widget-corpo { flex: 1 1 auto; padding: 10px 12px 12px; min-height: 0; min-width: 0; overflow: auto; position: relative; }
.bi-widget-corpo > .bi-tabela-caixa,
.bi-widget-corpo > .bi-lista,
.bi-widget-corpo > .bi-funil { height: 100%; overflow: auto; }

/* Grade estática (visualização e painel público) */
.bi-grade-widgets {
    display: grid; gap: 14px;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 78px;
}
.bi-grade-widgets > * { min-width: 0; }

/* GridStack (modo edição) — ajustes por cima do CSS da biblioteca */
.grid-stack { background: transparent; }
.grid-stack-item-content {
    inset: 0 !important;
    display: flex; flex-direction: column; overflow: hidden !important;
}
.bi-editando .bi-widget-topo { cursor: move; }

/* ---------------------------------------------------------
   ESTÚDIO (estudio.php)
   --------------------------------------------------------- */
.bi-estudio {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr) 312px;
    height: 100%;
    background: var(--fundo);
}
.bi-estudio > section {
    display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
}
.bi-estudio-campos { background: #fff; border-right: 1px solid var(--borda); }
.bi-estudio-config { background: #fff; border-left: 1px solid var(--borda); }
.bi-estudio-centro { padding: 14px; overflow: auto; }

.bi-painel-secao {
    padding: 11px 13px; border-bottom: 1px solid var(--borda); flex: 0 0 auto;
}
.bi-painel-secao h3 {
    margin: 0 0 8px; font-size: 11.5px; font-weight: 700; color: var(--tinta-2);
    text-transform: uppercase; letter-spacing: .5px;
}
.bi-painel-rolagem { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

/* Lista de entidades e campos */
.bi-entidade { border-bottom: 1px solid var(--borda); }
.bi-entidade > summary {
    display: flex; align-items: center; gap: 7px; padding: 8px 13px;
    cursor: pointer; font-size: 13px; font-weight: 600; list-style: none;
    user-select: none; transition: var(--transicao);
}
.bi-entidade > summary::-webkit-details-marker { display: none; }
.bi-entidade > summary:hover { background: #f7f9fc; }
.bi-entidade > summary::before { content: "▸"; color: var(--tinta-3); font-size: 11px; transition: transform .15s; }
.bi-entidade[open] > summary::before { transform: rotate(90deg); }
.bi-entidade-qtde { margin-left: auto; font-size: 11px; color: var(--tinta-3); font-weight: 400; }
.bi-entidade.nao-sincronizada > summary { opacity: .55; }

.bi-modulo-titulo {
    padding: 9px 13px 5px; font-size: 10.5px; font-weight: 700;
    color: var(--tinta-3); text-transform: uppercase; letter-spacing: .8px;
    background: #f7f9fc; border-bottom: 1px solid var(--borda);
}

.bi-campo-item {
    display: flex; align-items: center; gap: 8px; padding: 5px 13px 5px 28px;
    font-size: 12.5px; cursor: grab; border-left: 2px solid transparent;
    transition: var(--transicao);
}
.bi-campo-item:hover { background: var(--azul-claro); border-left-color: var(--azul); }
.bi-campo-item:active { cursor: grabbing; }
.bi-campo-icone {
    width: 17px; height: 17px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 3px; background: #eef2f8; color: var(--tinta-2);
    font-size: 10px; font-weight: 700;
}
.bi-campo-item[data-tipo="inteiro"] .bi-campo-icone,
.bi-campo-item[data-tipo="decimal"] .bi-campo-icone { background: #e4f5ed; color: var(--verde); }
.bi-campo-item[data-tipo="data"] .bi-campo-icone,
.bi-campo-item[data-tipo="datahora"] .bi-campo-icone { background: #fdf3d8; color: #97710a; }
.bi-campo-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Zonas de soltar */
.bi-zona { margin-bottom: 12px; }
.bi-zona-alvo {
    min-height: 46px; padding: 6px; border: 1.5px dashed var(--borda-forte);
    border-radius: var(--raio-p); background: #fbfcfe;
    display: flex; flex-direction: column; gap: 5px; transition: var(--transicao);
}
.bi-zona-alvo.sobre { border-color: var(--azul); background: var(--azul-claro); }
.bi-zona-vazia {
    display: flex; align-items: center; justify-content: center; min-height: 34px;
    color: var(--tinta-3); font-size: 12px; text-align: center; padding: 4px;
}
.bi-item-zona {
    display: flex; align-items: center; gap: 6px; padding: 6px 8px;
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-p);
    font-size: 12.5px;
}
.bi-item-zona-corpo { flex: 1; min-width: 0; }
.bi-item-zona-rotulo {
    font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bi-item-zona-origem { font-size: 10.5px; color: var(--tinta-3); }
.bi-item-zona select {
    width: 100%; margin-top: 4px; padding: 3px 6px; font-size: 11.5px;
    border: 1px solid var(--borda); border-radius: 4px; background: #fff; font-family: inherit;
}
.bi-item-zona-remover {
    border: none; background: transparent; color: var(--tinta-3); cursor: pointer;
    font-size: 16px; line-height: 1; padding: 0 2px; flex: 0 0 auto;
}
.bi-item-zona-remover:hover { color: var(--vermelho); }

/* Seletor de tipo de visualização */
.bi-tipos { display: flex; gap: 5px; flex-wrap: wrap; }
.bi-tipo-botao {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    width: 58px; padding: 7px 3px; border: 1px solid var(--borda);
    border-radius: var(--raio-p); background: #fff; cursor: pointer;
    font-size: 9.5px; font-family: inherit; color: var(--tinta-2); transition: var(--transicao);
}
.bi-tipo-botao span { font-size: 17px; }
.bi-tipo-botao:hover:not(:disabled) { border-color: var(--azul); color: var(--azul); }
.bi-tipo-botao.ativo { border-color: var(--azul); background: var(--azul-claro); color: var(--azul); font-weight: 700; }
.bi-tipo-botao:disabled { opacity: .35; cursor: not-allowed; }
.bi-tipo-botao.sugerido::after {
    content: "✨"; position: absolute; margin: -22px 0 0 34px; font-size: 10px;
}

/* Prévia */
.bi-previa {
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: 14px; min-height: 380px;
    display: flex; flex-direction: column; min-width: 0;
}
.bi-previa-titulo {
    font-size: 16px; font-weight: 600; border: none; border-bottom: 1px dashed transparent;
    padding: 2px 0; margin-bottom: 10px; background: transparent; font-family: inherit;
    color: var(--tinta); width: 100%;
}
.bi-previa-titulo:hover { border-bottom-color: var(--borda-forte); }
.bi-previa-titulo:focus { outline: none; border-bottom-color: var(--azul); }
/* Rolagem, não corte: um gráfico de barras horizontais com 50 categorias
   pede ~1.400px de altura pra não sobrepor os rótulos. Em vez de espremer
   (o que faria o Chart.js esconder categorias) ou deixar vazar por cima do
   rodapé, a área da prévia rola por dentro. */
.bi-previa-area { flex: 1 1 auto; min-height: 320px; min-width: 0; overflow: auto; position: relative; }

.bi-rodape-consulta {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borda);
    font-size: 12px; color: var(--tinta-2);
}
.bi-juncao {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 20px;
    background: #e4f5ed; color: var(--verde); font-size: 11.5px; font-weight: 600;
}
.bi-sql {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; white-space: pre-wrap; word-break: break-word;
    background: #f7f9fc; border: 1px solid var(--borda); border-radius: var(--raio-p);
    padding: 12px; color: var(--tinta); max-height: 46vh; overflow: auto;
}

/* ---------------------------------------------------------
   MODELO DE DADOS (modelo.php)
   --------------------------------------------------------- */
.bi-modelo { display: flex; flex-direction: column; height: 100%; }
.bi-modelo-barra {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 9px 14px; background: #fff; border-bottom: 1px solid var(--borda);
    flex: 0 0 auto;
}
.bi-modelo-area { flex: 1 1 auto; position: relative; overflow: hidden; background:
    radial-gradient(circle, #dfe6f0 1px, transparent 1px) 0 0 / 22px 22px, var(--fundo); }
.bi-modelo-svg { width: 100%; height: 100%; cursor: grab; display: block; }
.bi-modelo-svg.arrastando { cursor: grabbing; }

.bi-no-tabela rect.bi-no-corpo {
    fill: #fff; stroke: var(--borda-forte); stroke-width: 1;
    filter: drop-shadow(0 2px 5px rgba(22, 35, 58, .10));
}
.bi-no-tabela.destacado rect.bi-no-corpo { stroke: var(--azul); stroke-width: 2; }
.bi-no-tabela.apagado { opacity: .28; }
.bi-no-tabela { cursor: pointer; }
.bi-no-tabela text { font-size: 11.5px; fill: var(--tinta); user-select: none; }
.bi-no-tabela text.titulo { font-size: 12.5px; font-weight: 700; fill: #fff; }
.bi-no-tabela text.detalhe { font-size: 10px; fill: var(--tinta-3); }

.bi-aresta { fill: none; stroke: var(--borda-forte); stroke-width: 1.6; transition: var(--transicao); }
.bi-aresta.alta   { stroke: var(--verde); }
.bi-aresta.media  { stroke: var(--amarelo); }
.bi-aresta.baixa  { stroke: var(--tinta-3); stroke-dasharray: 5 4; }
.bi-aresta.inativa { stroke: var(--borda-forte); stroke-dasharray: 3 5; opacity: .55; }
.bi-aresta.destacada { stroke: var(--laranja); stroke-width: 3; }
.bi-aresta-alvo { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.bi-aresta-rotulo { font-size: 9.5px; fill: var(--tinta-2); pointer-events: none; user-select: none; }

.bi-lateral {
    position: absolute; right: 0; top: 0; bottom: 0; width: 330px; z-index: 20;
    background: #fff; border-left: 1px solid var(--borda); box-shadow: -6px 0 18px rgba(22, 35, 58, .10);
    display: flex; flex-direction: column; transform: translateX(100%);
    transition: transform .2s ease;
}
.bi-lateral.aberta { transform: translateX(0); }
.bi-lateral-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 13px 15px; border-bottom: 1px solid var(--borda);
}
.bi-lateral-corpo { flex: 1; overflow: auto; padding: 15px; }
.bi-lista-campos { display: flex; flex-direction: column; gap: 1px; }
.bi-lista-campos div {
    display: flex; align-items: center; gap: 8px; padding: 5px 7px;
    font-size: 12.5px; border-radius: 4px;
}
.bi-lista-campos div:hover { background: #f7f9fc; }
.bi-lista-campos em { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--tinta-3); }

/* ---------------------------------------------------------
   DADOS (dados.php)
   --------------------------------------------------------- */
.bi-resumo {
    display: grid; gap: 12px; margin-bottom: 16px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.bi-resumo-cartao {
    padding: 14px 16px; background: #fff; border: 1px solid var(--borda);
    border-radius: var(--raio); box-shadow: var(--sombra);
}
.bi-resumo-valor { font-size: 25px; font-weight: 700; line-height: 1.15; }
.bi-resumo-rotulo {
    font-size: 11.5px; font-weight: 600; color: var(--tinta-2);
    text-transform: uppercase; letter-spacing: .4px; margin-top: 2px;
}

.bi-tabela-dados { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.bi-tabela-dados th, .bi-tabela-dados td { padding: 9px 12px; border-bottom: 1px solid var(--borda); text-align: left; }
.bi-tabela-dados thead th {
    background: #f7f9fc; font-size: 11px; font-weight: 650; color: var(--tinta-3);
    text-transform: uppercase; letter-spacing: .5px;
    /*
     * `top: 0`, e não a altura da barra do topo.
     *
     * Quem rola aqui é a CAIXA da tabela (ela declara overflow), não a
     * página — e num contêiner com rolagem o `top` do sticky é medido a
     * partir do topo do contêiner. Com `top: 56px` o cabeçalho descia 56
     * pixels pra dentro da tabela e ficava POR CIMA da primeira linha,
     * que era o que se via na tela: "Assuntos de OS" cortado ao meio.
     */
    position: sticky; top: 0; z-index: 3;
    box-shadow: inset 0 -1px 0 var(--borda-forte);
}
.bi-tabela-dados td.num, .bi-tabela-dados th.num { text-align: right; font-variant-numeric: tabular-nums; }
.bi-tabela-dados tbody tr:hover { background: #f7f9fc; }
.bi-tabela-dados tr.desligada { opacity: .55; }

.bi-progresso { height: 6px; border-radius: 3px; background: #eef2f8; overflow: hidden; margin-top: 5px; }
.bi-progresso-barra { height: 100%; background: var(--azul); width: 0; transition: width .25s; }
.bi-progresso-barra.ok  { background: var(--verde); }
.bi-progresso-barra.erro { background: var(--vermelho); }

.bi-log {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; background: var(--tinta); color: #c9d6e6;
    border-radius: var(--raio-p); padding: 11px 13px;
    max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
.bi-log .ok { color: #7fd6ab; }
.bi-log .erro { color: #ff9a95; }

/* ---------------------------------------------------------
   PAINEL PÚBLICO (publico.php)
   --------------------------------------------------------- */
.bi-publico-topo {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 22px; background: #fff; border-bottom: 1px solid var(--borda);
}
.bi-publico-topo .bi-marca { color: var(--tinta); }
.bi-publico-topo .bi-marca-texto small { color: var(--tinta-3); }
.bi-publico-titulo { flex: 1; min-width: 0; }
.bi-publico-titulo h1 { margin: 0; font-size: 18px; }
.bi-publico-titulo p { margin: 0; font-size: 12px; color: var(--tinta-2); }
.bi-publico-rodape {
    padding: 20px; text-align: center; font-size: 12px; color: var(--tinta-3);
}
.bi-caixa-central {
    max-width: 380px; margin: 12vh auto; padding: 26px;
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra-m); text-align: center;
}
.bi-caixa-central img { width: 130px; margin-bottom: 14px; }
.bi-caixa-central form { text-align: left; margin-top: 16px; }

/* ---------------------------------------------------------
   Telas de acesso (login e troca de senha)
   ---------------------------------------------------------
   Elas ficavam numa folha de estilo à parte, herdada do painel
   antigo — com outro azul, outra fonte e outro botão. Quem entrava
   via duas identidades diferentes no mesmo sistema. Agora usam os
   mesmos tokens de tudo.
   --------------------------------------------------------- */
.bi-acesso {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(47, 134, 232, .16), transparent 60%),
        var(--fundo);
}
.bi-acesso-caixa {
    width: 100%; max-width: 380px;
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra-m);
    padding: 28px 26px 24px;
}
.bi-acesso-marca { text-align: center; margin-bottom: 6px; }
.bi-acesso-marca img { max-width: 168px; height: auto; }
.bi-acesso-caixa h1 {
    text-align: center; font-size: 19px; margin: 0 0 4px;
}
.bi-acesso-dica {
    text-align: center; color: var(--tinta-2); font-size: 12.5px; margin: 0 0 18px;
}
.bi-acesso-caixa .bi-botao { width: 100%; margin-top: 6px; padding: 10px 14px; }
.bi-acesso-rodape {
    display: block; text-align: center; margin-top: 15px;
    font-size: 12.5px; color: var(--tinta-2);
}

/* Faixas de mensagem — usadas nas telas de acesso e na de usuários. */
.bi-alerta {
    padding: 10px 12px; border-radius: var(--raio-p); font-size: 13px;
    margin-bottom: 14px; border: 1px solid transparent;
}
.bi-alerta-erro { background: #fdecea; border-color: #f5c6c2; color: #a3312d; }
.bi-alerta-ok   { background: #eafaf0; border-color: #bfe8d2; color: #14683f; }
.bi-alerta-info { background: #fff7e6; border-color: #f0d38a; color: #7a5c00; }

/* ---------------------------------------------------------
   USUÁRIOS (usuarios.php)
   --------------------------------------------------------- */
.bi-usuarios-lista { display: flex; flex-direction: column; gap: 8px; }
.bi-usuario-linha {
    display: flex; align-items: center; flex-wrap: wrap; gap: 13px;
    padding: 13px 15px;
    border: 1px solid transparent; border-radius: var(--raio);
    transition: var(--transicao);
}
.bi-usuario-linha:hover { background: #f7fafd; border-color: var(--borda); }
.bi-usuario-inicial {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--azul-vivo), var(--azul-escuro));
    color: #fff; font-weight: 700; font-size: 13px;
}
.bi-usuario-dados { flex: 1 1 220px; min-width: 0; }
.bi-usuario-titulo { font-weight: 650; font-size: 14px; display: flex; align-items: center; gap: 7px; }
.bi-usuario-eu {
    font-size: 10px; font-weight: 650; color: var(--azul);
    background: var(--azul-claro); border-radius: 5px; padding: 1px 6px;
}
.bi-usuario-detalhe { font-size: 12px; color: var(--tinta-3); margin-top: 2px; }
.bi-usuario-selos { display: flex; gap: 5px; flex-wrap: wrap; }
.bi-usuario-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.bi-usuario-botoes form { margin: 0; }

.bi-usuario-acessos {
    flex: 1 0 100%;
    border-top: 1px dashed var(--borda);
    padding-top: 10px;
}
.bi-usuario-acessos form { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin: 0; }
.bi-usuario-acessos-titulo,
.bi-usuario-acessos-nota { font-size: 12px; color: var(--tinta-3); }
.bi-acesso-item {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--tinta); cursor: pointer;
}
.bi-acesso-item.incluida { color: var(--tinta-3); cursor: default; }
.bi-acesso-nota { font-size: 11px; color: var(--tinta-3); }
.bi-usuario-acessos form .bi-botao { margin-left: auto; }

.bi-numeros {
    display: grid; gap: 12px; margin-bottom: 16px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* ---------------------------------------------------------
   Responsivo
   --------------------------------------------------------- */
@media (max-width: 1180px) {
    .bi-estudio { grid-template-columns: 220px minmax(0, 1fr) 280px; }
}

/*
 * A GRADE DOS QUADROS EM TELA ESTREITA
 * ------------------------------------
 * O layout de um painel é posição EXPLÍCITA: cada quadro traz no estilo
 * `grid-column: X / span L` e `grid-row: Y / span A`.
 *
 * A regra antiga reescrevia só a coluna. A linha continuava valendo — e
 * numa grade de uma coluna só, dois quadros que estavam lado a lado
 * (mesma linha, colunas diferentes) passavam a disputar a MESMA célula e
 * um desenhava por cima do outro. Era o que acontecia com "OS por Bairro"
 * em cima de "OS por Assunto" e "Clientes Reincidentes" em cima de
 * "Colaborador"; "OS Fechada por Dia" escapava só porque ocupa a linha
 * inteira sozinho.
 *
 * Agora as duas coordenadas são zeradas juntas, sempre. Sem posição
 * explícita, o navegador empilha na ordem do documento — que é a ordem
 * de leitura do painel (o servidor entrega por `ordem, pos_y, pos_x`).
 */
@media (max-width: 1200px) {
    /* Passo intermediário: duas colunas em vez das doze. Um quadro que
       ocupava 1/3 da tela não vira uma tira ilegível de largura inteira
       antes da hora. */
    .bi-grade-widgets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(300px, auto);
    }
    .bi-grade-widgets > * {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

@media (max-width: 960px) {
    .bi-conteudo { padding: 14px; }
    .bi-body-total .bi-conteudo { height: auto; overflow: visible; }
    .bi-estudio { grid-template-columns: 1fr; height: auto; }
    .bi-estudio > section { max-height: 62vh; }
    .bi-estudio-campos, .bi-estudio-config { border: none; border-bottom: 1px solid var(--borda); }
    .bi-modelo-area { height: 68vh; }

    .bi-grade-widgets { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
    .bi-grade-widgets > * {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        min-height: 300px;
    }
}

@media (max-width: 700px) {
    .bi-topo { gap: 10px; padding: 0 12px; }
    .bi-marca-texto { display: none; }
    .bi-usuario a:not(.bi-sair) { display: none; }
    .bi-menu-item { padding: 7px 9px; }
    .bi-menu-item span + * { display: none; }
    .bi-lateral { width: 100%; }
}

/* Impressão: sem barras nem botões, só o conteúdo. */
@media print {
    .bi-topo, .bi-barra-filtros-acoes, .bi-widget-acoes,
    .bi-cabecalho-acoes, .bi-avisos { display: none !important; }
    body.bi-body { background: #fff; }
    .bi-widget { break-inside: avoid; box-shadow: none; }
}

/* Aviso do motor de consultas dentro do quadro (junção que multiplica
   linhas, caminho longo, resultado cortado). Discreto, mas presente:
   um número errado sem nenhum sinal na tela é o pior defeito de um BI. */
.bi-widget-aviso {
    border: none;
    background: #fdf3d8;
    color: #97710a;
    font-size: 12px;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 20px;
    cursor: pointer;
    flex: 0 0 auto;
}
.bi-widget-aviso:hover { background: #f8e6b0; }

.bi-lista-avisos { margin: 0; padding-left: 18px; font-size: 13.5px; }
.bi-lista-avisos li { margin-bottom: 10px; }
.bi-lista-avisos li:last-child { margin-bottom: 0; }