:root {
    /* Escala única de cantos arredondados -- reaproveitada em cartões,
       botões, campos, badges etc. pra tudo ter o mesmo "toque" visual em
       vez de cada componente inventar seu próprio raio. */
    --raio-sm: 7px;
    --raio-md: 11px;
    --raio-lg: 16px;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { color: var(--cor-texto); }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 18px; }

/* Barra de rolagem fina e discreta (Chrome/Edge/Firefox) em vez da barra
   "grossa" e quadrada padrão do sistema operacional, que era o que mais
   pesava a sensação de programa antigo -- vale pra qualquer área com
   rolagem própria: conteúdo, barra lateral, tabelas, listas de resultado. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(100,116,139,.45) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background-color: rgba(100,116,139,.45);
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(100,116,139,.7); }
*::-webkit-scrollbar-corner { background: transparent; }

/* Casco do app: cabeçalho, barra lateral e rodapé ficam travados nas bordas
   da tela (a altura de tudo somado é sempre exatamente a da janela) e só o
   miolo (.app-conteudo) rola por dentro de si mesmo -- cabeçalho, barra e
   rodapé nunca "andam" separado um do outro ao rolar. "100dvh" (com "100vh"
   de reserva pra navegador antigo) ajusta sozinho quando a barra de
   endereço do celular aparece/some. */
.app-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* Header */
.app-header {
    flex: 0 0 60px;
    height: 60px;
    background: var(--cor-primaria);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 16px;
    position: relative;
    z-index: 20;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.app-header-title { display: flex; flex-direction: column; margin-right: auto; line-height: 1.3; min-width: 0; }
.app-header-title strong { font-size: 15.5px; font-weight: 600; letter-spacing: .01em; }
.app-header-subtitle { font-size: 12px; opacity: .8; }
.app-header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
/* Sinalizador discreto de status de conexão (verde = online, vermelho =
   sem rede) -- só reflete o que o navegador enxerga (Wi-Fi/dados), não faz
   ping no servidor. */
.indicador-conexao {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: #fff; opacity: .8; white-space: nowrap;
    flex: 0 0 auto;
}
.indicador-conexao-ponto {
    width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
    background: #4ade80;
    box-shadow: 0 0 0 2px rgba(255,255,255,.2);
}
.indicador-conexao-offline .indicador-conexao-ponto { background: #f87171; }
.indicador-conexao-expirada .indicador-conexao-ponto { background: #fbbf24; }
/* Selo "você só vê os dados de X" no cabeçalho -- só aparece pra quem tem
   restrição de órgão (ver includes/header.php). Mesma linha de rodapé
   discreto do indicador de conexão ao lado (pill com fundo translúcido
   sobre a cor do cabeçalho), sem chamar mais atenção que isso -- é uma
   informação de contexto, não um alerta. */
.chip-orgao-usuario {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(255,255,255,.14);
    color: #fff; font-size: 12px; white-space: nowrap;
    flex: 0 0 auto;
}
.chip-orgao-usuario .icone-svg-sm { flex: 0 0 14px; width: 14px; height: 14px; opacity: .9; }
.chip-orgao-usuario-texto { white-space: nowrap; }
.btn-icon {
    background: transparent; border: none; color: #fff;
    font-size: 18px; cursor: pointer;
    width: 36px; height: 36px; border-radius: var(--raio-sm);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .15s ease;
}
.btn-icon:hover { background: rgba(255,255,255,.16); }
.btn-link { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.menu-usuario { position: relative; }
.chip-usuario {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 10px 5px 5px; border-radius: 999px;
    color: #fff; text-decoration: none;
    background: transparent; border: none; font: inherit; cursor: pointer;
    transition: background-color .15s ease;
}
.chip-usuario:hover, .chip-usuario[aria-expanded="true"] { background: rgba(255,255,255,.16); }
.avatar-circulo {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
    flex: 0 0 30px;
}
.avatar-iniciais {
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.22); color: #fff;
    font-size: 12.5px; font-weight: 700;
}
.chip-usuario-nome { font-size: 13.5px; font-weight: 500; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-usuario-seta { font-size: 10px; opacity: .85; }
.dropdown-usuario {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
    min-width: 180px;
    background: var(--cor-cartao);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    box-shadow: 0 10px 28px rgba(16,24,40,.16);
    padding: 6px;
}
.dropdown-usuario a {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px; border-radius: var(--raio-sm);
    color: var(--cor-texto); text-decoration: none; font-size: 14px;
    transition: background-color .15s ease;
}
.dropdown-usuario a:hover { background: var(--cor-fundo-sutil); }

/* Body: sidebar + conteúdo, dividindo o espaço entre cabeçalho e rodapé.
   min-height:0 é o que permite essa faixa (e o conteúdo rolável dentro
   dela) encolher corretamente dentro do casco de altura fixa acima, em vez
   de estourar e voltar a rolar a página inteira. */
.app-body { display: flex; flex: 1 1 auto; min-height: 0; }
.app-sidebar {
    flex: 0 0 220px;
    width: 220px;
    background: var(--cor-sidebar-fundo);
    color: var(--cor-sidebar-texto);
    transition: flex-basis .2s ease, width .2s ease;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid rgba(0,0,0,.15);
    /* Rolagem clara -- a barra lateral tem fundo escuro em todos os temas,
       então a versão cinza-neutra definida acima ficaria quase invisível. */
    scrollbar-color: rgba(255,255,255,.28) transparent;
}
.app-sidebar::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.28); }
.app-sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.45); }
.app-sidebar.recolhida { flex-basis: 60px; width: 60px; }

.sidebar-menu { display: flex; flex-direction: column; height: 100%; padding: 14px 10px; gap: 2px; }
.sidebar-menu a {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: var(--raio-sm);
    color: var(--cor-sidebar-texto);
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
    transition: background-color .15s ease, color .15s ease;
}
.sidebar-menu .icone { font-size: 16px; width: 20px; flex-shrink: 0; text-align: center; }
/* Ícones do menu lateral, cabeçalho e dropdown do usuário: SVG embutido
   (ver sprite em includes/header.php), não mais emoji -- "currentColor"
   faz o traço herdar a cor de quem envolve (inclusive no hover/".ativo"
   do próprio menu, e nos 9 temas + escuro), sem precisar de uma versão
   colorida por tema. */
.icone-svg-menu {
    width: 18px; height: 18px; display: inline-block; vertical-align: -4px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
/* Mesma técnica (SVG + currentColor), só que menor -- pros marcadores
   inline de resultado (✓/⚠/✕ do Recadastro e da Conferência) e outras
   menções pequenas de ícone dentro de texto corrido. */
.icone-svg-sm {
    width: 14px; height: 14px; display: inline-block; vertical-align: -2px;
    fill: none; stroke: currentColor; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
}
.sidebar-menu a:hover { background: rgba(255,255,255,.08); }
.sidebar-menu a.ativo {
    background: rgba(255,255,255,.15);
    color: #fff;
    font-weight: 600;
}
.app-sidebar.recolhida .texto { display: none; }
.app-sidebar.recolhida .sidebar-menu a { justify-content: center; padding: 10px 8px; }
.app-sidebar.recolhida .sidebar-menu .icone { width: auto; }

/* Títulos de seção (ex: "Patrimônio", "Administração") que agrupam os itens
   afins do menu -- só aparece a seção que tiver pelo menos um item visível
   pro grupo do usuário logado (ver includes/sidebar.php). São botões
   clicáveis que dobram/desdobram os itens logo abaixo -- começam fechadas,
   exceto a seção onde está a página atual. */
.sidebar-secao-titulo {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    background: none; border: none; cursor: pointer; font-family: inherit;
    padding: 16px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
    border-radius: var(--raio-sm);
    transition: color .15s ease;
}
.sidebar-secao-titulo:hover { color: rgba(255,255,255,0.85); }
.sidebar-secao-titulo:first-of-type { padding-top: 6px; }
.sidebar-secao-titulo .seta-secao {
    font-size: 10px; transition: transform .15s ease; flex-shrink: 0;
}
.sidebar-secao-titulo[aria-expanded="true"] .seta-secao { transform: rotate(180deg); }
.sidebar-secao-itens { display: flex; flex-direction: column; gap: 2px; }
.app-sidebar.recolhida .sidebar-secao-titulo { display: none; }
/* Sidebar recolhida (só ícones): as seções perdem o título clicável, então
   os itens delas precisam ficar sempre visíveis -- senão não haveria como
   abrir uma seção fechada nesse modo. */
.app-sidebar.recolhida .sidebar-secao-itens { display: flex !important; }

/* "Sair" fica fixo embaixo do menu, separado dos demais itens */
.sidebar-menu a.sidebar-sair {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.12);
    border-radius: 0 0 var(--raio-sm) var(--raio-sm);
    padding-top: 14px;
}
.sidebar-menu a.sidebar-sair:hover {
    background: rgba(168,39,30,0.35);
    color: #fca5a5;
}

/* min-width:0 é o pulo do gato do flexbox aqui -- sem isso, um item flex
   nunca encolhe além do conteúdo "mais largo" que tiver dentro (ex: uma
   tabela com muita coluna), e essa largura mínima empurra/estoura o layout
   pra fora da área dele. overflow-y:auto é o que faz o conteúdo ser a ÚNICA
   parte da tela que rola -- cabeçalho, barra lateral e rodapé ficam parados. */
.app-conteudo {
    flex: 1 1 auto;
    min-width: 0;
    padding: 26px 28px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Footer */
.app-footer {
    flex: 0 0 auto;
    padding: 12px 18px;
    font-size: 13px;
    color: var(--cor-texto-suave);
    background: var(--cor-cartao);
    border-top: 1px solid var(--cor-borda);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.app-footer-usuario {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Componentes gerais */
.card {
    background: var(--cor-cartao);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    padding: 22px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
    margin-bottom: 20px;
}
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.stat-card { text-align: center; }
.stat-card .valor { font-size: 28px; font-weight: 700; color: var(--cor-primaria); letter-spacing: -.01em; }
.stat-card .label { color: var(--cor-texto-suave); font-size: 13.5px; }
.stat-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.stat-card-link:hover {
    box-shadow: 0 8px 20px rgba(16,24,40,.1);
    transform: translateY(-2px);
    border-color: rgba(var(--cor-primaria-rgb), .35);
}
/* -- Dashboard "premium" -----------------------------------------------
   Cabeçalho de saudação, seções com moldura + barra de destaque no topo
   (cor do tema ativo, exceto Alertas que é sempre laranja/âmbar), e cards
   de número com selo de ícone colorido (--acento/--acento-fundo, custom
   properties definidas por card via style="" em index.php -- sem isso,
   cai no acento padrão = cor primária do tema ativo). */
.dashboard-cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 22px;
}
.dashboard-cabecalho h1 { margin-bottom: 5px; }
.dashboard-subtitulo { margin: 0; color: var(--cor-texto-suave); font-size: 14px; }
.dashboard-atualizacao {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--cor-texto-suave);
    background: var(--cor-fundo-sutil);
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    padding: 7px 14px 7px 11px;
    white-space: nowrap;
}
.dashboard-atualizacao .ponto {
    width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}

.dashboard-secao {
    background: var(--cor-cartao);
    border: 1px solid var(--cor-borda);
    /* Linha de destaque no topo bem discreta -- mesma cor do tema, mas
       "lavada" (baixa opacidade) pra combinar com a borda fina do resto do
       cartão, em vez de destoar como uma faixa cheia. */
    border-top: 2px solid rgba(var(--cor-primaria-rgb), .45);
    border-radius: var(--raio-md);
    padding: 20px 20px 22px;
    margin-bottom: 22px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
}
.dashboard-secao .grid-cards {
    margin-bottom: 0;
}
.dashboard-secao .grid-cards .card {
    box-shadow: none;
}
.dashboard-secao-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cor-texto-suave);
    margin: 0 0 16px;
}
.dashboard-secao-titulo .icone-svg-menu { width: 15px; height: 15px; color: var(--cor-primaria); }

/* Cards de número com selo de ícone -- variante de .stat-card usada só no
   Dashboard; as outras telas que reaproveitam .stat-card (ex: relatório de
   conferência) continuam com o layout centralizado de sempre. */
.dashboard-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 16px 18px;
}
.dashboard-stat .stat-icone {
    width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: var(--raio-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--acento-fundo, rgba(var(--cor-primaria-rgb), .12));
    color: var(--acento, var(--cor-primaria));
}
.dashboard-stat .stat-icone .icone-svg-menu { width: 21px; height: 21px; }
.dashboard-stat .stat-corpo { min-width: 0; }
.dashboard-stat .valor { font-size: 23px; line-height: 1.2; }
.dashboard-stat .label { margin-top: 1px; }

.dashboard-secao-alertas { border-top-color: rgba(217,105,31,.45); }
.dashboard-secao-alertas .dashboard-secao-titulo .icone-svg-menu { color: #d9691f; }
.alerta-grupo {
    background: var(--cor-fundo-sutil);
    border-radius: var(--raio-sm);
    padding: 12px 14px;
    margin-top: 10px;
}
.alerta-grupo:first-child { margin-top: 0; }
.alerta-grupo-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13.5px;
    margin: 0 0 6px;
}
.alerta-grupo-contagem {
    flex: 0 0 auto;
    background: rgba(217,105,31,.15);
    color: #a34e17;
    font-size: 11.5px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
}
.alerta-grupo ul { margin: 0; padding-left: 18px; font-size: 13px; }
.alerta-grupo li { margin-bottom: 3px; }
.alerta-grupo li:last-child { margin-bottom: 0; }

/* display:block + overflow-x:auto faz a tabela ganhar rolagem própria
   quando tem coluna demais para a largura disponível, em vez de estourar
   a página inteira (o que também empurrava a barra lateral). Antes isso só
   valia no celular -- agora vale sempre, já que o problema também aparece
   no PC quando a tabela cresce (ex: Patrimônios com bastante coluna). */
table { width: 100%; max-width: 100%; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; background: var(--cor-cartao); }
table th, table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--cor-borda);
    text-align: left;
    font-size: 13.5px;
}
table th {
    background: var(--cor-fundo-sutil);
    color: var(--cor-texto-suave);
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
table tbody tr { transition: background-color .12s ease; }
table tbody tr:hover { background: var(--cor-fundo-sutil); }

/* Cabeçalho de coluna clicável (ordenação): parece texto normal do
   cabeçalho, não um link azul sublinhado -- a setinha ao lado (▲/▼ quando
   é a coluna ativa, ⇅ apagada nas demais) já indica que dá pra clicar. */
.link-ordenacao { color: inherit; text-decoration: none; white-space: nowrap; }
.link-ordenacao:hover { text-decoration: underline; }
.seta-ordenacao { font-size: 11px; }
.seta-ordenacao-inativa { color: #c1c7d0; }

/* A rolagem horizontal acima (table { overflow-x:auto }) resolve a tabela
   como um todo, mas deixava a 1ª coluna (o "Nome", a informação mais
   importante da linha) livre pra crescer sem limite -- então um nome
   comprido simplesmente ficava fora da parte visível, escondido atrás da
   rolagem, em vez de aparecer inteiro. Em vez de travar num tamanho fixo
   (que sobra em tela grande e ainda pode faltar em tela pequena), ela pede
   uma fatia proporcional da tabela (width em %) -- acompanha o espaço
   disponível na tela, com um mínimo garantido, e quebra linha só se mesmo
   assim não couber, em vez de sumir atrás da rolagem. */
table td:first-child {
    width: 30%;
    min-width: 220px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.btn {
    display: inline-block;
    padding: 9px 18px;
    border-radius: var(--raio-sm);
    border: none;
    background: var(--cor-primaria);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16,24,40,.08);
    transition: background-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.btn:hover { background: var(--cor-primaria-escura); box-shadow: 0 3px 8px rgba(16,24,40,.14); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(16,24,40,.08); }

.form-grupo { margin-bottom: 14px; }
.form-grupo label { display: block; margin-bottom: 5px; font-size: 13.5px; font-weight: 600; }
.form-grupo input, .form-grupo select, .form-grupo textarea {
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    font-size: 14px;
    background: var(--cor-cartao);
    color: var(--cor-texto);
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* Campo travado (ex: Número de Tombamento na edição -- ver
   modules/patrimonios/editar.php): visual neutro de "não dá pra mexer
   aqui", sem parecer desabilitado/cinza-fantasma demais (o valor ainda
   precisa ser bem legível, é um dado importante). */
.form-grupo input[readonly] {
    background: var(--cor-fundo-sutil); color: var(--cor-texto-suave);
    cursor: not-allowed;
}
.form-grupo input:focus, .form-grupo select:focus, .form-grupo textarea:focus,
.input-busca-select:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(var(--cor-primaria-rgb), .16);
}
.dica-arquivo {
    display: block; margin-top: 5px; font-size: 12px; color: var(--cor-texto-suave);
}

/* Banner de dica de recurso (".dica-recurso[data-dica]", ver
   inicializarDicasRecurso() em main.js) -- cartão de largura total,
   pensado pra avisar sobre um recurso que vale a pena o usuário conhecer
   (ex: busca por palavras + departamento/salas em Patrimônios e
   Relatórios). Mesma linguagem visual do .alerta-formulario abaixo
   (cartão com ícone + borda de destaque + entrada suave), só que na cor
   primária do tema ativo em vez da cor de erro -- fica claramente "uma
   dica", não um aviso de problema. Usa var(--cor-primaria)/
   var(--cor-primaria-rgb) em vez de cor fixa pra já nascer correto em
   qualquer tema (inclusive o escuro). */
.dica-recurso[hidden] { display: none; }
.dica-recurso {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; margin-bottom: 16px;
    background: rgba(var(--cor-primaria-rgb), .08);
    border: 1px solid rgba(var(--cor-primaria-rgb), .25);
    border-left: 4px solid var(--cor-primaria);
    border-radius: var(--raio-sm);
    animation: alertaFormularioEntrada .22s ease;
}
.dica-recurso .icone-svg-menu { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; color: var(--cor-primaria); }
.dica-recurso-corpo { flex: 1; min-width: 0; }
.dica-recurso-titulo { font-weight: 700; font-size: 14px; margin: 0 0 3px; color: var(--cor-texto); }
.dica-recurso-texto { margin: 0; font-size: 13.5px; color: var(--cor-texto-suave); line-height: 1.5; }
/* Ação PERMANENTE, separada de propósito do "x" (ver
   dica-recurso-fechar logo abaixo): o "x" só esconde por agora (some
   dessa vez, sem gravar nada -- volta a aparecer normalmente da próxima
   vez que a tela carregar); este link é a única coisa que grava a
   escolha de "não mostrar mais" no navegador. Fica dentro do texto da
   dica, como um link discreto, não como botão -- pra ser uma decisão
   deliberada de quem lê, não um clique de reflexo. */
.dica-recurso-permanente {
    display: inline-block; margin-top: 8px; padding: 0; background: none; border: none;
    font-size: 12.5px; color: var(--cor-texto-suave); text-decoration: underline; cursor: pointer;
}
.dica-recurso-permanente:hover { color: var(--cor-primaria); }
.dica-recurso-fechar {
    flex: 0 0 auto; background: none; border: none; cursor: pointer;
    color: var(--cor-texto-suave); font-size: 20px; line-height: 1; padding: 2px 6px;
    border-radius: var(--raio-sm);
}
.dica-recurso-fechar:hover { background: rgba(var(--cor-primaria-rgb), .14); color: var(--cor-texto); }

/* Alerta de erro de formulário (ver includes/alerta_formulario.php) --
   substitui o antigo <p style="color:#a8271e;"> cru usado em todo o
   sistema por um cartão com ícone, borda de destaque e leve animação de
   entrada. Mesma cor de "erro/perigo" já usada em badges como
   .badge-inativo/.badge-baixado (fundo #fee2e2, texto #a8271e), só que
   como cartão em vez de pílula -- fica reconhecível como "a mesma
   linguagem de erro do sistema", não um componente novo e solto. */
.alerta-formulario {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; margin-bottom: 16px;
    background: #fee2e2; border: 1px solid #f3b4b0; border-left: 4px solid #a8271e;
    border-radius: var(--raio-sm);
    color: #a8271e; font-size: 14px; line-height: 1.45; font-weight: 500;
    animation: alertaFormularioEntrada .22s ease;
}
.alerta-formulario .icone-svg-sm { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
@keyframes alertaFormularioEntrada {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Campo apontado pelo erro (ver inicializarAlertaFormulario() em
   assets/js/main.js): fica com borda vermelha até a pessoa começar a
   corrigi-lo. !important porque precisa vencer a borda/sombra de foco
   normal do campo (regra logo acima) enquanto ele ainda não foi
   corrigido -- é um estado de erro, não um estilo de escolha. */
.campo-invalido,
.campo-invalido:focus {
    border-color: #a8271e !important;
    box-shadow: 0 0 0 3px rgba(168,39,30,.16) !important;
}

/* Grade responsiva para telas de cadastro/edição: distribui os campos
   lado a lado em vez de empilhar tudo numa coluna só. Campos que precisam
   da largura toda (textarea de descrição, avisos, etc.) usam
   .campo-largura-total. grid-auto-flow:dense evita buracos quando um
   campo de largura total "quebra" a grade no meio de uma linha. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    column-gap: 24px;
    grid-auto-flow: dense;
}
.campo-largura-total { grid-column: 1 / -1; }
/* Metade da largura total -- ocupa 2 das colunas da grade em vez de todas.
   Com o mínimo padrão de 220px por coluna (repeat(auto-fit, minmax(220px,
   1fr))), fica visualmente perto da metade da linha nas larguras de tela
   em que o formulário normalmente é usado (2-4 colunas). Usado no campo
   Número de Tombamento -- maior que uma coluna só (número cresce), mas sem
   precisar da linha inteira como Descrição/Localização. */
.campo-largura-metade { grid-column: span 2; }

/* Par de campos numa linha própria só entre os dois, com cada um ocupando
   bem mais espaço que uma coluna comum de .form-grid (ex: Fonte de
   Recurso + Centro de Custo no cadastro de Patrimônio, cujo texto das
   opções ficava cortado dividindo espaço com 3-4 outros campos). Usar
   sempre junto com .campo-largura-total no mesmo elemento (reserva a linha
   inteira na grade de fora, imune ao "roubo" de buracos do
   grid-auto-flow:dense de .form-grid -- ver comentário lá em cima), com os
   dois .form-grupo do par como filhos diretos. Mesma técnica de
   auto-fit/minmax de .form-grid (sem o "dense", que aqui não faz falta:
   com só 2 filhos não há buraco pra disputar) -- empilha sozinho em 1
   coluna numa tela estreita, sem precisar de media query própria. */
.subgrid-duas-colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    column-gap: 24px;
}

/* Mesma técnica de .subgrid-duas-colunas acima, com um mínimo de coluna
   menor (150px em vez de 220px) -- pensado pra campos curtos (ex:
   Matrícula/Telefone/CPF em Responsáveis), que não precisam de 220px pra
   não cortar texto. Também não precisa de .campo-largura-total: usado hoje
   só dentro de formulários de uma coluna só (sem .form-grid por fora),
   diferente de .subgrid-duas-colunas. */
.subgrid-tres-colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    column-gap: 24px;
}

/* Número de Tombamento em destaque -- é o identificador físico do bem,
   colado na etiqueta, então vale ficar mais fácil de bater o olho e
   conferir do que um campo de texto comum. */
.campo-tombamento-destaque { font-weight: 700; font-size: 16px; letter-spacing: .02em; }

/* "Cadastro rápido" -- botão "+" ao lado de um campo busca-select (ex:
   Fornecedor no cadastro de Patrimônio) que abre um modal pra cadastrar,
   na hora, o item que faltar na lista, sem sair do formulário em que a
   pessoa está. Envolve o <select class="busca-select"> (que
   tornarBuscavel(), em main.js, transforma em <select> escondido + campo
   de busca visível logo depois, dentro deste mesmo wrapper -- ver
   tornarBuscavel()) e o botão lado a lado. */
.grupo-campo-com-botao { display: flex; gap: 8px; align-items: center; }
.grupo-campo-com-botao > select,
.grupo-campo-com-botao > input,
.grupo-campo-com-botao > .input-busca-select { flex: 1; min-width: 0; }
.btn-cadastro-rapido {
    flex-shrink: 0; width: 40px; height: 40px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
    background: var(--cor-cartao); color: var(--cor-primaria);
    font-size: 20px; line-height: 1; cursor: pointer;
}
.btn-cadastro-rapido:hover { background: rgba(var(--cor-primaria-rgb), .08); border-color: var(--cor-primaria); }

/* Variante com coluna mínima maior -- usada em formulários com poucos
   campos mas de rótulo longo (ex: "Número do Boletim de Ocorrência" + o
   ícone de ajuda "?" ao lado). Com o mínimo padrão de 220px o rótulo mais
   longo quebra linha bem no ícone; 260px dá espaço suficiente pra caber
   inteiro numa linha só, mantendo o mesmo comportamento responsivo (menos
   colunas -- até 1 -- em telas estreitas, sem gerar rolagem horizontal). */
.form-grid-largo { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Barra de filtros (lista de Patrimônios): campos lado a lado numa linha só,
   com largura proporcional ao que cada um costuma precisar -- os que são
   caixa de busca por nome (Categoria/Localização/Tipo) ficam maiores, os
   que são lista curta e fixa (Status/Estado) ficam menores, e o grupo de
   botões some pro fim da linha. Tudo alinhado pela base (embaixo do label). */
.barra-filtros {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px;
    margin-bottom: 8px;
}
.barra-filtros .form-grupo { margin-bottom: 0; }
.campo-filtro-lg { flex: 2 1 190px; }
/* Localização mostra "Departamento — Sala" (texto mais longo que os outros
   filtros), por isso ganha mais espaço/prioridade que os campo-filtro-lg. */
.campo-filtro-xl { flex: 3 1 260px; }
.campo-filtro-sm { flex: 1 1 150px; }
.campo-filtro-botoes { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; }
.campo-filtro-botoes label { visibility: hidden; }

/* Ícone de ajuda (?) ao lado dos campos: passa o mouse (desktop) ou toca
   (celular) pra ver pra que serve o campo. */
.ajuda-campo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--cor-fundo-sutil); color: var(--cor-texto-suave); font-size: 11px; font-weight: 700;
    border: 1px solid var(--cor-borda);
    cursor: help; margin-left: 6px; position: relative; vertical-align: middle;
    user-select: none;
}
/* A dica em si NÃO é mais um ::after posicionado em "absolute" dentro do
   ícone (era assim antes) -- um elemento em position:absolute é cortado
   por QUALQUER ancestral com overflow diferente de "visible", e os campos
   de formulário ficam dentro de .modal-formulario-conteudo, que tem
   overflow-y:auto pra permitir rolagem (ver acima) -- então a dica de
   campos perto da borda direita ou do rodapé do modal ficava cortada ou
   totalmente escondida. Corrigido movendo a dica pra um elemento único
   (#ajudaCampoTooltip, criado 1x por inicializarAjudaCampo() em main.js e
   anexado direto no <body>) em position:fixed, posicionado por JS a partir
   da posição real do ícone na tela -- "escapa" do recorte do modal porque
   não é mais descendente dele. Ver #ajudaCampoTooltip logo abaixo. */
#ajudaCampoTooltip {
    position: fixed; z-index: 600;
    background: #111827; color: #fff; font-weight: 400; text-transform: none;
    font-size: 12px; line-height: 1.4; padding: 8px 10px; border-radius: var(--raio-sm);
    width: max-content; max-width: min(240px, 78vw);
    box-shadow: 0 8px 20px rgba(0,0,0,.22);
    white-space: normal; pointer-events: none;
    display: none;
}
#ajudaCampoTooltip.ajuda-tooltip-visivel { display: block; }

/* Módulo de Recadastro */
.lista-resultados { margin-top: 8px; max-height: 320px; overflow-y: auto; border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); background: var(--cor-cartao); }
.lista-resultados:empty { border: none; }
/* Variante "flutuante" (ver tornarBuscavel() em assets/js/main.js, usada em
   todo campo ".busca-select" do sistema -- filtros, cadastro/edição etc.):
   sai do fluxo normal do documento e flutua por cima do que vem depois,
   em vez de empurrar pra baixo o resto da linha/formulário enquanto a
   lista de sugestões está aberta. */
.lista-resultados-flutuante {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    box-shadow: 0 10px 28px rgba(16,24,40,.16);
}
.lista-resultados-vazio { padding: 12px; color: var(--cor-texto-suave); font-size: 14px; }
.item-resultado {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-bottom: 1px solid var(--cor-borda);
    cursor: pointer;
    transition: background-color .12s ease;
}
.item-resultado:last-child { border-bottom: none; }
.item-resultado:hover { background: var(--cor-fundo-sutil); }
.item-resultado img, .item-resultado .foto-placeholder {
    width: 44px; height: 44px; border-radius: var(--raio-sm); object-fit: cover;
    background: var(--cor-fundo-sutil); display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.item-resultado-desc { font-size: 12px; color: var(--cor-texto-suave); }

/* Combo de múltipla escolha com "chips" (ver tornarMultiBuscavel() em
   assets/js/main.js) -- usado no campo "Restringir a órgãos específicos"
   de Usuários (cadastrar/editar), pensado pra escalar bem quando a lista
   de órgãos cresce (busca por nome em vez de rolar uma grade de
   checkboxes). O <div class="multi-busca-orgaos"> com os <input
   type="checkbox" name="orgaos_ids[]"> continua sendo a fonte real dos
   dados do formulário -- é só escondido via JS depois de "aprimorado",
   então sem JavaScript o formulário ainda funciona (grade de checkboxes
   normal, mesmo HTML de sempre). */
.multi-busca-chips {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.chip-multi-busca {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 6px 4px 12px; border-radius: 999px;
    background: #e0e7ff; color: #3730a3;
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.chip-multi-busca-remover {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; border: none;
    background: rgba(55,48,163,.14); color: inherit;
    font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
    transition: background-color .12s ease;
}
.chip-multi-busca-remover:hover { background: rgba(55,48,163,.26); }
/* Fallback sem JS (e estado inicial antes de tornarMultiBuscavel() rodar):
   grade simples de checkboxes, igual ao que a tela já usava antes. */
.multi-busca-orgaos-checkboxes {
    display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 0;
}
.multi-busca-orgaos-checkboxes label {
    display: flex; align-items: center; gap: 6px; font-weight: 400;
}

/* Campo de valor em reais, formatado enquanto digita (ver
   tornarCampoMoeda() em assets/js/main.js) -- o <input> visível mostra
   "1.234,56" com o "R$" fixo à esquerda, e um <input type="hidden"> ao
   lado (mesmo "name" que o campo tinha antes) carrega o valor real
   normalizado ("1234.56") que o backend já esperava, sem precisar mudar
   nada do lado do servidor. */
.campo-moeda-wrapper { position: relative; }
.campo-moeda-prefixo {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--cor-texto-suave); font-size: 14px; font-weight: 600; pointer-events: none;
}
.campo-moeda { padding-left: 34px !important; }

.card-tipo-selecionado {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; border: 1px solid var(--cor-borda); border-radius: var(--raio-md); margin-bottom: 12px;
}
.card-tipo-selecionado img { width: 56px; height: 56px; border-radius: var(--raio-sm); object-fit: cover; }
.card-tipo-selecionado .btn-link { margin-left: auto; color: var(--cor-primaria); background: none; border: none; cursor: pointer; text-decoration: underline; font-size: 13px; }

.contador-leitura {
    font-size: 16px; font-weight: 600; margin-bottom: 16px;
    padding: 10px 14px; background: var(--cor-fundo-sutil); border-radius: var(--raio-sm);
}
.contador-leitura #contadorTotal { font-size: 22px; color: var(--cor-primaria); }

/* Módulo de Conferência: 4 contadores lado a lado (esperados/conferidos/
   fora do lugar/não cadastrados), cada um com sua cor de destaque. */
.contadores-conferencia {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px;
}
.contador-conferencia {
    flex: 1 1 110px; text-align: center; padding: 10px 8px;
    background: var(--cor-fundo-sutil); border-radius: var(--raio-sm);
}
.contador-conferencia span { display: block; font-size: 22px; font-weight: 700; color: var(--cor-primaria); }
.contador-conferencia small { color: var(--cor-texto-suave); font-size: 12px; }
.contador-conferencia.contador-ok span { color: #15803d; }
.contador-conferencia.contador-divergente span { color: #b45309; }
.contador-conferencia.contador-desconhecido span { color: #a8271e; }

#leitorCamera { max-width: 320px; border-radius: var(--raio-md); overflow: hidden; }

.mensagem-leitura { min-height: 20px; font-size: 14px; font-weight: 600; margin: 10px 0; }
.mensagem-sucesso { color: #15803d; }
.mensagem-aviso { color: #b45309; }
.mensagem-erro { color: #a8271e; }

.feed-leituras { max-height: 220px; overflow-y: auto; font-size: 13px; color: var(--cor-texto-suave); }
.feed-item { padding: 4px 0; border-bottom: 1px solid var(--cor-borda); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.feed-item-duplicado { color: #b45309; }
.feed-item-ok { color: #15803d; }
.feed-item-divergente { color: #b45309; }
.feed-item-desconhecido { color: #a8271e; }

/* Pisca a tela toda por um instante ao ler um código (Recadastro) --
   verde quando registra com sucesso, laranja quando já existia. */
.flash-leitura {
    position: fixed; inset: 0; z-index: 9999; pointer-events: none;
    animation: flashPisca .35s ease-out;
}
.flash-verde { background: rgba(21,128,61,.35); }
.flash-laranja { background: rgba(180,83,9,.35); }
@keyframes flashPisca {
    from { opacity: 1; }
    to { opacity: 0; }
}
.btn-excluir-leitura {
    background: none; border: none; color: #a8271e; cursor: pointer;
    font-size: 13px; padding: 0 4px; line-height: 1; flex-shrink: 0;
}
.btn-excluir-leitura:hover { text-decoration: underline; }
.feed-item-acoes { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.link-etiqueta-leitura { text-decoration: none; font-size: 14px; line-height: 1; }
.link-etiqueta-leitura:hover { opacity: .7; }

/* Categorias / Usuários */
.btn-texto {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 13px; text-decoration: underline; text-underline-offset: 2px; font-family: inherit;
}
.link-primario { color: var(--cor-primaria); }
.link-perigo { color: #a8271e; }
.link-desativado { color: #b8bec9; pointer-events: none; }

/* Paginação (lista de Patrimônios) */
.paginacao {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cor-borda);
}
.paginacao a.btn-texto, .paginacao span.paginacao-atual {
    text-decoration: none; padding: 4px 10px; border-radius: var(--raio-sm); font-size: 13px;
}
.paginacao a.btn-texto:hover { background: var(--cor-fundo-sutil); }
.paginacao span.paginacao-atual {
    background: var(--cor-primaria); color: #fff; font-weight: 600;
}
.paginacao-reticencias { padding: 0 2px; color: var(--cor-texto-suave); }
.paginacao-info { margin-left: auto; color: var(--cor-texto-suave); font-size: 13px; }
/* Variante usada quando a paginação fica embutida na linha de ferramentas da
   lista (Patrimônios), em vez de sozinha embaixo da tabela -- sem a borda/
   respiro de separação, que só fazia sentido como um bloco à parte. */
.paginacao.paginacao-inline { margin-top: 0; padding-top: 0; border-top: none; }
/* Nesta variante embutida a paginação já fica dentro de uma barra que
   empurra tudo pra direita sozinha (.barra-ferramentas-lista) -- o
   margin-left:auto do bloco "Página X de Y" (pensado pra quando a
   paginação ficava sozinha, ocupando a linha toda) fica sem efeito aqui
   e é zerado pra não deixar resíduo de CSS morto. */
.paginacao.paginacao-inline .paginacao-info { margin-left: 0; }
.badge {
    display: inline-block; padding: 3px 11px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.badge-ativo { background: #dcfce7; color: #15803d; }
.badge-inativo { background: #fee2e2; color: #a8271e; }
.badge-admin { background: #ede9fe; color: #6d28d9; }
.badge-operador { background: #dbeafe; color: #1d4ed8; }
.badge-consulta { background: #f3f4f6; color: #4b5563; }
.badge-em_manutencao { background: #fef3c7; color: #b45309; }
.badge-emprestado { background: #dbeafe; color: #1d4ed8; }
.badge-baixado { background: #fee2e2; color: #a8271e; }
.badge-departamento { background: #e0e7ff; color: #3730a3; }
.badge-subarea { background: #f3f4f6; color: #4b5563; }
.badge-compartilhado { background: #f3f4f6; color: #4b5563; }
/* Badge genérico do grupo do usuário (rodapé/listagem) -- os nomes dos
   grupos agora são livres (cadastrados pelo admin), então não dá mais pra
   ter uma cor fixa por nome como era com os 3 perfis antigos. */
.badge-grupo { background: #ede9fe; color: #6d28d9; }
.badge-grupo-protegido { background: #fef3c7; color: #b45309; }

/* Situação da aprovação de uma solicitação de baixa (baixas_patrimonio.status)
   -- usado na listagem de Patrimônios, no histórico de baixa (Editar/
   Visualizar) e na fila de aprovação (baixas_pendentes.php). */
.badge-pendente { background: #fef3c7; color: #b45309; }
.badge-aprovada { background: #dcfce7; color: #15803d; }
.badge-rejeitada { background: #fee2e2; color: #a8271e; }

/* Situação da manutenção preventiva (ver situacaoManutencaoPreventiva() em
   config.php) -- mesmas cores dos cards de Editar/Visualizar, só que como
   selo pra caber na listagem. "ok" não ganha selo (não chama atenção à toa). */
.badge-manutencao-preventiva-vencida { background: #fee2e2; color: #a8271e; }
.badge-manutencao-preventiva-vencendo { background: #fef3c7; color: #b45309; }

/* Badges da ação no Log de Atividades. */
.badge-criar { background: #dcfce7; color: #15803d; }
.badge-editar { background: #dbeafe; color: #1d4ed8; }
.badge-excluir { background: #fee2e2; color: #a8271e; }
.badge-entrar { background: #f3f4f6; color: #4b5563; }
.badge-login_falhou { background: #fef3c7; color: #b45309; }

/* Sinal de status (online/offline) da tela Usuários Conectados -- mesmas
   cores de .badge-ativo/.badge-inativo acima, só que como uma bolinha ao
   lado do texto em vez de uma pílula preenchida. */
.status-conexao {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600;
}
.status-conexao::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.status-conexao-online { color: #15803d; }
.status-conexao-online::before { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.status-conexao-offline { color: #9ca3af; }
.status-conexao-offline::before { background: #d1d5db; }

/* Seção de instruções dobrável (telas do app de Campo -- Recadastro,
   Conferência, Cadastro, Instalar): fica fechada por padrão (sem o atributo
   "open") pra não ocupar a tela toda no celular -- quem já sabe usar
   ignora, quem tiver dúvida toca no cabeçalho pra abrir. <details>/
   <summary> nativos do navegador, sem precisar de JS nenhum. Usa as
   variáveis de tema (themes.css) pra se adaptar sozinha a qualquer cor
   escolhida em Configurações, inclusive o tema escuro. */
.instrucoes-dobravel {
    background: var(--cor-fundo-sutil); border: 1px solid var(--cor-borda);
    border-radius: 10px; margin: -4px 0 14px;
}
.instrucoes-dobravel summary {
    cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 13.5px;
    color: var(--cor-texto-suave); display: flex; align-items: center; gap: 8px;
    list-style: none; user-select: none;
}
.instrucoes-dobravel summary::-webkit-details-marker { display: none; }
.instrucoes-dobravel summary::after {
    content: '▾'; margin-left: auto; font-size: 11px; color: var(--cor-texto-suave);
    opacity: .7; transition: transform .15s;
}
.instrucoes-dobravel[open] summary::after { transform: rotate(180deg); }
.instrucoes-dobravel-conteudo {
    padding: 0 14px 12px; color: var(--cor-texto-suave); font-size: 13.5px;
}
.instrucoes-dobravel-conteudo p { margin: 6px 0; }
.instrucoes-dobravel-conteudo p:first-child { margin-top: 0; }
.instrucoes-dobravel-conteudo ol,
.instrucoes-dobravel-conteudo ul { margin: 6px 0; padding-left: 20px; }

/* Listagem de Patrimônios: colunas compactas e sem quebra de linha, e coluna
   de Ações com botões pequenos coloridos (em vez de links soltos separados
   por "·", que ficavam amontoados e alargavam a coluna). A 1ª coluna
   (checkbox) ganha largura fixa curta -- sem isso ela herdava a regra geral
   de "table td:first-child" (pensada pra colunas de nome/texto), que a
   deixava enorme. */
/* "border-collapse: collapse" (regra geral de "table" acima) tem um bug
   conhecido em vários navegadores quando misturado com coluna fixa
   (position:sticky) -- a coluna fixa acaba desenhando por cima da vizinha
   (Status ficava coberto pela coluna Ações). "separate" resolve; como as
   células daqui só têm borda embaixo (sem borda lateral), não muda nada
   visualmente, só corrige a sobreposição. */
.tabela-patrimonios { border-collapse: separate; border-spacing: 0; }
.tabela-patrimonios td:first-child {
    width: 34px; min-width: 34px; white-space: nowrap; overflow-wrap: normal;
}
.tabela-patrimonios th, .tabela-patrimonios td { white-space: nowrap; }
.tabela-patrimonios .celula-descricao {
    max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
/* A coluna Ações ficava "grudada" na borda direita (position:sticky) pra
   nunca sumir atrás da rolagem -- mas isso faz ela cobrir a coluna anterior
   enquanto a tabela está parcialmente rolada (comportamento normal de
   sticky, mas com aparência de texto cortado). Tirado: agora ela rola
   junto com o resto, como qualquer outra coluna. */

/* Mostrar/ocultar colunas (Patrimônios): cada checkbox marcado no painel
   "Colunas" soma uma classe "ocultar-X" na tabela, que esconde só as
   células daquele campo (th/td com a classe "col-X" correspondente). */
.tabela-patrimonios.ocultar-foto .col-foto,
.tabela-patrimonios.ocultar-tombamento .col-tombamento,
.tabela-patrimonios.ocultar-tipo .col-tipo,
.tabela-patrimonios.ocultar-descricao .col-descricao,
.tabela-patrimonios.ocultar-categoria .col-categoria,
.tabela-patrimonios.ocultar-localizacao .col-localizacao,
.tabela-patrimonios.ocultar-status .col-status,
.tabela-patrimonios.ocultar-cadastrado .col-cadastrado,
.tabela-patrimonios.ocultar-acoes .col-acoes {
    display: none;
}
/* Localização (Patrimônios): a regra geral logo acima ("th, td { white-space:
   nowrap }") cortava nomes compostos de departamento/sala (ex: "Secretaria
   de Educação — Sala do Coordenador") sem mostrar o texto todo. Só esta
   coluna volta a quebrar linha normalmente -- as outras continuam em uma
   linha só. min-width evita que a tabela espreme a coluna até sobrar espaço
   só pra 1 letra por linha (texto "deitado"); sem max-width fixo, ela cresce
   o quanto o texto pedir e o espaço da tela permitir -- a tabela já tem
   rolagem própria (regra "table { overflow-x:auto }" lá em cima) pro caso
   raro de um nome tão comprido que nem assim caiba. */
.tabela-patrimonios .col-localizacao {
    white-space: normal;
    overflow-wrap: break-word;
    min-width: 160px;
}
/* Mesmo painel "Colunas", aplicado na tabela do Log de Atividades. */
.tabela-logs.ocultar-data .col-data,
.tabela-logs.ocultar-usuario .col-usuario,
.tabela-logs.ocultar-acao .col-acao,
.tabela-logs.ocultar-area .col-area,
.tabela-logs.ocultar-descricao .col-descricao {
    display: none;
}
/* Mesmo painel "Colunas", aplicado na tabela do Histórico de Conferências. */
.tabela-conferencias.ocultar-localizacao .col-localizacao,
.tabela-conferencias.ocultar-usuario .col-usuario,
.tabela-conferencias.ocultar-data .col-data,
.tabela-conferencias.ocultar-situacao .col-situacao,
.tabela-conferencias.ocultar-resultado .col-resultado,
.tabela-conferencias.ocultar-acoes .col-acoes {
    display: none;
}
/* Mesmo painel "Colunas", aplicado na tabela de Relatórios. */
.tabela-relatorios.ocultar-tombamento .col-tombamento,
.tabela-relatorios.ocultar-tipo .col-tipo,
.tabela-relatorios.ocultar-descricao .col-descricao,
.tabela-relatorios.ocultar-categoria .col-categoria,
.tabela-relatorios.ocultar-localizacao .col-localizacao,
.tabela-relatorios.ocultar-responsavel .col-responsavel,
.tabela-relatorios.ocultar-estado .col-estado,
.tabela-relatorios.ocultar-status .col-status,
.tabela-relatorios.ocultar-cadastro .col-cadastro,
.tabela-relatorios.ocultar-valor-aquisicao .col-valor-aquisicao,
.tabela-relatorios.ocultar-valor-contabil .col-valor-contabil,
.tabela-relatorios.ocultar-fonte-recurso .col-fonte-recurso {
    display: none;
}
/* Mesmo painel "Colunas", aplicado na tabela de Fornecedores. */
.tabela-fornecedores.ocultar-cnpj .col-cnpj,
.tabela-fornecedores.ocultar-situacao .col-situacao,
.tabela-fornecedores.ocultar-cidade .col-cidade,
.tabela-fornecedores.ocultar-contato .col-contato,
.tabela-fornecedores.ocultar-bens .col-bens,
.tabela-fornecedores.ocultar-acoes .col-acoes {
    display: none;
}
/* Mesmo painel "Colunas", aplicado na tabela de Localizações. A coluna de
   seleção (checkbox) ganha largura fixa curta por classe própria (em vez
   de confiar em "td:first-child", que também seria a 1ª coluna quando não
   há permissão de excluir -- aí seria a de Órgão/Departamento, que precisa
   do espaço normal) -- sem isso ela herdava a regra geral de "table
   td:first-child" (pensada pra colunas de nome/texto), que a deixava
   enorme (30% da tabela, mínimo 220px, só pra um checkbox). */
.tabela-localizacoes .col-selecao {
    width: 34px; min-width: 34px; white-space: nowrap; overflow-wrap: normal;
}
.tabela-localizacoes.ocultar-orgao .col-orgao,
.tabela-localizacoes.ocultar-departamento .col-departamento,
.tabela-localizacoes.ocultar-tipo .col-tipo,
.tabela-localizacoes.ocultar-bens .col-bens,
.tabela-localizacoes.ocultar-acoes .col-acoes {
    display: none;
}
/* Mesmo painel "Colunas", aplicado na tabela de Órgãos. Mesma correção da
   coluna de seleção das demais tabelas -- sem a classe própria, ela
   herdava a regra geral de "table td:first-child" (30% da tabela, mínimo
   220px), pensada pra coluna de nome/texto, não pra um checkbox. */
.tabela-orgaos .col-selecao {
    width: 34px; min-width: 34px; white-space: nowrap; overflow-wrap: normal;
}
.tabela-orgaos.ocultar-descricao .col-descricao,
.tabela-orgaos.ocultar-departamentos .col-departamentos,
.tabela-orgaos.ocultar-acoes .col-acoes {
    display: none;
}
/* Mesmo painel "Colunas", aplicado na tabela do Catálogo de Tipos. Mesma
   correção da coluna de seleção das demais tabelas -- sem a classe
   própria, ela herdava a regra geral de "table td:first-child" (30% da
   tabela, mínimo 220px), pensada pra coluna de nome/texto, não pra um
   checkbox (a coluna de Foto já tinha correção própria pra quando ELA é
   a 1ª coluna, ver ".celula-foto-tipo:first-child" acima -- esta aqui
   cobre o outro caso, quando o checkbox de seleção é a 1ª). */
.tabela-tipos .col-selecao {
    width: 34px; min-width: 34px; white-space: nowrap; overflow-wrap: normal;
}
.tabela-tipos.ocultar-descricao .col-descricao,
.tabela-tipos.ocultar-categoria .col-categoria,
.tabela-tipos.ocultar-orgao .col-orgao,
.tabela-tipos.ocultar-bens .col-bens,
.tabela-tipos.ocultar-acoes .col-acoes {
    display: none;
}
/* Mesma correção da coluna de seleção (checkbox) nas tabelas de Categorias,
   Fontes de Recurso e Responsáveis -- essas três ainda não têm o painel
   "Colunas" (por isso não têm classes "col-X"/"ocultar-X" próprias), mas
   têm a mesma exclusão em lote com checkbox como 1ª coluna, e por isso
   herdavam a mesma regra geral de "table td:first-child" (30% da tabela,
   mínimo 220px), pensada pra coluna de nome/texto, não pra um checkbox. */
.tabela-categorias .col-selecao,
.tabela-fontes .col-selecao,
.tabela-responsaveis .col-selecao,
.tabela-fornecedores .col-selecao {
    width: 34px; min-width: 34px; white-space: nowrap; overflow-wrap: normal;
}
/* Mesmo painel "Colunas", aplicado na tabela de Usuários. */
.tabela-usuarios.ocultar-email .col-email,
.tabela-usuarios.ocultar-grupo .col-grupo,
.tabela-usuarios.ocultar-orgaos .col-orgaos,
.tabela-usuarios.ocultar-telefone .col-telefone,
.tabela-usuarios.ocultar-cpf .col-cpf,
.tabela-usuarios.ocultar-status .col-status,
.tabela-usuarios.ocultar-acoes .col-acoes {
    display: none;
}
/* Sem quebra de linha nas colunas de Usuários (pedido do usuário) -- evita
   linha esticando em altura por causa de um campo que só encolheu na
   largura. Sobrescreve a regra geral "table td:first-child" (que permitia
   quebra pro Nome) com uma mais específica pra esta tabela. Nome/E-mail/
   Órgão(s) são os únicos com texto livre que pode ficar "muito grande" --
   ganham max-width + reticências (title com o texto completo pra quem
   passar o mouse), como já é feito na Descrição de Patrimônios. */
.tabela-usuarios th, .tabela-usuarios td { white-space: nowrap; }
.tabela-usuarios td:first-child {
    white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
}
.tabela-usuarios .col-email, .tabela-usuarios .col-orgaos {
    max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
/* Mesma correção da tabela de Patrimônios: sem isso, colunas de conteúdo
   curto e sempre do mesmo tamanho (Tombamento, Estado, Status, valores)
   esticam bem mais do que precisam, porque o texto livre da Descrição
   "puxa" a distribuição de largura padrão da tabela. white-space:nowrap
   em tudo impede a Descrição de quebrar linha (o que a deixaria estreita
   demais), enquanto o max-width+ellipsis abaixo capa o quanto ela pode
   crescer -- sobrando o resto do espaço pra Descrição/Categoria/
   Localização/Responsável, que têm texto de tamanho variável, em vez de
   pra Tombamento, que nunca precisa de mais que o próprio conteúdo. */
.tabela-relatorios th, .tabela-relatorios td { white-space: nowrap; }
.tabela-relatorios .celula-descricao {
    max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.btn-colunas {
    background: none; border: 1px solid var(--cor-borda); color: var(--cor-texto-suave);
    padding: 8px 14px; border-radius: var(--raio-md); font-size: 13.5px; cursor: pointer;
}
.btn-colunas:hover { background: #f3f4f6; }
/* "Por página" reaproveita o mesmo visual do botão "Colunas" (mesma
   caixinha com borda) em vez do <select> cru -- os dois ficam lado a lado,
   com a mesma "linguagem" de botão. */
.seletor-por-pagina {
    display: inline-flex; align-items: center; gap: 6px; margin: 0;
}
.seletor-por-pagina label { margin: 0; color: inherit; font-weight: 400; }
.seletor-por-pagina select {
    border: none; background: none; padding: 0; margin: 0;
    font-size: 13.5px; color: inherit; cursor: pointer; width: auto;
}
.seletor-por-pagina select:focus { outline: none; box-shadow: none; }
/* Combo "Colunas": mesmo padrão visual/comportamento do menu do usuário no
   cabeçalho -- botão + lista flutuante (não empurra o resto da página),
   que fecha sozinha ao clicar fora. */
.combo-colunas { position: relative; }
.painel-colunas {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    min-width: 200px;
    background: var(--cor-cartao);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    box-shadow: 0 10px 28px rgba(16,24,40,.16);
    padding: 6px;
}
.opcao-coluna {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px; border-radius: var(--raio-sm);
    font-size: 14px; cursor: pointer; user-select: none;
    transition: background-color .15s ease;
}
.opcao-coluna:hover { background: var(--cor-fundo-sutil); }
.opcao-coluna input { width: auto; margin: 0; cursor: pointer; }
.acoes-linha { display: flex; flex-wrap: nowrap; gap: 5px; }
.acoes-linha form { display: contents; }
.btn-acao {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0;
    border: none; border-radius: var(--raio-sm);
    cursor: pointer; text-decoration: none; line-height: 1;
    transition: filter .12s ease, transform .08s ease;
}
.btn-acao:hover { filter: brightness(.94); }
.btn-acao:active { transform: translateY(1px); }
.icone-acao { width: 16px; height: 16px; display: block; }
/* Ícone dentro do botão "Imprimir etiquetas selecionadas" (fora da coluna
   de Ações, então herda cor branca do .btn em vez das cores por ação).
   Precisa sobrescrever o "display: block" de .icone-acao acima -- sem isso
   o ícone (um <svg> em bloco) cai numa linha e o texto do botão noutra,
   deixando o botão bem mais alto do que devia. */
.btn .icone-acao { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; }
.btn-acao-visualizar { background: #e0e7ff; color: #3730a3; }
.btn-acao-etiqueta { background: #e5e7eb; color: #374151; }
.btn-acao-editar { background: #dbeafe; color: #1d4ed8; }
.btn-acao-duplicar { background: #ccfbf1; color: #0f766e; }
.btn-acao-baixa { background: #fee2e2; color: #a8271e; }
.btn-acao-manutencao { background: #fef3c7; color: #b45309; }
.btn-acao-emprestar { background: #ede9fe; color: #6d28d9; }
.btn-acao-reativar { background: #dcfce7; color: #15803d; }
.btn-acao-retornar { background: #dbeafe; color: #1d4ed8; }
.btn-acao-excluir { background: #fee2e2; color: #a8271e; }
.btn-acao-inativar { background: #fee2e2; color: #a8271e; }
.btn-acao-liberar { background: #dcfce7; color: #15803d; }
.btn-acao-continuar { background: #dcfce7; color: #15803d; }

/* Botão pequeno (variante compacta do .btn) -- usado onde o botão padrão
   fica grande demais para o contexto, como acima da tabela de Patrimônios. */
.btn-pequeno { padding: 6px 12px; font-size: 12.5px; }

/* Barra de filtros de Patrimônios: campo único pra buscar por um campo
   específico (em vez de mais uma caixa fixa por campo), com um select pra
   escolher o campo e um campo de texto pro valor, lado a lado. */
.campo-busca-especifica { display: flex; gap: 6px; }
.campo-busca-especifica select { flex: 0 0 auto; width: auto; min-width: 150px; }
.campo-busca-especifica input { flex: 1 1 140px; }
/* Mesmo visual dos demais campos do sistema (.form-grupo input/select) --
   aqui repetido em vez de herdado porque estes dois campos não ficam dentro
   de um .form-grupo (o layout lado a lado com larguras diferentes já é
   controlado acima). Sem isso, ficavam com a aparência padrão do navegador. */
.campo-busca-especifica select, .campo-busca-especifica input {
    padding: 9px 12px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    font-size: 14px;
    background: var(--cor-cartao);
    color: var(--cor-texto);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.campo-busca-especifica select:focus, .campo-busca-especifica input:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(var(--cor-primaria-rgb), .16);
}

/* Campo de busca rápida (Patrimônios): antes com cor fixa (#d1d5db) direto
   no HTML, sem seguir o tema -- agora usa as mesmas variáveis dos demais
   campos do sistema, então acompanha o tema escuro e os outros temas. */
.busca-rapida-input {
    flex: 1;
    padding: 8px 12px;
    border-radius: var(--raio-sm);
    border: 1px solid var(--cor-borda);
    background: var(--cor-cartao);
    color: var(--cor-texto);
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.busca-rapida-input:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(var(--cor-primaria-rgb), .16);
}

/* Linha única de ferramentas da lista de Patrimônios (Filtros avançados,
   Colunas, Por página, paginação), alinhada à direita no desktop. */
.barra-ferramentas-lista {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 10px;
}

/* Botão "Filtros avançados" (Patrimônios): reaproveita o visual do
   .btn-mais-opcoes, com uma bolinha mostrando quantos filtros estão
   ativos mesmo quando o painel está fechado -- assim dá pra saber que a
   lista está filtrada sem precisar abrir o painel pra conferir. */
.badge-contagem-filtros {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    background: var(--cor-primaria); color: #fff; font-size: 11px; font-weight: 700;
    vertical-align: middle;
}
.seta-filtros { font-size: 11px; }

/* Cadastro/edição de Localização: escolha entre Departamento (nível
   principal) e Sub-área (sala/setor dentro de um departamento). Cada opção
   fica num "cartão" clicável em vez de um radio solto, pra ficar claro que
   são dois jeitos diferentes de cadastro, não só uma marcação a mais. */
.opcoes-tipo { display: flex; flex-wrap: wrap; gap: 10px; }
.opcao-tipo {
    display: flex; align-items: flex-start; gap: 8px;
    border: 1px solid var(--cor-borda); border-radius: var(--raio-md); padding: 10px 12px;
    flex: 1 1 220px; cursor: pointer; font-weight: 600; font-size: 14px;
    transition: border-color .15s ease, background-color .15s ease;
}
.opcao-tipo:has(input:checked) { border-color: var(--cor-primaria); background: rgba(var(--cor-primaria-rgb), .06); }
.opcao-tipo input { width: auto; margin-top: 3px; }
.opcao-tipo span.opcao-tipo-exemplo { display: block; font-weight: 400; color: var(--cor-texto-suave); font-size: 12px; margin-top: 2px; }
.opcao-tipo:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* Listagem de Localizações: sub-área aparece recuada e mais leve, abaixo do
   departamento a que pertence, pra hierarquia ficar visível de relance. */
/* Antes usava "td:first-child" -- funcionava só porque o Nome era sempre a
   1ª coluna; agora que a ordem das colunas é Órgão/Departamento/Localização
   (ver modules/localizacoes/listar.php), o recuo precisa mirar a célula
   certa por classe, senão indentava a coluna errada (Órgão/Departamento). */
.linha-subarea .col-localizacao { padding-left: 26px; color: var(--cor-texto-suave); }

/* Botão que expande/oculta as salas de um departamento -- começam ocultas
   por padrão pra lista não ficar longa, com a contagem ao lado pra dar uma
   ideia de quantas tem sem precisar abrir. Em forma de botão (fundo,
   borda, alvo grande) em vez de só um caractere solto, pra ficar óbvio que
   é clicável -- e o triângulo gira ao abrir, reforçando a ação. */
.btn-toggle-salas {
    background: var(--cor-fundo-sutil); border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); cursor: pointer;
    width: 26px; height: 26px; padding: 0; margin-right: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle;
    transition: background-color .15s ease;
}
.btn-toggle-salas:hover { background: rgba(var(--cor-primaria-rgb), .12); }
.btn-toggle-salas .seta-toggle {
    display: inline-block; font-size: 14px; line-height: 1; color: var(--cor-texto-suave);
    transition: transform .15s ease;
}
.btn-toggle-salas[aria-expanded="true"] .seta-toggle { transform: rotate(180deg); }
.badge-salas { background: #e0f2fe; color: #0369a1; margin-left: 6px; }

/* Central de Ajuda
   Layout em lista plana (não em grade de cards): cada tela é uma linha de
   altura fixa dentro de um bloco por seção -- sem grade, então não tem
   como sobrar espaço nem uma linha ficar maior que a outra (era o problema
   da versão anterior, em cards, que o Robson não gostou -- ver histórico
   em claude/manuais-do-sistema.md). Agrupadas em seções temáticas (Uso
   diário / Cadastros auxiliares / etc.) só pra facilitar achar o assunto,
   não pra formar grade. */
.ajuda-busca-wrap { position: relative; margin-bottom: 24px; max-width: 640px; }
.ajuda-busca-wrap input {
    width: 100%; padding: 11px 14px 11px 40px;
    border: 1px solid var(--cor-borda); border-radius: var(--raio-md);
    font-size: 14px; background: var(--cor-cartao); color: var(--cor-texto);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ajuda-busca-wrap input:focus {
    outline: none; border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(var(--cor-primaria-rgb), .15);
}
.ajuda-busca-icone {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; color: var(--cor-texto-suave); pointer-events: none;
}

.ajuda-secao { margin-bottom: 26px; }
.ajuda-secao:last-of-type { margin-bottom: 20px; }
.ajuda-secao-titulo {
    font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--cor-texto-suave); margin: 0 0 10px;
}

/* Bloco de uma seção: uma única "caixa" com borda, as linhas dentro dele
   só se separam por um traço fino -- é o que dá a aparência plana, sem
   lacunas entre itens. */
.lista-ajuda {
    background: var(--cor-cartao); border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md); overflow: hidden;
}
.linha-ajuda {
    display: flex; align-items: center; gap: 14px; padding: 13px 16px;
    border-top: 1px solid var(--cor-borda); text-decoration: none; color: inherit;
    transition: background-color .12s ease;
}
.linha-ajuda:first-child { border-top: none; }
.linha-ajuda:hover { background: var(--cor-fundo-sutil); }
.linha-ajuda-icone {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: var(--raio-sm);
    background: rgba(var(--cor-primaria-rgb), .1); color: var(--cor-primaria);
    display: flex; align-items: center; justify-content: center;
}
.linha-ajuda-icone .icone-svg-ajuda { width: 18px; height: 18px; }
.linha-ajuda-texto { flex: 1 1 auto; min-width: 0; }
.linha-ajuda-titulo { font-size: 14.5px; font-weight: 600; margin: 0 0 2px; color: var(--cor-texto); }
.linha-ajuda-desc {
    margin: 0; font-size: 13px; color: var(--cor-texto-suave);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.linha-ajuda-acesso {
    flex: 0 0 auto; font-size: 11px; color: var(--cor-texto-suave);
    background: var(--cor-fundo-sutil); padding: 3px 9px; border-radius: 999px;
    white-space: nowrap; display: none;
}
.linha-ajuda-seta { flex: 0 0 auto; color: var(--cor-texto-suave); display: flex; }
.linha-ajuda-seta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 860px) { .linha-ajuda-acesso { display: inline-block; } }

/* Como o Recadastro é a única tela com passo a passo, a descrição
   completa (inclusive as instruções numeradas) fica na própria tela --
   a linha aqui só resume, igual às outras, então não precisa de nenhum
   tratamento especial/largura diferente. */

/* Manuais em PDF: bloco fixo, sempre visível (não faz parte da busca nem
   das seções colapsáveis), com o mesmo visual de lista plana. */
.manuais-ajuda {
    background: var(--cor-cartao); border: 1px solid rgba(var(--cor-primaria-rgb), .28);
    border-radius: var(--raio-md); margin-bottom: 26px; overflow: hidden;
}
.manuais-ajuda-cabecalho { display: flex; align-items: center; gap: 10px; padding: 13px 16px 9px; }
.manuais-ajuda-cabecalho svg { width: 19px; height: 19px; color: var(--cor-primaria); }
.manuais-ajuda-cabecalho h2 { font-size: 14.5px; font-weight: 700; margin: 0; }
.manuais-ajuda-item {
    display: flex; align-items: center; gap: 14px; padding: 10px 16px;
    border-top: 1px solid var(--cor-borda);
}
.manuais-ajuda-item-texto { flex: 1 1 auto; min-width: 0; }
.manuais-ajuda-item-titulo { font-size: 13.5px; font-weight: 600; margin: 0; }
.manuais-ajuda-item-meta { font-size: 12px; color: var(--cor-texto-suave); margin: 1px 0 0; }
.manuais-ajuda-baixar {
    flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--cor-primaria);
    text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid rgba(var(--cor-primaria-rgb), .35); padding: 6px 12px; border-radius: var(--raio-sm);
    white-space: nowrap;
}
.manuais-ajuda-baixar:hover { background: rgba(var(--cor-primaria-rgb), .08); }
.manuais-ajuda-baixar svg { width: 14px; height: 14px; }

/* Tela de abertura do app instalado: invisível em qualquer navegador normal
   (aba comum) -- só aparece pra quem abriu o app pelo ícone instalado no
   celular (media query abaixo cobre Chrome/Android/Desktop; a classe
   ".ios-standalone", marcada por um script síncrono em login.php, cobre
   Safari/iOS, que não segue esse media query). Ícone (configurável em
   Configurações > Geral > Ícone do Sistema) acima do nome, sobre o fundo do
   tema -- fica visível por quase 2s antes de sumir com uma animação suave,
   dando uma sensação de "abrindo um app de verdade" em vez de picar direto
   pro formulário de login. */
.tela-abertura {
    display: none;
    position: fixed; inset: 0; z-index: 99999;
    flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
@media (display-mode: standalone) {
    .tela-abertura { display: flex; animation: telaAberturaSai .6s ease-in 1.9s forwards; }
}
html.ios-standalone .tela-abertura { display: flex; animation: telaAberturaSai .6s ease-in 1.9s forwards; }
.tela-abertura-icone {
    max-width: 104px; max-height: 104px; object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.3));
    animation: telaAberturaIcone .7s ease-out;
}
.tela-abertura-nome {
    color: #fff; font-size: 18px; font-weight: 600; text-align: center; padding: 0 24px;
    animation: telaAberturaTexto .7s ease-out .15s both;
}
@keyframes telaAberturaIcone {
    from { opacity: 0; transform: scale(.7); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes telaAberturaTexto {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes telaAberturaSai {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Ícone do Sistema (Configurações > Geral) fixo -- diferente da tela de
   abertura (.tela-abertura, acima), este fica sempre visível, tanto no
   login quanto na Central de Campo (modules/campo/index.php), não só no app
   instalado. */
.icone-sistema-fixo {
    display: block; margin: 0 auto 12px; max-width: 68px; max-height: 68px; object-fit: contain;
}

.login-wrapper {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--cor-fundo);
}
.login-card { width: 340px; position: relative; z-index: 1; }
.login-wrapper-com-fundo {
    background-size: cover; background-position: center; background-repeat: no-repeat;
    position: relative;
}
.login-wrapper-com-fundo::before {
    content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.4);
}
.login-wrapper-com-fundo .login-card { box-shadow: 0 10px 34px rgba(0,0,0,.4); }

/* Canto da tela (não compete com o formulário) reunindo o botão de instalar
   o app de Campo e, se configurado (Configurações > Login > "Endereço da
   Página de Instalação"), o QR code pra instalar em OUTRO celular -- ex:
   alguém aponta a câmera pra tela do computador projetada/impressa, sem
   precisar digitar o endereço. Funciona em cima de fundo claro ou da foto
   escurecida, já que os dois elementos são pensados pros dois casos. */
.login-instalar-flutuante {
    position: fixed; right: 16px; bottom: 16px; z-index: 2;
    display: flex; align-items: center; gap: 10px;
}
.login-qrcode-instalar {
    background: #fff; padding: 6px; border-radius: var(--raio-sm);
    box-shadow: 0 2px 8px rgba(0,0,0,.2); line-height: 0;
}
.login-qrcode-instalar img, .login-qrcode-instalar canvas { display: block; }
.login-botao-instalar-campo {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20,39,78,.55); border: 1px solid rgba(255,255,255,.3);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    font-size: 19px; text-decoration: none; line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    transition: background .15s ease, transform .15s ease;
}
.login-botao-instalar-campo:hover, .login-botao-instalar-campo:focus-visible {
    background: rgba(20,39,78,.8); transform: scale(1.06);
}
.aviso-caps-lock {
    margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: #b45309;
}

/* Botão de alternar claro/escuro -- usado na tela de login e na Central de
   Campo (mesmo canto livre nas duas, oposto ao de instalar o app/QR code).
   Usa as variáveis de cor do tema (não cores fixas) porque ele precisa
   continuar legível tanto no tema claro quanto depois de trocar pro
   "escuro". A escolha é lembrada no navegador (localStorage) e passa a
   valer em TODAS as páginas do sistema nesse navegador -- ver o script
   embutido no <head> de includes/header.php (Recadastro, Conferência,
   Meu Perfil e todo o resto do sistema) e no de login.php/campo/index.php
   (as duas telas que não usam header.php). Sem alguém clicar aqui, nada
   muda -- continua valendo o tema escolhido em Configurações. */
.tema-toggle-flutuante {
    position: fixed; right: 16px; top: 16px; z-index: 2;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--cor-cartao); border: 1px solid var(--cor-borda);
    color: var(--cor-texto); display: flex; align-items: center;
    justify-content: center; font-size: 18px; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    transition: background .15s ease, transform .15s ease;
}
.tema-toggle-flutuante:hover, .tema-toggle-flutuante:focus-visible {
    transform: scale(1.06);
}

/* Central de Campo (modules/campo/index.php): tela de entrada enxuta pra
   quem só vai usar o celular pra Recadastro/Conferência -- mesma ideia de
   tela cheia e centralizada do .login-wrapper, só que com cartões grandes
   em vez de formulário. */
.campo-hub-wrapper {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 24px; gap: 24px; background: var(--cor-fundo);
}
.campo-hub-topo { text-align: center; color: var(--cor-texto-suave); font-size: 13.5px; }
.campo-hub-topo strong { display: block; color: var(--cor-texto); font-size: 17px; margin-bottom: 2px; }
.campo-hub-grade {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px; width: 100%; max-width: 480px;
}
.campo-hub-cartao {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    background: var(--cor-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio-md);
    padding: 28px 18px; text-decoration: none; color: inherit;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.campo-hub-cartao:hover, .campo-hub-cartao:active {
    box-shadow: 0 8px 20px rgba(16,24,40,.1); transform: translateY(-2px);
    border-color: rgba(var(--cor-primaria-rgb), .35);
}
.campo-hub-cartao-icone { line-height: 1; }
.campo-hub-cartao-titulo { font-size: 17px; font-weight: 700; color: var(--cor-texto); }
.campo-hub-cartao-desc { font-size: 12.5px; color: var(--cor-texto-suave); }
.campo-hub-rodape { display: flex; align-items: center; gap: 22px; }
/* Perfil/Ajuda/Sair no rodapé da Central de Campo: mesmo ícone SVG (ver
   sprite embutido em modules/campo/index.php) pros três, em vez de emoji --
   fica igual em qualquer aparelho/sistema operacional, ao contrário de
   emoji (que cada fabricante desenha diferente), e não depende de CDN
   nenhum (continua funcionando offline). Sem sublinhado (o ".btn-texto"
   de sempre sublinha texto, mas aqui é só o ícone). */
.icone-rodape-campo {
    text-decoration: none; color: var(--cor-texto-suave);
    line-height: 1;
}
.icone-rodape-campo:hover { color: var(--cor-primaria); }
/* Ícone grande dos cartões da Central de Campo (Recadastro/Conferência) --
   mesmo tamanho que o emoji de 40px que existia antes. */
.icone-svg-cartao {
    width: 40px; height: 40px;
    fill: none; stroke: currentColor; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
    color: var(--cor-primaria);
}
/* Ícone do botão claro/escuro (login.php e Central de Campo) -- vazado
   sobre o fundo do próprio botão (.tema-toggle-flutuante), então herda a
   cor do texto normal do tema (não a cor primária). */
.icone-svg-toggle {
    width: 20px; height: 20px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
/* Ícone de cada card da Central de Ajuda do app de Campo (mesmo tamanho do
   antigo emoji em .card-ajuda-icone, que ficou só com o line-height). */
.icone-svg-ajuda {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.campo-hub-instalar { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.campo-hub-instalar-dica { font-size: 12.5px; color: var(--cor-texto-suave); max-width: 320px; margin: 0; }

/* Mesma imagem de fundo configurada pro login (Configurações > Imagem de
   fundo do login) também aparece aqui -- é a mesma ideia, só que a imagem
   foi desenhada num recorte quadrado justamente pra "se adaptar" tanto ao
   login (tela larga, corta topo/base) quanto a esta tela (celular em pé,
   corta as laterais), ver comentário no modules/campo/index.php. Os textos
   soltos (sem cartão embaixo) precisam virar claros pra continuar legíveis
   em cima da foto escurecida -- os cartões brancos (.campo-hub-cartao) não
   precisam, já são opacos. */
.campo-hub-wrapper-com-fundo {
    background-size: cover; background-position: center; background-repeat: no-repeat;
    position: relative;
}
.campo-hub-wrapper-com-fundo::before {
    content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.45);
}
.campo-hub-wrapper-com-fundo > * { position: relative; z-index: 1; }
.campo-hub-wrapper-com-fundo .campo-hub-topo,
.campo-hub-wrapper-com-fundo .campo-hub-topo strong,
.campo-hub-wrapper-com-fundo .campo-hub-instalar-dica,
.campo-hub-wrapper-com-fundo .campo-hub-rodape .btn-texto {
    color: #f2f5fa;
}
.campo-hub-wrapper-com-fundo .campo-hub-cartao { box-shadow: 0 10px 28px rgba(0,0,0,.35); }

/* Lupa nas fotos (catálogo de tipos e patrimônios): qualquer <img> dentro
   de .foto-zoom fica clicável e abre em tamanho grande no lightbox abaixo
   -- feito uma vez só aqui, reaproveitado em toda tela que mostra foto. */
.foto-zoom { position: relative; display: inline-block; cursor: zoom-in; line-height: 0; }
.foto-zoom img { display: block; }
.foto-zoom::after {
    content: '🔍'; position: absolute; bottom: 3px; right: 3px;
    background: rgba(0,0,0,.6); color: #fff; line-height: 1;
    font-size: 11px; padding: 3px 5px; border-radius: 5px;
    opacity: 0; transition: opacity .15s ease;
}
.foto-zoom:hover::after { opacity: 1; }

/* Selo "referência visual já calculada" (Catálogo de Tipos, ver
   modules/tipos/gerar_referencias.php): canto oposto ao ícone de lupa
   (que só aparece no hover) -- este fica sempre visível, pra dar pra ver
   de relance quais fotos já têm a referência do reconhecimento visual
   calculada, sem precisar abrir "Gerar referências visuais". */
.badge-referencia-ok {
    position: absolute; top: -4px; right: -4px;
    width: 15px; height: 15px; border-radius: 50%;
    background: #15803d; color: #fff; border: 1.5px solid var(--cor-cartao);
    display: flex; align-items: center; justify-content: center;
    font-size: 9.5px; line-height: 1; font-weight: 700;
}

/* Coluna de foto na listagem de Tipos: só o espaço da miniatura -- nome do
   arquivo e tamanho em KB ficam no title (aparece ao passar o mouse), sem
   alargar a coluna. Precisa de "table td:first-child" na seletor (com a
   mesma especificidade da regra genérica de 1ª coluna, lá em cima, que
   força min-width:220px) pra realmente vencer e não ficar larga. */
table td.celula-foto-tipo:first-child, table th.celula-foto-tipo:first-child {
    width: 40px; min-width: 0; white-space: nowrap; overflow-wrap: normal;
}
.foto-miniatura-tipo { width: 40px; height: 40px; object-fit: cover; border-radius: var(--raio-sm); display: block; }
.foto-ausente-tipo { font-size: 12.5px; color: #9ca3af; }

/* Coluna de foto do BEM (não do tipo do catálogo): usada na listagem de
   Patrimônios (logo depois do checkbox de seleção -- não é a 1ª coluna lá,
   então o seletor por classe sozinho já basta) e no Relatório de Bens em
   tela (aí sim como 1ª coluna de verdade). Correção 2026-09-01: um seletor
   só por classe NÃO vence a regra genérica de 1ª coluna -- especificidade
   de ".celula-foto-bem" sozinha é (0,1,0), contra (0,1,2) de "table
   td:first-child" (2 elementos), que é MAIS específica, não menos (o
   comentário antigo aqui estava errado nesse ponto). Por isso, no
   Relatório, a coluna Foto herdava os 30%/220px mínimos pensados pra
   coluna de nome/texto e ficava enorme -- mesmo bug de sempre da 1ª
   coluna, só que na foto em vez do checkbox. Corrigido com o mesmo truque
   ":first-child" já usado em Tipos logo acima. */
.celula-foto-bem { width: 40px; min-width: 0; white-space: nowrap; overflow-wrap: normal; }
table td.celula-foto-bem:first-child, table th.celula-foto-bem:first-child {
    width: 40px; min-width: 0; white-space: nowrap; overflow-wrap: normal;
}
.foto-miniatura-bem { width: 40px; height: 40px; object-fit: cover; border-radius: var(--raio-sm); display: block; }
.foto-ausente-bem { font-size: 11px; color: #9ca3af; }

/* Coluna "curta" (código, data, número): mesmo problema da largura mínima
   genérica de 1ª coluna, pra tabelas soltas que não têm uma classe própria
   (ex: relatório de Conferência) ou cuja 1ª coluna já tem outra classe
   (ex: Log de Atividades) -- some junto com ela em vez de substituir. */
.col-curta { width: auto; min-width: 0; white-space: nowrap; overflow-wrap: normal; }

.lightbox-foto {
    /* z-index acima dos modais (400) -- senão, ao clicar numa foto que está
       dentro de um modal (ex: aba "Fotos" do Editar/Visualizar), o lightbox
       abria por baixo do modal e ficava escondido. */
    position: fixed; inset: 0; z-index: 500;
    background: rgba(0,0,0,.78);
    display: flex; align-items: center; justify-content: center;
    padding: 30px; overflow: hidden;
}
.lightbox-foto img {
    max-width: 90vw; max-height: 90vh; border-radius: var(--raio-md);
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
    cursor: zoom-in;
}
/* Clicando na foto já ampliada, dá pra ampliar ainda mais -- o tamanho em
   pixels é calculado por JS (main.js) porque uma foto pequena, sem isso,
   pode já estar exibida no tamanho real dela mesmo "ajustada à tela", e só
   tirar o max-width/max-height não a deixaria maior. Com barra de rolagem
   pra navegar quando não couber inteira; clicar de novo volta ao tamanho
   ajustado. "margin:auto" (em vez de manter align/justify:center no
   container) é o que permite continuar centralizada quando cabe, mas sem
   travar o scroll numa borda quando não cabe.*/
.lightbox-foto.lightbox-foto-zoom-ativo {
    align-items: flex-start; justify-content: flex-start; overflow: auto;
}
.lightbox-foto.lightbox-foto-zoom-ativo img { margin: auto; }
.lightbox-foto img.lightbox-foto-ampliada {
    max-width: none; max-height: none; cursor: zoom-out;
}
.lightbox-foto-fechar {
    position: absolute; top: 18px; right: 22px;
    background: rgba(255,255,255,.15); color: #fff; border: none;
    width: 40px; height: 40px; border-radius: 50%;
    font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .15s ease;
}
.lightbox-foto-fechar:hover { background: rgba(255,255,255,.3); }

/* Campo de foto com duas opções -- "Tirar foto agora" (câmera embutida na
   página, sem passar pela escolha ambígua do sistema) e "Carregar arquivo"
   (seletor de arquivos comum, pra foto que já existe salva em algum lugar).
   Usado em todo campo de foto do sistema (bem, etiqueta, tipo). */
.campo-foto-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
/* Variante só com ícone (sem o texto "Tirar foto agora" / "Carregar
   arquivo") -- usada no Meu Perfil, onde os dois botões lado a lado já
   deixam claro o que cada um faz; mantém as classes .btn-tirar-foto /
   .btn-carregar-foto de sempre (é por elas que o main.js liga a câmera e o
   seletor de arquivo), só muda a aparência. */
.btn-foto-icone {
    width: 42px; height: 42px; padding: 0; display: flex;
    align-items: center; justify-content: center; font-size: 18px;
}
.preview-foto-capturada {
    display: flex; align-items: center; gap: 10px; margin-top: 8px;
}
.preview-foto-capturada img {
    width: 52px; height: 52px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--cor-borda);
}
.btn-remover-foto-capturada {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--cor-primaria); text-decoration: underline;
    text-underline-offset: 2px; font-size: 13px;
}

/* Modal de captura de foto pela câmera embutida (getUserMedia) -- um só
   componente reaproveitado por todos os campos de foto do sistema. */
.modal-captura-foto {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(0,0,0,.85);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.modal-captura-foto-conteudo {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    max-width: 100%;
}
#videoCapturaFoto {
    max-width: 90vw; max-height: 62vh; border-radius: var(--raio-md);
    background: #000;
}
.status-captura-foto { color: #fff; font-size: 13px; text-align: center; max-width: 90vw; }
.modal-captura-foto-acoes { display: flex; gap: 10px; }

/* Modais de ação rápida (Dar baixa / Manutenção / Empréstimo) na listagem
   de Patrimônios -- fundo mais claro que o de captura de foto (aqui é um
   formulário pra ler, não uma câmera em tela cheia). */
.modal-formulario {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(16,24,40,.55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.modal-formulario-conteudo {
    background: var(--cor-cartao); border-radius: var(--raio-lg);
    padding: 22px; max-width: 480px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 50px rgba(16,24,40,.3);
}
/* Variante mais larga -- usada em formulários com mais campos (ex: modal
   de Dar Baixa, que tem motivo + B.O. + documento + laudo + observação):
   em vez de empilhar tudo numa coluna estreita e crescer em altura (com
   barra de rolagem), aproveita a largura da tela pra colocar os campos
   lado a lado (ver .form-grid), mantendo a caixa mais baixa. */
.modal-formulario-largo { max-width: 960px; }
.modal-formulario-cabecalho {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 2px;
}
.modal-formulario-cabecalho h2 { margin: 0; font-size: 18px; }
.modal-formulario-fechar {
    background: none; border: none; cursor: pointer; font-size: 16px;
    color: var(--cor-texto-suave); line-height: 1; padding: 4px; flex-shrink: 0;
}
.modal-formulario-fechar:hover { color: var(--cor-texto); }
.modal-formulario-bem { font-weight: 600; margin: 8px 0 14px; }
.modal-formulario-acoes { display: flex; gap: 10px; margin-top: 4px; }

/* Conteúdo do modal "Visualizar": abas em cima (como pastas) + uma lista de
   linhas "rótulo: valor" por baixo -- organiza a quantidade de campos do
   bem sem virar um formulário gigante só de rolar. */
.abas-visualizar {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 1px solid var(--cor-borda); margin-bottom: 12px;
}
.aba-botao {
    background: none; border: none; cursor: pointer;
    padding: 8px 12px; margin-bottom: -1px;
    font-size: 13.5px; color: var(--cor-texto-suave);
    border-bottom: 2px solid transparent;
}
.aba-botao:hover { color: var(--cor-texto); }
.aba-botao.aba-ativa { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); font-weight: 600; }
.linha-visualizacao {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 8px 0; border-bottom: 1px solid var(--cor-borda); font-size: 13.5px;
}
.linha-visualizacao:last-child { border-bottom: none; }
.linha-visualizacao-label { color: var(--cor-texto-suave); flex-shrink: 0; }
.linha-visualizacao-valor { text-align: right; font-weight: 500; }

/* Painel "Mais opções" -- esconde controles secundários (testar som, gerar
   número, foto da etiqueta) atrás de um botão, pra não poluir a tela
   principal de leitura no celular. */
.btn-mais-opcoes, .btn-filtros-avancados {
    background: none; border: 1px solid var(--cor-borda); color: var(--cor-texto-suave);
    padding: 8px 14px; border-radius: var(--raio-md); font-size: 13.5px; cursor: pointer;
}
.btn-mais-opcoes:hover, .btn-filtros-avancados:hover { background: #f3f4f6; }
.painel-mais-opcoes {
    margin-top: 12px; padding: 14px; border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md); background: var(--cor-fundo);
    display: flex; flex-direction: column; gap: 16px;
}
.painel-mais-opcoes-titulo { display: block; font-size: 13.5px; margin-bottom: 6px; }

/* ===================================================================
   Responsivo (celular) -- o layout acima foi pensado pra tela de PC.
   Nas telas estreitas: o menu lateral vira uma gaveta que abre por
   cima do conteúdo (em vez de dividir o espaço), tabelas rolam por
   dentro de si mesmas em vez de estourar a página, e botões/campos
   ficam maiores para o toque.
   =================================================================== */
@media (max-width: 768px) {
    .app-header { padding: 0 12px; gap: 10px; }
    .app-header-subtitle { display: none; }
    .indicador-conexao-texto { display: none; }
    .chip-orgao-usuario-texto { display: none; }
    .chip-orgao-usuario { padding: 5px; }
    .chip-usuario-nome { display: none; }
    .chip-usuario { padding: 5px; }

    .app-sidebar,
    .app-sidebar.recolhida {
        position: fixed;
        top: 60px; left: 0; bottom: 0;
        width: 240px; max-width: 80vw;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 50;
        box-shadow: 2px 0 10px rgba(0,0,0,.25);
        overflow-y: auto;
    }
    /* No celular o menu nunca fica "só ícone" -- ou está fechado (fora da
       tela) ou aberto por completo, então o texto sempre aparece. */
    .app-sidebar.recolhida .texto { display: inline; }
    .app-sidebar.recolhida .sidebar-menu a { justify-content: flex-start; padding: 10px 12px; }
    .app-body.menu-aberto .app-sidebar { transform: translateX(0); }

    .sidebar-backdrop {
        display: none;
        position: fixed; top: 60px; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,.4);
        z-index: 40;
    }
    .app-body.menu-aberto .sidebar-backdrop { display: block; }

    .app-conteudo { padding: 16px; }
    .card { padding: 16px; }
    h1 { font-size: 20px; }

    /* Rolagem própria já é padrão agora (ver regra base de "table" acima) --
       aqui só reduz a fonte, que é a única diferença extra do celular. */
    table { font-size: 13px; }

    .form-grid { column-gap: 12px; }

    /* No celular a barra de filtros empilha em vez de espremer: cada campo
       ocupa a largura toda, e os botões vão junto, também de largura toda. */
    .campo-filtro-lg, .campo-filtro-sm, .campo-filtro-xl { flex-basis: 100%; }
    .campo-filtro-botoes { flex-basis: 100%; }
    .campo-filtro-botoes .btn { flex: 1; text-align: center; }
    .campo-busca-especifica { flex-wrap: wrap; }
    .campo-busca-especifica select { width: 100%; }

    /* A linha única de ferramentas (Filtros avançados/Colunas/Por página/
       paginação) some com o alinhamento à direita no celular -- fica
       espremida contra a borda. Alinha à esquerda e deixa cada item quebrar
       linha à vontade, mais fácil de tocar. */
    .barra-ferramentas-lista { justify-content: flex-start; }
    .barra-ferramentas-lista .paginacao.paginacao-inline { width: 100%; justify-content: center; }

    /* Alvos de toque maiores e campo de texto com 16px (evita o zoom
       automático que o iOS faz ao focar um campo com fonte menor). */
    .btn { padding: 10px 16px; font-size: 15px; }
    .form-grupo input, .form-grupo select, .form-grupo textarea { font-size: 16px; }

    #leitorCamera { max-width: 100%; }
    .card-tipo-selecionado { flex-wrap: wrap; }
    .grid-ajuda { grid-template-columns: 1fr; }
    .login-card { width: 100%; max-width: 340px; }
    .app-footer { justify-content: center; text-align: center; }
    .app-footer-usuario { margin: 0 auto; }

    /* Sem hover no celular -- o ícone de lupa fica sempre visível, já que é
       o único jeito de avisar que a foto é clicável nessas telas. */
    .foto-zoom::after { opacity: 1; }
}

/* ==========================================================================
   Assistente de Importação de Planilha (modules/importacao/nova.php +
   assets/js/importacao.js) -- 5 passos: enviar, mapear, resolver, verificar,
   confirmar. Reaproveita as variáveis de tema (--cor-primaria, --raio-*) e
   as classes de badge já existentes (.badge-ativo/.badge-em_manutencao/
   .badge-inativo) em vez de inventar cores novas -- ver notas em
   assets/js/importacao.js sobre essa escolha.
   ========================================================================== */

/* Ícone grande (upload, check de conclusão) -- mesma técnica de
   .icone-svg-menu/.icone-svg-sm (SVG + currentColor), só que maior, pros
   destaques do assistente (dropzone e tela final). */
.icone-svg-lg {
    width: 48px; height: 48px; display: inline-block;
    fill: none; stroke: currentColor; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
}

.imp-assistente { padding: 24px; }

/* Barra de passos no topo -- números em círculo ligados por uma linha,
   com o passo atual destacado e os concluídos marcados como "feitos".
   Puramente visual (o controle de qual passo mostrar é feito em JS
   escondendo/mostrando as seções .imp-passo). */
.imp-stepper {
    display: flex; list-style: none; margin: 0 0 26px; padding: 0;
    counter-reset: none;
}
.imp-stepper li {
    flex: 1; text-align: center; position: relative;
    font-size: 12.5px; color: var(--cor-texto-suave); font-weight: 600;
    padding-top: 38px;
}
.imp-stepper li::before {
    content: ''; position: absolute; top: 15px; left: -50%; width: 100%;
    height: 2px; background: var(--cor-borda); z-index: 0;
}
.imp-stepper li:first-child::before { display: none; }
.imp-stepper-num {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 30px; height: 30px; border-radius: 50%; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    background: var(--cor-fundo-sutil); border: 2px solid var(--cor-borda);
    color: var(--cor-texto-suave); font-size: 13px;
}
.imp-stepper li.atual { color: var(--cor-texto); }
.imp-stepper li.atual .imp-stepper-num {
    background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff;
}
.imp-stepper li.concluido .imp-stepper-num {
    background: #dcfce7; border-color: #15803d; color: #15803d;
}
.imp-stepper li.concluido::before { background: #15803d; opacity: .45; }

.imp-passo { margin-top: 4px; }

/* Área de arrastar-e-soltar -- estado normal e o estado "arrastando"
   (classe alternada via JS nos eventos dragenter/dragover/dragleave/drop)
   que destaca a borda pra dar feedback de que soltar ali funciona. */
.imp-dropzone {
    border: 2px dashed var(--cor-borda); border-radius: var(--raio-lg);
    padding: 48px 24px; text-align: center; cursor: pointer;
    color: var(--cor-texto-suave); background: var(--cor-fundo-sutil);
    transition: border-color .15s, background .15s;
}
.imp-dropzone:hover, .imp-dropzone:focus-visible {
    border-color: var(--cor-primaria); background: rgba(var(--cor-primaria-rgb), .05);
    outline: none;
}
.imp-dropzone.arrastando {
    border-color: var(--cor-primaria); background: rgba(var(--cor-primaria-rgb), .1);
}
.imp-dropzone .icone-svg-lg { color: var(--cor-primaria); margin-bottom: 10px; }
.imp-dropzone-titulo { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--cor-texto); }
.imp-dropzone-sub { margin: 0; font-size: 13px; }

.imp-arquivo-selecionado {
    display: flex; align-items: center; gap: 10px; margin-top: 14px;
    padding: 10px 14px; border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
    background: var(--cor-cartao); font-size: 13.5px;
}
.imp-arquivo-status { margin-left: auto; color: var(--cor-texto-suave); font-size: 13px; }

/* Passo 3 (resolução) monta um bloco por campo (localização, categoria,
   tipo de bem, responsável...), cada um com uma tabela (valor da planilha /
   ocorrências / vincular ou criar) -- a tabela em si usa o estilo genérico
   de "table" já definido acima, este bloco só dá a moldura de cartão e o
   título. */
.imp-bloco-resolucao {
    border: 1px solid var(--cor-borda); border-radius: var(--raio-md);
    padding: 16px; margin-bottom: 16px; background: var(--cor-cartao);
}
.imp-bloco-resolucao h3 { margin: 0 0 12px; font-size: 14.5px; }
.imp-bloco-resolucao table { border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); }
.imp-bloco-resolucao select { min-width: 200px; max-width: 100%; }

/* Cartões-resumo do passo 4 (prévia) -- reaproveita as mesmas cores de
   .badge-ativo (ok/verde), .badge-em_manutencao (aviso/âmbar) e
   .badge-inativo (erro/vermelho) já usadas no resto do sistema. */
.imp-resumo-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px; margin-bottom: 18px;
}
.imp-resumo-card {
    text-align: center; padding: 16px; border-radius: var(--raio-md);
    border: 1px solid var(--cor-borda);
}
.imp-resumo-card .imp-resumo-num { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.imp-resumo-card.ok { background: #dcfce7; border-color: #bbf7d0; }
.imp-resumo-card.ok .imp-resumo-num { color: #15803d; }
.imp-resumo-card.aviso { background: #fef3c7; border-color: #fde68a; }
.imp-resumo-card.aviso .imp-resumo-num { color: #b45309; }
.imp-resumo-card.erro { background: #fee2e2; border-color: #fecaca; }
.imp-resumo-card.erro .imp-resumo-num { color: #a8271e; }

/* Barra de progresso da execução (passo 5) -- preenchimento animado via
   JS ajustando a largura (%) a cada chunk processado. */
.imp-barra-progresso {
    width: 100%; height: 10px; border-radius: 999px; overflow: hidden;
    background: var(--cor-fundo-sutil); border: 1px solid var(--cor-borda);
    margin: 12px 0 6px;
}
.imp-barra-progresso-fill {
    height: 100%; background: var(--cor-primaria); border-radius: 999px;
    transition: width .25s ease;
}

.imp-resumo-final { margin: 0 0 14px; padding-left: 20px; color: var(--cor-texto-suave); font-size: 13.5px; }
.imp-resumo-final li { margin-bottom: 4px; }

.imp-erro:not([hidden]) {
    display: flex; gap: 10px; align-items: flex-start;
    background: #fee2e2; border: 1px solid #fecaca; color: #a8271e;
    border-radius: var(--raio-sm); padding: 12px 14px; margin-bottom: 18px;
    font-size: 13.5px;
}

#impBlocoResultado { text-align: center; padding: 12px 0; }
#impBlocoResultado h2 { margin: 10px 0 6px; }
#impBlocoResultado p { color: var(--cor-texto-suave); margin-bottom: 18px; }
#impBlocoResultado .btn { margin: 0 4px; }

.imp-acoes {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--cor-borda);
}
.imp-acoes .btn:only-child { margin-left: auto; }

@media (max-width: 640px) {
    .imp-stepper li { font-size: 0; padding-top: 34px; }
    .imp-stepper-num { font-size: 12px; }
    .imp-dropzone { padding: 32px 16px; }
}