:root {
    --accent: #1d4ed8;
    /* Altura única dos controles que dividem uma barra: busca, botões e selects.
       34px é a altura NATURAL do .btn e da caixa de busca antiga — subir para os
       38px do .form-input deixava a barra pesada. */
    --ctrl-h: 34px;
    /* Altura dos campos dentro de formulário (form-input, op-sel). Maior que a
       da barra: aqui o campo é o assunto da tela, não um acessório. */
    --field-h: 38px;
}

* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--body-bg); color: var(--body-color); }

/* ── Layout ── */
.topbar { background: var(--topbar-bg); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.sidebar { background: var(--sidebar-bg); min-height: calc(100vh - 56px); border-right: 1px solid var(--sidebar-border) !important; box-shadow: 2px 0 8px rgba(0,0,0,.06); }

/* ── Nav ── */
.nav-link { display:flex; align-items:center; gap:.5rem; padding:.45rem .75rem; border-radius:.5rem; font-size:.825rem; color:var(--nav-color); text-decoration:none; transition:background .15s; }
.nav-link:hover { background:var(--nav-hover-bg); color:var(--nav-hover-color); }
.nav-link.active { background:var(--nav-active-bg); color:var(--nav-active-color); }
.nav-link i { width:1rem; text-align:center; font-size:.8rem; }
.nav-section { font-size:.65rem; font-weight:700; color:var(--nav-section-color); text-transform:uppercase; letter-spacing:.08em; padding:.25rem .75rem; margin-top:1rem; margin-bottom:.25rem; }

/* ── Page header (título + botão de ação) ── */
.page-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; gap:1rem; }
.page-hdr h1 { font-size:1.1rem; font-weight:600; color:var(--page-title-color); margin:0; }

/* ── Breadcrumb ── */
.breadcrumb { display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--breadcrumb-color); margin-bottom:1rem; }
.breadcrumb a { color:var(--breadcrumb-color); text-decoration:none; }
.breadcrumb a:hover { color:var(--breadcrumb-current); }
.breadcrumb .sep { font-size:.6rem; }
.breadcrumb .current { color:var(--breadcrumb-current); font-weight:500; }

/* ── Botões ── */
.btn { display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:600; padding:.45rem .9rem; border-radius:.5rem; border:none; cursor:pointer; text-decoration:none; transition:opacity .15s, background .15s, box-shadow .15s; white-space:nowrap; line-height:1.4; box-shadow:0 1px 4px rgba(0,0,0,.10); }
/* Sem isto o navegador decide sozinho como mostrar `disabled`, e um botão
   desabilitado podia ficar visualmente idêntico a um habilitado — quem clica
   não vê diferença nenhuma nem entende por que "não acontece nada". Mesmo
   sinal (opacidade + cursor) que `.form-input:disabled` já usa. */
.btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.btn-primary:disabled:hover { opacity:.5; }
.btn-primary { background:#1d4ed8; color:#fff; }
.btn-primary:hover { opacity:.88; color:#fff; }
/* Secundário é vazado: borda fina, sem fundo cheio nem sombra. Com os dois, ele
   pesava mais que o campo ao lado na mesma barra, embora a altura fosse igual.
   O preenchimento fica para o hover, que é quem precisa dizer "isto é clicável". */
.btn-secondary { background:transparent; color:var(--nav-color); border:1px solid var(--input-border); box-shadow:none; }
.btn-secondary:hover { background:var(--nav-hover-bg); color:var(--nav-hover-color); }
.btn-danger { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.btn-danger:hover { background:#fee2e2; }
.btn-sm { font-size:.72rem; padding:.3rem .65rem; }

/* ── Ícones de ação nas tabelas (padrão MoldurariaV2) ── */
/* `border:0` e `font-family:inherit` importam quando o .act é um <button> e não
   um <a>: o botão vem com borda e fonte próprias do navegador, e sem isto ele
   aparece dentro de uma caixinha, diferente dos ícones vizinhos. */
.act { display:inline-flex; align-items:center; justify-content:center; padding:.22rem .15rem; margin:0 .03rem; border:0; border-radius:.3rem; text-decoration:none; font-size:.82rem; font-family:inherit; cursor:pointer; transition:background .12s, color .12s; background:transparent; }
.act:hover { background:rgba(0,0,0,.07); }
.act-edit  { color:#3b82f6; }
.act-edit:hover  { color:#1d4ed8; background:#eff6ff; }
.act-del   { color:#f87171; }
.act-del:hover   { color:#dc2626; background:#fef2f2; }
.act-view  { color:#9ca3af; }
.act-view:hover  { color:#374151; background:#f3f4f6; }
.act-print { color:#9ca3af; }
.act-print:hover { color:#374151; background:#f3f4f6; }

/* ── Tabelas ── */
.data-table { width:100%; font-size:.825rem; border-collapse:collapse; }
.data-table thead { background:var(--table-head-bg); border-bottom:1px solid var(--table-border); }
.data-table th { text-align:left; padding:.65rem 1rem; font-weight:600; color:var(--th-color); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.data-table th.center, .data-table td.center { text-align:center; }
.data-table th.right, .data-table td.right { text-align:right; }
.data-table td { padding:.45rem 1rem; border-bottom:1px solid var(--table-row-border); color:var(--td-color); vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover { background:var(--table-row-hover); }
.data-table .empty td { text-align:center; color:var(--th-color); padding:3rem 1rem; }

/* ── Badges ── */
.badge { display:inline-block; font-size:.7rem; font-weight:600; padding:.2rem .55rem; border-radius:999px; }
.badge-green { background:var(--badge-green-bg); color:var(--badge-green-color); }
.badge-gray  { background:var(--badge-gray-bg);  color:var(--badge-gray-color); }
.badge-red   { background:var(--badge-red-bg);   color:var(--badge-red-color); }

/* ── Cards ── */
.card { background:var(--card-bg); border-radius:.875rem; border:1px solid var(--card-border); box-shadow:0 4px 16px rgba(0,0,0,.08); }
.card-body { padding:1.5rem; }
/* Tabela vai de ponta a ponta (sem card-body); clipa ao raio do card pra o
   cabeçalho não cobrir os cantos arredondados. No mobile a media query abaixo
   troca só o overflow-x pra auto (rolar tabela larga); o vertical segue clipado. */
.dash-table-card { overflow: hidden; }

/* ── Formulários ── */
.form-label { display:block; font-size:.7rem; font-weight:700; color:var(--th-color); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.3rem; }
.form-input { width:100%; min-height:var(--field-h); border:1.5px solid var(--input-border); border-radius:.5rem; padding:.55rem .75rem; font-size:.875rem; color:var(--input-color) !important; background:var(--input-bg) !important; outline:none; transition:border-color .18s, box-shadow .18s; }
.form-input:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.13); }
/* Campo desabilitado (ex.: busca_avancada.js travando Item/Situação/Tipo por
   combinação impossível) — sem isto ele ficava idêntico a um campo comum
   ainda vazio, e não dava pra saber que estava travado de propósito. */
.form-input:disabled, .op-sel:disabled { background:var(--input-disabled-bg) !important; cursor:not-allowed; opacity:.7; }
.form-input::placeholder { color:var(--input-placeholder); }
/* campo required vazio ao tentar salvar — marcado via JS (evento 'invalid') */
.campo-invalido { border-color:var(--accent-red) !important; box-shadow:0 0 0 3px rgba(220,38,38,.12) !important; }
/* O seletor de operador ("contém", "igual a") fica SEMPRE ao lado de um
   .form-input na busca avançada — mesma altura, senão os dois campos do par
   aparecem desencontrados. */
.op-sel { height:var(--field-h); border:1px solid var(--input-border); border-radius:.4rem; padding:0 .5rem; font-size:.78rem; color:var(--input-color) !important; background:var(--input-bg) !important; outline:none; min-width:130px; }

/* A LISTA que abre ao clicar num <select> é desenhada pelo navegador, e ele
   não usa o fundo do <select>: sem regra própria no <option>, ela sai BRANCA
   no tema escuro — caixa branca com texto claro, praticamente ilegível.
   Achado em 2026-08-25 no select de "linhas por página".
   Vale para os ~90 selects do sistema de uma vez, e não só para os que têm
   fundo transparente: depender do fundo do <select> é comportamento que varia
   entre navegadores, e os PCs das lojas rodam Firefox antigo. */
select option,
select optgroup { background: var(--input-bg); color: var(--input-color); }

/* Filtro escolhido — o bloco (rótulo, operador e valor) ganha borda azul,
   marcado via JS em filtros_realce.js nas quatro telas com filtros avançados.
   São dezenas de campos no painel: sem isso, abrindo pelo "editar" era preciso
   varrer todos para achar o que estava filtrado.
   O !important vence a borda inline da caixa com o ✕.
   Só a BORDA muda: o rótulo fica como está nas outras telas. */
.campo-ativo .form-input,
.campo-ativo .op-sel,
.campo-ativo .campo-box { border-color:#3b82f6 !important; box-shadow:0 0 0 2px rgba(59,130,246,.12); }

/* Caixa que o busca_avancada.js monta em volta dos campos de texto/data/número
   para abrigar o ✕ de limpar. O visual estava INLINE no JS, com `#fff` e
   `#d1d5db` fixos — no tema escuro sobrava uma faixa branca do lado do ✕
   (achado em 2026-08-25) e a borda saía mais clara que a dos campos vizinhos.
   Cor de elemento que o JS cria mora aqui: no JS ela não acompanha o tema. */
.campo-box { display:inline-flex; align-items:center; flex:1; min-width:0;
             border:1.5px solid var(--input-border); border-radius:.5rem;
             background:var(--input-bg); overflow:hidden; }
.campo-box .campo-limpar { display:none; background:none; border:none;
             cursor:pointer; color:var(--text-faint); font-size:.8rem;
             padding:0 .5rem; line-height:1; flex-shrink:0; }

/* ── Filtro / barra de busca ──
   `.filter-bar` saiu em 2026-08-04: fazia o mesmo que `.toolbar`, com outro nome. */

/* Caixa de busca das listas — UMA medida só e a mesma borda do .form-input.
   Até 2026-08-04 cada tela trazia a caixa em style inline e as larguras iam de
   150 a 280px, com borda de 1px enquanto os campos vizinhos usavam 1.5px.
   Estrutura:  <div class="busca">[<i class="lupa">] <input> [<a class="limpar">]
   Use .busca-sm num filtro estreito ao lado de outros campos (auditoria). */
/* Barra de controles da lista — tudo que divide a linha com a busca fica com a
   MESMA altura e o MESMO tamanho de fonte. Antes conviviam na mesma barra a
   caixa de 38px, o .btn de 32 e o .btn-sm de 26, cada um com sua fonte.
   Use `toolbar-fim` quando os campos tiverem label em cima (Alterações,
   Auditoria): aí o alinhamento é pela base, não pelo centro. */
.toolbar { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; flex-wrap:wrap; }
.toolbar-fim { align-items:flex-end; }
/* `height` e não `min-height`: com mínimo, o .form-input (que é mais alto por
   natureza) não desceria e a barra continuaria desencontrada. */
.toolbar .btn, .toolbar .busca, .toolbar .form-input { height:var(--ctrl-h); }
.toolbar .form-input { padding-top:0; padding-bottom:0; }
.toolbar .btn { font-size:.8rem; padding:.45rem .9rem; }  /* vence o .btn-sm dentro da barra */
/* O painel de colunas cai dentro da barra, mas é um menu — seus botões
   continuam pequenos, como o Márcio aprovou. */
.toolbar .painel-colunas .btn { font-size:.72rem; padding:.3rem .65rem; min-height:0; }

/* Altura FIXA, não mínima: a soma do padding com a linha do input dava ~37,6px
   e bastava a fonte do sistema render um pixel a mais para a caixa passar dos
   38px do botão ao lado. Com height o valor não depende do conteúdo. */
.busca { height:var(--ctrl-h); display:inline-flex; align-items:center; width:280px; max-width:100%; border:1.5px solid var(--input-border); border-radius:.5rem; background:var(--input-bg); overflow:hidden; transition:border-color .18s, box-shadow .18s; }
.busca:focus-within { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.13); }
.busca input { flex:1; min-width:0; height:100%; border:none; outline:none; padding:0 .75rem; font-size:.875rem; background:transparent; color:var(--input-color); }
.busca input::placeholder { color:var(--input-placeholder); }
.busca .lupa { color:var(--input-placeholder); font-size:.8rem; padding:0 0 0 .75rem; flex-shrink:0; }
.busca .lupa + input { padding-left:.5rem; }
.busca .limpar { padding:0 .6rem; color:var(--text-faint); text-decoration:none; font-size:.85rem; line-height:1; display:flex; align-items:center; flex-shrink:0; }
.busca-sm { width:170px; }

/* Emblema de filtro ativo (lista de Ordens). Não é botão: é um aviso que carrega
   duas ações discretas — "editar" e ✕. A altura vem da barra, que era o único
   defeito da versão em style inline (26px ao lado de campos de 34). */
.filtro-ativo { display:inline-flex; align-items:center; gap:.5rem; height:var(--ctrl-h); padding:0 .75rem; background:var(--tint-blue); color:var(--accent-blue); border-radius:.5rem; font-size:.78rem; font-weight:600; }
.filtro-ativo-soft { background:var(--tint-blue-soft); }
.filtro-ativo i { font-size:.7rem; }
.filtro-ativo a { color:var(--accent-blue); text-decoration:none; font-size:.8rem; line-height:1; }
/* O "editar" pode ser <a> (leva a outra tela, na lista de Ordens) ou <button>
   (abre o painel ali mesmo, nos relatórios) — os dois têm de sair iguais. */
.filtro-ativo button { background:none; border:none; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; }
.filtro-ativo .editar { font-size:.75rem; opacity:.7; }
.filtro-ativo .editar:hover { opacity:1; text-decoration:underline; }

/* ── Paginação (padrão MoldurariaV2) ── */
.pagination { display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:10px 16px; border-top:1px solid var(--table-row-border); font-size:13px; }
.pagination a { color:var(--pagination-color); text-decoration:none; }
.pagination a:hover { color:var(--breadcrumb-current); }
.pagination .pg-cur { font-weight:500; color:var(--pagination-active); }
.pagination .pg-dis { color:var(--input-placeholder); cursor:default; }

/* ── Toggle ativo/inativo ── */
.act-toggle-on  { color:#16a34a; font-size:1.05rem; }
.act-toggle-on:hover  { color:#15803d; }
.act-toggle-off { color:#9ca3af; font-size:1.05rem; }
.act-toggle-off:hover { color:#6b7280; }

/* ── Colunas ordenáveis ──
   O cabeçalho é um link (ordenar é um GET, e o servidor é quem ordena), mas não
   deve PARECER link: herda a cor e o peso do <th> e ocupa a célula inteira, para
   a área de clique ser a mesma de antes, quando o <th> todo respondia.

   O `padding:0` no <th> é obrigatório, e não cosmético: o espaçamento passa para
   o link, e sem zerar aqui os dois se SOMAM — o cabeçalho vai de 36px para 57px
   e as colunas se redistribuem, porque a largura automática passa a contar o
   dobro de recheio. Foi o que aconteceu em 2026-08-10: um fecha-comentário
   sobrando encerrava o bloco cedo, e o navegador engolia esta regra inteira.
   (Cuidado ao editar: escrever a sequência de fechar comentário DENTRO de um
   comentário o encerra ali mesmo. Foi assim que o defeito nasceu.)

   Nada de `th:has(...)`: `:has()` só existe no Firefox 121+ e os PCs das lojas
   rodam versão bem mais antiga — a classe vem do macro de ordenacao.html. */
th.th-sort { padding:0; }
th.th-sort:hover { background:var(--nav-hover-bg); }
.th-ord { display:block; padding:.65rem 1rem; color:inherit; text-decoration:none; font:inherit; letter-spacing:inherit; text-transform:inherit; white-space:nowrap; }
.seta { color:#9ca3af; margin-left:.25rem; font-style:normal; display:inline-block; width:.7rem; text-align:center; }

/* ── Hints ── */
/* margin-left: o "?" vinha colado na última letra do rótulo, parecendo parte da
   palavra. Vale para as 4 telas que usam hint (configurações, estojos, ordens e
   permissões) — em todas o defeito era o mesmo. */
.hint-icon { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:.175rem; border-radius:50%; background:#d1d5db; color:#374151; font-size:10px; font-weight:700; cursor:help; position:relative; }
/* `max-width` + quebra: com `nowrap` puro um texto de duas frases virava uma
   linha só, saindo pela borda da tela. Texto curto continua numa linha. */
.hint-tooltip { display:none; position:absolute; left:20px; top:-4px; background:#1f2937; color:#fff; font-size:11px; line-height:1.45; padding:5px 9px; border-radius:4px; max-width:300px; width:max-content; z-index:50; font-weight:400; text-transform:none !important; letter-spacing:normal !important; }
.hint-icon:hover .hint-tooltip { display:block; }

/* Status centralizado: o badge é curto ("Novo") ou longo ("Impressão
   Fotográfica Entrada"), e alinhado à esquerda a diferença vira um vão só de
   um lado. Centralizado, a sobra se divide e a coluna fica equilibrada com
   qualquer nome. O badge NÃO é cortado — o nome do status precisa ser lido
   por inteiro. */
.data-table th[data-coluna="status"],
.data-table td[data-coluna="status"] { text-align:center; }

/* ── Larguras padrão de colunas (usar em <col> dentro de <colgroup>) ── */
/* Todas as tabelas de lista devem ter table-layout:fixed + width:100% */
col.col-auto   { /* ocupa o espaço restante — não definir width */ }
col.col-num    { width: 72px; }
col.col-badge  { width: 90px; }
col.col-cor    { width: 100px; }
col.col-codigo { width: 120px; }
col.col-prazo  { width: 130px; }
col.col-acoes  { width: 112px; }

/* ── Dropdown de usuário (topbar) ── */
.user-menu { position:relative; }
.user-menu-btn { background:none; border:none; cursor:pointer; color:rgba(255,255,255,.75); font-size:.8rem; display:flex; align-items:center; gap:.4rem; padding:.3rem .5rem; border-radius:.4rem; transition:background .15s; }
.user-menu-btn:hover { background:rgba(255,255,255,.1); color:#fff; }
.user-menu-dropdown { display:none; position:absolute; right:0; top:calc(100% + 6px); background:var(--card-bg); border:1px solid var(--card-border); border-radius:.6rem; box-shadow:0 8px 24px rgba(0,0,0,.15); min-width:180px; z-index:50; overflow:hidden; }
.user-menu-dropdown.open { display:block; }
.user-menu-item { display:flex; align-items:center; gap:.6rem; padding:.6rem 1rem; font-size:.825rem; color:var(--td-color); text-decoration:none; background:none; border:none; width:100%; text-align:left; cursor:pointer; transition:background .12s; }
.user-menu-item:hover { background:var(--nav-hover-bg); color:var(--nav-hover-color); }
.user-menu-item i { width:14px; text-align:center; opacity:.6; font-size:.8rem; }
.user-menu-sep { border:none; border-top:1px solid var(--card-border); margin:.2rem 0; }

/* ── Sidebar colapsável ── */
.sidebar { transition: width .2s ease, min-width .2s ease, padding .2s ease; overflow: hidden; }
html.sidebar-collapsed .sidebar { width: 0 !important; min-width: 0 !important; padding: 0 !important; border-right: none !important; }

/* ── Sidebar em overlay no celular/tablet (só abaixo do breakpoint — desktop inalterado) ── */
#sidebar-backdrop { display: none; }
@media (max-width: 900px) {
    .sidebar {
        position: fixed !important;
        top: 52px;
        left: 0;
        height: calc(100vh - 52px);
        z-index: 40;
        overflow-y: auto;
        box-shadow: 4px 0 16px rgba(0,0,0,.15);
    }
    html.sidebar-collapsed #sidebar-backdrop { display: none !important; }
    html:not(.sidebar-collapsed) #sidebar-backdrop {
        display: block;
        position: fixed;
        top: 52px; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,.35);
        z-index: 35;
    }
}

/* ── Seções colapsáveis da sidebar ── */
.nav-section-btn { display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; cursor:pointer; font-size:.65rem; font-weight:700; color:var(--nav-section-color); text-transform:uppercase; letter-spacing:.08em; padding:.25rem .75rem; margin-top:1rem; margin-bottom:.25rem; }
.nav-section-btn .nav-section-arrow { font-size:.6rem; transition:transform .2s; opacity:.6; }
.nav-section-btn.collapsed .nav-section-arrow { transform: rotate(-90deg); }
.nav-section-group { overflow:hidden; transition:max-height .2s ease; }
.nav-section-group.collapsed { max-height:0 !important; }

/* ── Alertas ── */
.alert { padding:.75rem 1rem; border-radius:.5rem; font-size:.875rem; margin-bottom:1.5rem; display:flex; align-items:center; gap:.5rem; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.alert-error   { background:var(--alert-error-bg);   border:1px solid var(--alert-error-border);   color:var(--alert-error-color); }
.alert-success { background:var(--alert-success-bg); border:1px solid var(--alert-success-border); color:var(--alert-success-color); }
.alert-warning { background:var(--alert-warning-bg); border:1px solid var(--alert-warning-border); color:var(--alert-warning-color); }
.alert-info    { background:var(--alert-info-bg);    border:1px solid var(--alert-info-border);    color:var(--alert-info-color); }

/* ── Dashboard responsivo (só abaixo dos breakpoints — desktop inalterado) ── */
@media (max-width: 900px) {
    #dash-kpis          { grid-template-columns: repeat(3, 1fr) !important; }
    #dash-kpis > a      { min-width: 0 !important; }
    #dash-row-graf       { grid-template-columns: 1fr !important; }
    #dash-row-atrasadas  { grid-template-columns: 1fr !important; }
    #dash-col-graf, #dash-col-efic, #dash-col-atrasadas, #dash-col-vencendo { min-width: 0 !important; }
}
@media (max-width: 600px) {
    #dash-kpis           { grid-template-columns: repeat(2, 1fr) !important; }
    #dash-kpis > a       { min-width: 0 !important; display: flex !important; }
    #dash-kpis .card-body{ padding: 1rem !important; width: 100% !important; min-height: 128px !important; }
    #dash-barras         { min-width: 0 !important; }
    .dash-desempenho-item{ grid-template-columns: 90px 1fr 34px !important; gap:.5rem !important; }
    .dash-table-card     { overflow-x: auto; max-width: 100%; }
}

/* ── Topbar responsiva (só abaixo do breakpoint — desktop inalterado) ── */
@media (max-width: 600px) {
    #topbar-logo { height: 28px !important; width: auto !important; max-width: 40vw; object-fit: contain; }
}

/* ── Tabelas de lista responsivas (só abaixo do breakpoint — desktop inalterado) ──
   Escopado só nos cards que envolvem diretamente uma .data-table, para não afetar
   outros cards (dropdowns, modais etc.) que dependem de overflow visível. */
@media (max-width: 600px) {
    .card:has(> table.data-table) { overflow-x: auto; }
    table.data-table { table-layout: auto !important; min-width: 100%; }
    .data-table th, .data-table td { padding: .45rem .5rem !important; }
    .data-table th { font-size: .62rem !important; }
    .data-table td { font-size: .75rem !important; }
}

/* Alinha os campos de um grupo pela base: quando os rótulos têm alturas
   diferentes (ex.: "Duração da sessão" em 1 linha vs "Bloqueio por inatividade"
   em 2), os inputs abaixo ficariam em alturas diferentes. Com a célula em
   coluna e o controle empurrado para baixo (margin-top:auto), todos os inputs
   da mesma linha se alinham. */
.config-grupo-grid > div { display: flex; flex-direction: column; }
.config-grupo-grid > div > .form-input { margin-top: auto; }

/* ── Configurações responsiva (só abaixo do breakpoint — desktop inalterado) ──
   column-count:2 e os grids internos repeat(N,1fr) não encolhem sozinhos em
   telas estreitas (o "mural" mantém 2 colunas e os grupos de N campos ficam
   espremidos, cortando texto como "Misto"/"Gráfico"). */
@media (max-width: 900px) {
    #config-secoes { column-count: 1 !important; max-width: 100% !important; }
    .config-grupo-grid { grid-template-columns: 1fr !important; }
}

/* ── Botão "Mostrar mais" (linha discreta, sem parecer botão primário) ── */
.btn-link-mais {
    display: block;
    background: none;
    border: none;
    padding: 0;
    font-size: .75rem;
    font-weight: 600;
    color: var(--accent-blue);
    cursor: pointer;
}
.btn-link-mais:hover { text-decoration: underline; }

/* ── Blocos de estilo repetidos entre dashboard/relatórios/manutenção/form
   (extraídos de style="" inline idêntico em 3+ lugares — puramente
   organizacional, sem mudança visual) ── */
.kpi-label { font-size:.65rem; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; margin:0 0 .4rem; }
.kpi-sub   { font-size:.7rem; color:var(--text-faint); margin:.3rem 0 0; }
.section-title { font-size:.7rem; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.75rem; }
.section-title-relatorio { font-size:.65rem; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em; margin:0 0 .875rem; }
.text-muted-sm { color:var(--text-muted); font-size:.8rem; }
.card-pad { padding:1.25rem 1.5rem; }
.card-title-manutencao { font-size:.95rem; font-weight:600; margin:0 0 .5rem; color:var(--page-title-color); }
.card-desc-manutencao { font-size:.8rem; color:var(--text-muted); margin:0 0 1rem; }
.tabela-manutencao-base { width:100%; border-collapse:collapse; font-size:.8rem; }
.th-manutencao { font-size:.7rem; color:var(--text-muted); text-transform:uppercase; }
.section-title-form { font-size:.7rem; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.875rem; padding-bottom:.5rem; border-bottom:1px solid var(--divider); }
.icone-titulo-card { margin-right:.4rem; color:var(--text-muted); }

/* ── Contador do sino de notificações, pulsando quando há não lida ──
   Era uma bolinha lisa de 8px; passou a mostrar o número de não lidas, então o
   `scale` desceu de 1.15 para 1.06: no badge maior, com texto dentro, a escala
   antiga fazia o número tremer e ficar ilegível. */
@keyframes notifPulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(226,75,74,.55); }
    70%  { transform: scale(1.06); box-shadow: 0 0 0 5px rgba(226,75,74,0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(226,75,74,0); }
}
#notifBolinha.notif-pulse { animation: notifPulse 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
    #notifBolinha.notif-pulse { animation: none; }
}

/* ── .hidden ───────────────────────────────────────────────────────────────
   SEM USO desde 2026-08-04 (conferido em 2026-08-10: nenhum template, JS ou
   CSS a referencia). Era a única classe herdada do tailwind.min.css, usada pela
   busca client-side que saiu em 2026-08-04 por não servir a tela nenhuma.
   Fica por precaução, e não por necessidade: são 20 bytes, e removê-la faria
   qualquer uso esquecido aparecer sem estilo, sem erro nenhum. Os testes que a
   davam como essencial saíram. */
.hidden { display: none; }

/* Busca avançada — as quatro grades de filtro.
   São três colunas na tela larga e continuam sendo: o corte é por media query,
   e não por `auto-fit`, justamente para o número NÃO crescer sozinho num
   monitor grande (com minmax(260px) medido, um 1920 viraria cinco colunas).
   O primeiro corte é em 1100px, e não nos 900px que o resto do sistema usa,
   porque o gargalo aqui é o par de datas: dois campos `type=date` mais o "até"
   têm largura mínima própria e, abaixo disso, saíam para FORA do card em vez de
   encolher — medido, 305px de vazamento numa janela de 940px. */
@media (max-width: 1100px) {
    .busca-grid { grid-template-columns: 1fr 1fr !important; }
}

/* Datas e Valor quebrou pra "tudo numa linha só" em 2026-08-24 (operador +
   duas datas + "até" do mesmo campo, lado a lado) — cada coluna ficou bem mais
   larga que antes, quando datas e "até" dividiam duas linhas. Medido: com o
   card ainda em 3 colunas, a Data de Fechamento já vaza pra fora da janela a
   partir de ~1550px, e só volta a caber garantido perto de 1650px — bem acima
   do corte de 1100px que serve as outras três grades da busca avançada (essas
   não têm par de datas em toda coluna, não precisam do mesmo respiro).
   ⚠️ Fica ANTES do corte de 700px abaixo: as duas regras miram o mesmo
   elemento (a div tem as duas classes), e a de 1 coluna precisa vencer em
   telas de celular — em CSS, quem vem depois no arquivo ganha o empate. */
@media (max-width: 1650px) {
    .busca-grid-datas { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 700px) {
    .busca-grid { grid-template-columns: 1fr !important; }
}

/* Card que abriga uma tabela larga demais para a janela.
   ⚠️ Não mexe em LARGURA DE COLUNA — de propósito. A tabela de Ordens usa
   largura automática, cada coluna do tamanho do seu conteúdo, e largura fixa já
   foi tentada e desfeita aqui (Status reservava espaço para o nome mais longo e
   ficava com um vão enorme; o Valor quebrava em duas linhas). O que estava
   errado não era a largura e sim o transbordo: com `overflow-x: visible`, a
   tabela de 1552px era PINTADA para fora do card e as últimas colunas ficavam
   cortadas pela borda da janela, sem barra de rolagem para alcançá-las —
   medido, 435px para fora já numa janela de 1400px.
   Agora ela rola dentro do próprio card, e as colunas continuam do tamanho que
   sempre tiveram. */
.tabela-rolavel { overflow-x: auto; }