/* Visual premium -- adaptação pro Sistema de Patrimônio.
 *
 * O kit "visual-premium" (trazido do sistema de filas) foi escrito pra
 * páginas Bootstrap 5 (nav.navbar, #sidebar, #mainContent, .form-control...).
 * Este sistema tem marcação própria (.app-header, .app-sidebar,
 * .app-conteudo, .form-grupo...), então o premium.css do kit não se aplica
 * direto: este arquivo traz os MESMOS princípios visuais pros seletores
 * daqui -- fundo cinza-claro com cartões brancos de borda fina, texto quase
 * preto, botão principal escuro, uma cor de destaque só (a da marca), menu
 * lateral escuro na cor da marca com filete no item ativo, letra Inter.
 *
 * Só vale com a classe "visual-premium" no <html> (ligada em
 * includes/header.php pela configuração "visual_premium") -- sem ela, nada
 * aqui tem efeito. As cores da marca/menu (--ui-*) chegam num <style>
 * calculado por includes/ui_tema.php a partir da cor do tema escolhido em
 * Configurações. O tema escuro do sistema mantém as próprias cores: aqui
 * ele só ganha a letra, o arranjo e os cantos.
 */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Base: letra, cantos e paleta clara ---------- */
html.visual-premium {
    --raio-sm: 8px; --raio-md: 12px; --raio-lg: 12px;
    --vp-sombra: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.02);
}
html.visual-premium body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; font-feature-settings: "cv11", "ss01"; }
html.visual-premium h1 { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
html.visual-premium h2, html.visual-premium h3 { letter-spacing: -.01em; }

html.visual-premium:not([data-tema="escuro"]) {
    --cor-fundo: #e9ebef;
    --cor-cartao: #ffffff;
    --cor-borda: #dcdfe5;
    --cor-fundo-sutil: #f6f7f9;
    --cor-texto: #09090b;
    --cor-texto-suave: #52525b;
    --cor-primaria: var(--ui-acc, #4b4f9e);
    --cor-primaria-rgb: var(--ui-acc-rgb, 75,79,158);
    --cor-primaria-escura: var(--ui-acc-t, #33366f);
    --cor-sidebar-fundo: var(--ui-sb-bg, #131733);
    --cor-sidebar-texto: var(--ui-sb-t2, #c5c8e6);
    --vp-tinta: #18181b;
}

/* ---------- Casca: menu lateral de cima a baixo, barra de cima branca ---------- */
@media (min-width: 769px) {
    html.visual-premium .app-wrapper {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
    }
    html.visual-premium .app-body { display: contents; }
    html.visual-premium .app-sidebar { grid-column: 1; grid-row: 1 / span 3; }
    html.visual-premium .app-header { grid-column: 2; grid-row: 1; }
    html.visual-premium .app-conteudo { grid-column: 2; grid-row: 2; padding: 28px 32px 40px; }
    html.visual-premium .app-footer { grid-column: 2; grid-row: 3; }
}

html.visual-premium:not([data-tema="escuro"]) .app-header {
    background: #ffffff; color: var(--cor-texto);
    border-bottom: 1px solid var(--cor-borda); box-shadow: none;
}
html.visual-premium .app-header { min-height: 56px; }
html.visual-premium .app-header-title strong { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
html.visual-premium:not([data-tema="escuro"]) .app-header-subtitle { color: #8a8a94; opacity: 1; }
html.visual-premium:not([data-tema="escuro"]) .btn-icon { color: #52525b; }
html.visual-premium:not([data-tema="escuro"]) .btn-icon:hover { background: #f4f4f5; }
html.visual-premium:not([data-tema="escuro"]) .chip-usuario {
    background: #ffffff; color: var(--cor-texto); border: 1px solid #e4e4e7; border-radius: 999px;
    box-shadow: var(--vp-sombra);
}
html.visual-premium:not([data-tema="escuro"]) .chip-usuario:hover,
html.visual-premium:not([data-tema="escuro"]) .chip-usuario[aria-expanded="true"] { background: #f4f4f5; }
html.visual-premium:not([data-tema="escuro"]) .indicador-conexao,
html.visual-premium:not([data-tema="escuro"]) .chip-orgao-usuario {
    background: #ffffff; color: #52525b; border: 1px solid #e4e4e7;
}
html.visual-premium:not([data-tema="escuro"]) .avatar-iniciais { background: var(--cor-primaria); color: #fff; }
html.visual-premium:not([data-tema="escuro"]) .app-header .btn-link { color: var(--cor-primaria); }

/* ---------- Menu lateral: cor da marca em tom escuro, filete no item ativo ---------- */
html.visual-premium .app-sidebar { border-right: 1px solid var(--ui-sb-borda, transparent); }
html.visual-premium .sidebar-menu { padding: 14px 10px; gap: 1px; }
html.visual-premium .sidebar-menu a { font-size: 13.5px; font-weight: 450; padding: 8px 12px; border-radius: 8px; position: relative; }
html.visual-premium:not([data-tema="escuro"]) .sidebar-menu a { color: var(--ui-sb-t2, #c5c8e6); }
html.visual-premium:not([data-tema="escuro"]) .sidebar-menu a:hover { background: var(--ui-sb-hover, rgba(255,255,255,.08)); color: var(--ui-sb-t1, #fafafa); }
html.visual-premium:not([data-tema="escuro"]) .sidebar-menu a.ativo {
    background: var(--ui-sb-sel, rgba(255,255,255,.12)); color: var(--ui-sb-sel-t, #fff); font-weight: 600;
}
html.visual-premium .sidebar-menu a.ativo::before {
    content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0;
    background: var(--ui-sb-filete, #c7ccff);
}
html.visual-premium:not([data-tema="escuro"]) .sidebar-menu a.ativo .icone-svg-menu { color: var(--ui-sb-sel-ic, #fff); }
html.visual-premium .sidebar-secao-titulo { font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 14px 12px 6px; }
html.visual-premium:not([data-tema="escuro"]) .sidebar-secao-titulo { color: var(--ui-sb-t3, rgba(255,255,255,.5)); }
html.visual-premium:not([data-tema="escuro"]) .sidebar-secao-titulo:hover { color: var(--ui-sb-t1, #fff); }
html.visual-premium .icone-svg-menu { stroke-width: 1.75; }

/* ---------- Cartões, seções e números ---------- */
html.visual-premium .card,
html.visual-premium .dashboard-secao {
    border: 1px solid var(--cor-borda); border-radius: 12px; box-shadow: var(--vp-sombra);
}
html.visual-premium .dashboard-secao { border-top: 1px solid var(--cor-borda); }
html.visual-premium .dashboard-secao-alertas { border-color: #fde68a; }
html.visual-premium .dashboard-secao-titulo { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
html.visual-premium:not([data-tema="escuro"]) .dashboard-secao-titulo { color: var(--cor-texto); }
html.visual-premium .dashboard-secao .grid-cards .card { border-color: var(--cor-borda); }
html.visual-premium .stat-card .valor { font-weight: 650; letter-spacing: -.02em; }
html.visual-premium:not([data-tema="escuro"]) .stat-card .valor { color: var(--cor-texto); }
html.visual-premium:not([data-tema="escuro"]) .dashboard-stat-destaque .valor { color: var(--cor-primaria); }
html.visual-premium .stat-card-link:hover { border-color: #c4c8d0; }

/* ---------- Botões: principal escuro; cor só onde significa algo ---------- */
html.visual-premium .btn { border-radius: 8px; font-weight: 550; font-size: 13.5px; box-shadow: none; }
html.visual-premium:not([data-tema="escuro"]) .btn:not([style*="background"]) { background: var(--vp-tinta); color: #fff; }
html.visual-premium:not([data-tema="escuro"]) .btn:not([style*="background"]):hover { background: #27272a; }
/* Botões "neutros" pintados de cinza direto no HTML (Cancelar, Voltar,
   exportações) viram botão claro -- mas com fundo cinza-claro e borda
   firme: brancos com borda fininha sumiam em cima dos cartões brancos. */
html.visual-premium:not([data-tema="escuro"]) .btn[style*="#6b7280"],
html.visual-premium:not([data-tema="escuro"]) .btn[style*="#4b5563"] {
    background: #eef0f3 !important; color: #18181b !important; border: 1px solid #9ca3af;
}
html.visual-premium:not([data-tema="escuro"]) .btn[style*="#6b7280"]:hover,
html.visual-premium:not([data-tema="escuro"]) .btn[style*="#4b5563"]:hover { background: #e2e5ea !important; border-color: #6b7280; }
/* Mesmo cuidado nos botões pequenos claros: "+" de cadastro rápido,
   "Colunas" e "Por página" das listas. */
html.visual-premium:not([data-tema="escuro"]) .btn-cadastro-rapido,
html.visual-premium:not([data-tema="escuro"]) .btn-colunas { border-color: #9ca3af; }
html.visual-premium:not([data-tema="escuro"]) .btn-colunas { background: #eef0f3; color: #3f3f46; }
/* O azul fixo dos botões de ação em lote passa a ser a cor da marca. */
html.visual-premium:not([data-tema="escuro"]) .btn[style*="#1e5aa8"] { background: var(--cor-primaria) !important; }
html.visual-premium .btn-texto { font-weight: 550; }
html.visual-premium .btn-colunas { border-radius: 8px; }
html.visual-premium .btn-acao { border-radius: 8px; }

/* ---------- Formulários ---------- */
html.visual-premium .form-grupo label { font-weight: 550; font-size: 13px; }
html.visual-premium .form-grupo input,
html.visual-premium .form-grupo select,
html.visual-premium .form-grupo textarea { border-radius: 8px; font-family: inherit; }
html.visual-premium:not([data-tema="escuro"]) .form-grupo input,
html.visual-premium:not([data-tema="escuro"]) .form-grupo select,
html.visual-premium:not([data-tema="escuro"]) .form-grupo textarea { border-color: #d4d4d8; background: #ffffff; }
html.visual-premium :focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* ---------- Tabelas ---------- */
html.visual-premium table { border-radius: 12px; }
html.visual-premium table th { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; }
html.visual-premium:not([data-tema="escuro"]) table th { background: #fafbfc; color: #52525b; }
html.visual-premium table th, html.visual-premium table td { padding: 11px 14px; }
html.visual-premium .link-ordenacao { font-weight: 600; }

/* ---------- Abas, selos, rodapé ---------- */
html.visual-premium .badge { font-weight: 600; border-radius: 999px; }
html.visual-premium .app-footer { font-size: 12.5px; }
html.visual-premium .menu-acoes-lista,
html.visual-premium .painel-colunas,
html.visual-premium .dropdown-usuario { border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.04); }
html.visual-premium .modal-formulario-conteudo { border-radius: 14px; }

/* ---------- Marca no topo do menu (ver .vp-marca em includes/sidebar.php) ---------- */
html.visual-premium .sidebar-menu a.vp-marca {
    display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; margin-bottom: 4px;
    font-weight: 650; font-size: 13px; line-height: 1.25; white-space: normal; letter-spacing: -.01em;
    color: var(--ui-sb-t1, #fafafa); border-radius: 0; border-bottom: 1px solid var(--ui-sb-line, rgba(255,255,255,.12));
}
html.visual-premium .sidebar-menu a.vp-marca:hover { background: none; }
html.visual-premium .vp-mk {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center;
    background: var(--ui-sb-mk, #fff); color: var(--ui-sb-mk-t, #18181b); font-size: 14px; font-weight: 700;
}
html.visual-premium .app-sidebar.recolhida:not(.aberta-hover) .sidebar-menu a.vp-marca { justify-content: center; padding: 4px 0 12px; }

/* ---------- Trilha e botão de busca na barra de cima (premium-patrimonio.js) ---------- */
html.visual-premium .ui-crumb { display: flex; align-items: center; gap: 8px; color: #8a8a94; white-space: nowrap; overflow: hidden; font-size: 14px; }
html.visual-premium .ui-crumb b { color: var(--cor-texto); font-weight: 550; overflow: hidden; text-overflow: ellipsis; }
html.visual-premium .ui-busca-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; width: 280px; max-width: 34vw; padding: 0 10px 0 12px;
    border: 1px solid var(--cor-borda); border-radius: 8px; background: var(--cor-cartao); color: #8a8a94;
    font: inherit; font-size: 13.5px; cursor: pointer; box-shadow: var(--vp-sombra);
}
html.visual-premium .ui-busca-btn:hover { border-color: var(--ui-acc-l, #c4c8d0); color: var(--cor-texto-suave); }
html.visual-premium .ui-busca-btn .icone-svg-menu { width: 16px; height: 16px; flex-shrink: 0; }
html.visual-premium .ui-kbd {
    margin-left: auto; font-size: 11px; color: var(--cor-texto-suave); border: 1px solid var(--cor-borda);
    border-radius: 5px; padding: 0 5px; background: var(--cor-fundo-sutil); font-family: inherit;
}
@media (max-width: 900px) {
    html.visual-premium .ui-busca-btn { width: 36px; padding: 0; justify-content: center; }
    html.visual-premium .ui-busca-btn span, html.visual-premium .ui-busca-btn .ui-kbd { display: none; }
}

/* ---------- Paleta de comandos (Ctrl+K) ---------- */
.ui-cmdk-fundo { position: fixed; inset: 0; background: rgba(9,9,11,.32); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 20000; display: none; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; opacity: 0; transition: opacity .15s ease; }
.ui-cmdk-fundo.aberto { display: flex; }
.ui-cmdk-fundo.visivel { opacity: 1; }
.ui-cmdk { width: 640px; max-width: 100%; background: var(--cor-cartao); border: 1px solid var(--cor-borda); border-radius: 14px; box-shadow: 0 30px 80px rgba(9,9,11,.28); overflow: hidden; transform: translateY(-6px) scale(.985); transition: transform .18s ease; color: var(--cor-texto); }
.ui-cmdk-fundo.visivel .ui-cmdk { transform: none; }
.ui-cmdk-topo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--cor-borda); color: #8a8a94; }
.ui-cmdk-topo input, .ui-cmdk-topo input:focus, .ui-cmdk-topo input:focus-visible { flex: 1; border: 0 !important; outline: 0 !important; box-shadow: none !important; font-size: 16px; font-family: inherit; color: var(--cor-texto); background: transparent; letter-spacing: -.01em; }
.ui-cmdk-topo .ui-kbd { margin-left: 0; }
.ui-cmdk-lista { max-height: min(56vh, 460px); overflow-y: auto; padding: 6px 0; scroll-padding: 8px; }
.ui-cmdk-grupo { font-size: 11.5px; font-weight: 600; color: #8a8a94; padding: 10px 16px 4px; }
.ui-cmdk-item { display: flex; align-items: center; gap: 12px; padding: 9px 16px; margin: 0 6px; border-radius: 8px; cursor: pointer; color: var(--cor-texto-suave); text-decoration: none; }
.ui-cmdk-item .ui-cmdk-ic { width: 28px; height: 28px; border-radius: 7px; background: var(--cor-fundo-sutil); display: grid; place-items: center; color: var(--cor-texto-suave); flex-shrink: 0; }
.ui-cmdk-item .ui-cmdk-ic .icone-svg-menu { width: 16px; height: 16px; vertical-align: 0; }
.ui-cmdk-item b { color: var(--cor-texto); font-weight: 500; }
.ui-cmdk-item small { margin-left: auto; color: #8a8a94; font-size: 12px; white-space: nowrap; padding-left: 12px; }
.ui-cmdk-item.sel { background: var(--cor-fundo-sutil); }
.ui-cmdk-item.sel .ui-cmdk-ic { background: var(--cor-cartao); color: var(--cor-texto); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.ui-cmdk-item mark { background: none; color: var(--cor-texto); font-weight: 650; padding: 0; }
.ui-cmdk-vazio { padding: 28px 16px; text-align: center; color: #8a8a94; }
.ui-cmdk-pe { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--cor-borda); font-size: 12px; color: #8a8a94; background: var(--cor-fundo-sutil); }
.ui-cmdk-pe .ui-kbd { margin: 0 4px 0 0; }
/* ---------- Modo escuro com o visual premium ligado ----------
   O menu e a barra de cima voltam às cores do tema escuro; a marca e a
   trilha não podem ficar com as cores pensadas pro menu/barra claros. */
html.visual-premium[data-tema="escuro"] .sidebar-menu a.vp-marca { color: #fafafa; border-bottom-color: rgba(255,255,255,.12); }
html.visual-premium[data-tema="escuro"] .vp-mk { background: #fff; color: #18181b; }
html.visual-premium[data-tema="escuro"] .ui-crumb { color: rgba(255,255,255,.88); }
html.visual-premium[data-tema="escuro"] .ui-crumb b { color: #fff; }

/* ---------- Marca em duas linhas: sistema em cima, organização embaixo ----------
   O nome da organização costuma ser comprido: quebra em até 3 linhas em vez
   de cortar. Tamanho escolhido em Aparência (vp-tam-p | m | g). */
html.visual-premium .sidebar-menu a.vp-marca { align-items: flex-start; }
html.visual-premium .vp-marca-nomes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.visual-premium .vp-marca-sistema { font-size: var(--vp-marca-fs, 14px); font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; }
html.visual-premium .vp-marca-organizacao {
    font-size: calc(var(--vp-marca-fs, 14px) * .78); font-weight: 500; line-height: 1.3; letter-spacing: 0; opacity: .72;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere;
}
html.visual-premium .vp-marca.vp-tam-p { --vp-marca-fs: 12.5px; }
html.visual-premium .vp-marca.vp-tam-m { --vp-marca-fs: 14px; }
html.visual-premium .vp-marca.vp-tam-g { --vp-marca-fs: 16px; }
html.visual-premium .app-footer.rodape-tam-p { font-size: 11.5px; }
html.visual-premium .app-footer.rodape-tam-m { font-size: 12.5px; }
html.visual-premium .app-footer.rodape-tam-g { font-size: 14.5px; }/* Marca centralizada (Aparência > alinhamento): a letra em cima, os nomes embaixo, tudo no meio. */
html.visual-premium .sidebar-menu a.vp-marca.vp-alin-c { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
html.visual-premium .vp-marca.vp-alin-c .vp-marca-nomes { align-items: center; }