/* Patrimônio SEMIF: estilo único do front (index.html).
   Ordem importa: regras com a mesma especificidade valem pela última. Media queries ficam no fim de propósito. */

/* ========== 0. Fontes (self-hosted: a CSP só aceita 'self'; licenças OFL em fontes/) ========== */
@font-face {
  font-family: "Bricolage Grotesque"; src: url("/fontes/BricolageGrotesque.ttf") format("truetype");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
}
@font-face {
  font-family: "Red Hat Mono"; src: url("/fontes/RedHatMono.ttf") format("truetype");
  font-weight: 300 700; font-display: swap;
}

/* ========== 1. Tokens e temas ========== */
:root {
  color-scheme: light;
  --sans: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Red Hat Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --bg: #f1f8ff; --surface: #fcfeff; --surface-2: #d8dfe6; --border: #bec5cc; --campo: #646a70;
  --text: #0d1217; --muted: #484e53;
  --primary: #1f4e79; --primary-hover: #183f62; --on-primary: #fff;
  --accent: #15456f; --accent-soft: #e2ebf4; --focus: #32618d;
  --header: #1f4e79;
  --ok: #067647; --ok-soft: #e6f5ec;
  --warn: #93370d; --warn-soft: #fff3e3;
  --danger: #b42318; --danger-soft: #fdebe9;
  --tom: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); /* área agrupada / hover de linha */
  --flutua: 0 2px 6px rgb(13 18 23 / .08), 0 16px 40px rgb(13 18 23 / .16); /* só diálogo, menu e botão fixo */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --r: 14px; --r-ctrl: 6px;
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --bg: #02060d; --surface: #0a1017; --surface-2: #222a33; --border: #3b434d; --campo: #7d8793;
  --text: #e4ecf5; --muted: #989fa8;
  --primary: #2d679f; --primary-hover: #407ab3; --on-primary: #fff;
  --accent: #8dbbe8; --accent-soft: #12253a; --focus: #8dbbe8;
  --header: #132a40;
  --ok: #5cc994; --ok-soft: #12291e;
  --warn: #f0a663; --warn-soft: #2d2013;
  --danger: #f7796e; --danger-soft: #331916;
  --flutua: 0 0 0 1px var(--border), 0 16px 40px rgb(0 0 0 / .5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --bg: #02060d; --surface: #0a1017; --surface-2: #222a33; --border: #3b434d; --campo: #7d8793;
    --text: #e4ecf5; --muted: #989fa8;
    --primary: #2d679f; --primary-hover: #407ab3; --on-primary: #fff;
    --accent: #8dbbe8; --accent-soft: #12253a; --focus: #8dbbe8;
    --header: #132a40;
    --ok: #5cc994; --ok-soft: #12291e;
    --warn: #f0a663; --warn-soft: #2d2013;
    --danger: #f7796e; --danger-soft: #331916;
    --flutua: 0 0 0 1px var(--border), 0 16px 40px rgb(0 0 0 / .5);
  }
}

/* ========== 2. Base / reset ========== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--border) transparent; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/1.5 var(--sans);
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.015em; line-height: 1.1; text-wrap: balance; }
::selection { background: var(--accent-soft); color: var(--text); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }

/* Rótulo de seção: quadrado azul + mono maiúsculo. Uma vez por tela, acima do título. */
.sobre {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font: 500 12.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.sobre::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--primary); }

/* Campos */
input, select, textarea {
  width: 100%; font: inherit; font-size: 16px; color: inherit; background: var(--surface);
  border: 1px solid var(--campo); border-radius: var(--r-ctrl); padding: 12px 14px; min-height: 48px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
select {
  appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23828a92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 20px;
}
input:disabled, select:disabled, textarea:disabled { background: var(--tom); color: var(--muted); border-color: var(--border); cursor: not-allowed; }
/* Depois do :focus: campo inválido continua vermelho mesmo focado. */
input:user-invalid, select:user-invalid { border-color: var(--danger); }
input:user-invalid:focus, select:user-invalid:focus { outline-color: var(--danger); }
label, .rotulo { display: block; font-size: 14px; font-weight: 600; margin: 22px 0 8px; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-size: 14px; font-weight: 600; margin: 22px 0 4px; padding: 0; }

/* Botões */
button {
  font: inherit; font-weight: 600; border: 0; border-radius: var(--r-ctrl); padding: 0 18px; min-height: 48px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: inherit; background: none;
  touch-action: manipulation; transition: background-color .15s, color .15s, box-shadow .15s, transform .12s var(--ease), opacity .15s;
}
button:active:not(:disabled), .botoes-foto label:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }

/* ========== 3. Layout ========== */
header {
  position: sticky; top: 0; z-index: 5; background: var(--header); color: #fff;
  padding-top: env(safe-area-inset-top);
}
.topo { max-width: 1200px; margin: auto; height: 56px; padding: 0 16px; display: flex; align-items: center; gap: 8px; }
header h1 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin: 0; flex: 1; min-width: 0; white-space: nowrap; display: flex; align-items: center; gap: 12px; overflow: hidden; }
#total { font: 500 13px/1 var(--mono); background: rgb(255 255 255 / .14); padding: 5px 8px; border-radius: var(--r-ctrl); font-variant-numeric: tabular-nums; }
#total:empty { display: none; }
.topo button {
  display: inline-flex; align-items: center; gap: 8px; color: #fff; background: rgb(255 255 255 / .1);
  padding: 0 14px; height: 44px; min-height: 0; border-radius: var(--r-ctrl); font-size: 15px; font-weight: 500;
}
.topo .i { width: 18px; height: 18px; }
#tema { width: 44px; padding: 0; }
.topo .novo-topo { background: #fff; color: #1f4e79; font-weight: 600; margin-left: 4px; }
.topo :focus-visible { outline-color: #fff; }
#eu-nome { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Seletor de secretaria no topo: mesmo peso visual dos botões do topo. */
#ver {
  width: auto; max-width: 11rem; min-height: 44px; padding: 0 34px 0 12px; font: 500 16px var(--mono); letter-spacing: .02em; /* 16px: o iOS não dá zoom ao focar */
  color: #fff; background-color: rgb(255 255 255 / .1); border: 0; border-radius: var(--r-ctrl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-size: 18px; background-position: right 10px center;
}
#ver:focus { outline: 2px solid #fff; outline-offset: 2px; }
#ver option { color: var(--text); background: var(--surface); }

main { max-width: 1200px; margin: auto; padding: 24px 16px calc(112px + env(safe-area-inset-bottom)); }

/* Topo de cada tela: rótulo + título grande à esquerda, ações à direita. */
.tela-topo, .lista-topo { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 24px; }
.titulo { flex: 1; min-width: 0; }
.titulo h2:not(.sobre) { margin: 0; font-size: clamp(30px, 2.4vw + 18px, 44px); letter-spacing: -.02em; }
.tela-topo .sec[data-tela] { width: 48px; padding: 0; flex: none; }
.tela-topo .sec { flex: none; }
.contador { margin: 0 0 6px; font: 500 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.contador b { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Barra de ações fixa no rodapé (formulário). */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; background: var(--surface);
  border-top: 1px solid var(--border); padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
.barra div { max-width: 1200px; margin: auto; display: flex; gap: 8px; }
.barra button { flex: 1; }

/* ========== 4. Componentes ========== */
/* Ícone SVG (sprite no topo do index.html) */
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

/* Variações de botão */
.primario { background: var(--primary); color: var(--on-primary); }
.sec { background: var(--surface); box-shadow: inset 0 0 0 1px var(--campo); }
a.sec { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-ctrl); color: var(--text); font-weight: 600; text-decoration: none; }
.perigo { color: var(--danger); background: var(--danger-soft); width: 100%; margin-top: 32px; }

/* Dica abaixo do rótulo */
.dica { display: block; font-size: 14px; font-weight: 400; color: var(--muted); margin: -2px 0 8px; }
label + .dica { margin-top: -4px; }

/* Busca e filtros */
.ferramentas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.busca { position: relative; flex: 1 1 320px; }
.busca .i { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--muted); }
.busca input { padding-left: 44px; }
.filtros { display: flex; gap: 6px; flex: 0 0 auto; overflow-x: auto; scrollbar-width: none; }
.filtros button {
  min-height: 44px; padding: 0 16px; font-size: 15px; font-weight: 500; white-space: nowrap; border-radius: 999px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); color: var(--text);
}
.filtros button.ativo { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.filtros span { font: 500 13px var(--mono); font-variant-numeric: tabular-nums; opacity: .8; }

/* Card (itens, usuários, secretarias): base neutra; cada lista dá sua composição na seção 5. */
.card {
  display: flex; align-items: flex-start; gap: 16px; text-align: left; width: 100%; padding: 16px; min-height: 0;
  background: var(--surface); border-radius: var(--r); font-weight: 400; position: relative;
  content-visibility: auto; contain-intrinsic-size: auto 100px;
}
.card img, .card .semfoto { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-ctrl); background: var(--surface-2); flex: none; }
.card .semfoto { display: grid; place-items: center; color: var(--muted); }
.card-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.card-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.num { font-size: 18px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.antigo { font: 500 12px/1.5 var(--mono); letter-spacing: .03em; color: var(--accent); background: var(--accent-soft); padding: 1px 8px; border-radius: var(--r-ctrl); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.meta { font-size: 13.5px; color: var(--muted); }
.desc { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* Estado vazio: texto grande alinhado à esquerda e um fio embaixo (sem ilustração). */
.vazio {
  grid-column: 1 / -1; text-align: left; color: var(--muted); max-width: 40rem;
  padding: 40px 0 48px; border-bottom: 1px solid var(--border); font-size: 18px; line-height: 1.45;
}
.vazio .i { display: none; }
.vazio b { display: block; color: var(--text); font-size: clamp(22px, 1.6vw + 14px, 30px); font-weight: 500; line-height: 1.22; letter-spacing: -.015em; margin-bottom: 14px; }

/* Botão fixo "Novo item" (celular) */
.fab {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 4;
  min-height: 56px; font-size: 17px; box-shadow: var(--flutua);
}

/* Mensagens abaixo dos campos */
.ok, .aviso, .rel {
  line-height: 1.4;
  display: flex; align-items: flex-start; gap: 8px; font-size: 14px; margin-top: 6px; padding: 8px 10px; border-radius: var(--r-ctrl);
  animation: surgir .2s var(--ease);
}
.ok .i, .aviso .i, .rel .i { width: 18px; height: 18px; margin-top: 1px; }
.ok { color: var(--ok); padding: 4px 2px; }
.ok.carregando { color: var(--muted); }
.aviso { background: var(--danger-soft); color: var(--danger); flex-wrap: wrap; }
.aviso span { flex: 1; min-width: 60%; }
.aviso button { min-height: 34px; padding: 0 14px; background: var(--danger); color: var(--danger-soft); font-size: 14px; } /* branco sobre o vermelho claro do tema escuro não passa AA */
.rel { background: var(--accent-soft); color: var(--accent); }
.rel.nao { background: var(--warn-soft); color: var(--warn); }

/* Toast */
#toast {
  position: fixed; top: calc(env(safe-area-inset-top) + 68px); left: 50%; z-index: 6; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 10px; background: #0f5132; color: #fff; padding: 12px 18px; border-radius: var(--r-ctrl);
  font-weight: 500; box-shadow: var(--flutua);
  translate: -50% -8px; opacity: 0; pointer-events: none; transition: opacity .18s, translate .18s var(--ease);
}
#toast.show { translate: -50% 0; opacity: 1; transition-duration: .24s; }
#toast.erro { background: #b42318; } /* erro não pode usar o verde de sucesso; branco sobre ele = 6.5:1 */

/* Menu da conta: painel lateral (popover — clique no nome abre/fecha, fora ou Esc fecha) */
#menu {
  inset: 0 0 0 auto; margin: 0; width: min(320px, 86vw); height: 100dvh; max-height: none;
  padding: calc(env(safe-area-inset-top) + 16px) 8px calc(env(safe-area-inset-bottom) + 16px);
  border: 0; border-left: 1px solid var(--border); border-radius: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--text); box-shadow: var(--flutua);
}
#menu:popover-open { animation: lateral .22s var(--ease); }
#menu::backdrop { background: rgb(2 6 13 / .45); }
#menu:popover-open::backdrop { animation: fundo .2s linear; }
#menu :is(a, button) {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px; border-radius: var(--r-ctrl);
  justify-content: flex-start; color: var(--text); text-decoration: none; font-weight: 500;
}
#menu [aria-current] { font-weight: 600; color: var(--accent); }
#menu [aria-current]::after { content: ""; width: 8px; height: 8px; margin-left: auto; background: var(--primary); }
#menu .p-relatorios:first-of-type, #menu [data-tela="perfil"] { border-top: 1px solid var(--border); margin-top: 6px; border-radius: 0 0 var(--r-ctrl) var(--r-ctrl); }

/* Diálogos */
dialog {
  width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overscroll-behavior: contain; padding: 28px; border: 0; border-radius: var(--r);
  background: var(--surface); color: var(--text); box-shadow: var(--flutua);
}
dialog[open] { animation: subir .24s var(--ease); }
dialog::backdrop { background: rgb(2 6 13 / .55); }
dialog[open]::backdrop { animation: fundo .2s linear; }
dialog h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.dialog-botoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 28px; }
/* Diálogos longos (usuário, secretaria): botões sempre à vista. */
dialog form .dialog-botoes { position: sticky; bottom: -28px; margin: 28px -28px -28px; padding: 16px 28px; background: var(--tom); border-top: 1px solid var(--border); }

/* Caixa de seleção com rótulo */
.check { display: flex; align-items: center; gap: 12px; margin: 0; padding: 7px 0; font-weight: 500; cursor: pointer; }
.check input { width: 20px; height: 20px; min-height: 0; padding: 0; flex: none; accent-color: var(--primary); }
fieldset + .check { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
dialog .check { min-height: 44px; }
.check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Foto ampliada: tela cheia, clique ou Esc fecha. No celular dá para dar zoom com dois dedos. */
.zoom { cursor: zoom-in; }
#zoom { width: 100%; height: 100%; max-width: none; max-height: none; padding: 0; border-radius: 0; background: none; box-shadow: none; animation-name: fundo; }
#zoom::backdrop { background: rgb(0 0 0 / .92); }
#zoom img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-out; }
#zoom button {
  position: fixed; top: calc(env(safe-area-inset-top) + 12px); right: 12px; width: 48px; min-height: 48px; padding: 0;
  border-radius: 999px; background: rgb(255 255 255 / .16); color: #fff;
}

/* Eventos (auditoria, histórico): linhas abertas separadas por fio; transferências viram card na seção 5. */
.eventos { display: grid; gap: 8px; }
#eventos, #historico { gap: 0; border-top: 1px solid var(--border); }
.evento { padding: 20px 0; border-bottom: 1px solid var(--border); font-size: 15px; position: relative; content-visibility: auto; contain-intrinsic-size: auto 90px; }
.ev-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ev-topo time { margin-left: auto; color: var(--muted); font: 500 13.5px var(--mono); font-variant-numeric: tabular-nums; }
.evento > .meta { margin-top: 4px; font-size: 14.5px; }
.alvo { min-height: 44px; padding: 0; color: var(--accent); font: 500 17px var(--mono); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; font-variant-numeric: tabular-nums; }
.tag { font: 500 11.5px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-ctrl); background: var(--tom); color: var(--muted); }
.tag.cadastrou, .tag.restaurou { background: var(--ok-soft); color: var(--ok); }
.tag.editou { background: var(--accent-soft); color: var(--accent); }
.tag.excluiu, .tag.apagou, .tag.inativo { background: var(--danger-soft); color: var(--danger); }
.tag.pendente { background: var(--warn-soft); color: var(--warn); }
.tag.concluida, .tag.aceita { background: var(--ok-soft); color: var(--ok); }
.tag.recusada, .tag.cancelada {background: var(--danger-soft); color: var(--danger); }
.mudancas { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; overflow-wrap: anywhere; font-size: 14.5px; }
.mudancas li { padding-left: 16px; position: relative; }
.mudancas li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--border); }
.mudancas b { font-weight: 600; }
.mudancas s { color: var(--muted); }
.mini { width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-ctrl); vertical-align: middle; background: var(--surface-2); }

/* ========== 5. Telas específicas ========== */
/* Login: rótulo, título em duas linhas com a palavra em azul, apoio e o formulário (referência: herói centralizado). */
/* Celular: título no alto, formulário ancorado no terço inferior (como os botões da referência). */
#login { display: flex; flex-direction: column; align-items: flex-start; min-height: calc(100dvh - 56px - env(safe-area-inset-top)); padding-top: 6vh; padding-bottom: calc(12vh + env(safe-area-inset-bottom)); }
#login h2 { margin: 0; font-size: clamp(44px, 4vw + 20px, 64px); line-height: 1.02; letter-spacing: -.025em; max-width: 14ch; }
#login h2 em { font-style: normal; color: var(--accent); }
#login .apoio { margin: 20px 0 0; font-size: 17px; color: var(--muted); max-width: 34ch; text-wrap: balance; }
#login .login { width: 100%; max-width: 520px; margin: auto 0 0; padding-top: 32px; }
/* Login em duas etapas: secretaria escolhida em ficha, senha com olho, aviso em card dentro do form. */
#login .sobre { margin: 0 0 -10px; }
.l-escolhida {
  display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 12px 12px 12px 16px;
  background: var(--tom); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--border);
}
.l-escolhida > span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.l-escolhida .meta { font: 500 12px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.l-escolhida b { font-weight: 600; overflow-wrap: anywhere; }
.login .l-escolhida button { width: auto; margin: 0; min-height: 44px; padding: 0 16px; flex: none; }
.l-senha { position: relative; }
.l-senha input { padding-right: 52px; }
.login .l-senha button {
  position: absolute; right: 2px; top: 2px; bottom: 2px; width: 44px; min-height: 0; margin: 0; padding: 0; color: var(--muted);
}
#f-login .check { margin-top: 16px; min-height: 44px; font-weight: 500; }
#l-aviso:not(:empty) { margin-top: 20px; }
#l-aviso .aviso { margin: 0; padding: 14px 16px; gap: 10px; border-radius: var(--r); font-size: 15px; }
#l-aviso .aviso > span { display: grid; gap: 2px; }
#l-aviso .aviso b { font-weight: 600; }
.login #l-aviso button { width: auto; margin: 6px 0 0 28px; min-height: 40px; }

/* Lista de itens: grade de células com fio de 1px (referência: tabela de clientes). */
#lista .ferramentas { background: var(--tom); padding: 8px; border-radius: var(--r); }
#lista .busca input { border-color: var(--border); }
#itens {
  display: grid; grid-template-columns: 1fr; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
}
#itens:has(.vazio) { background: none; border: 0; border-radius: 0; }
#itens .card {
  border-radius: 0; background: none; padding: 18px 16px; min-height: 96px; box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border);
}
#itens .card:active { transform: none; }
#itens .num { font: 500 14px var(--mono); letter-spacing: .04em; color: var(--accent); }
#itens .antigo { background: none; padding: 0; color: var(--muted); }
#itens .desc { order: -1; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }

/* Formulário do item: coluna de mídia (foto principal + miniaturas) e coluna de campos em linhas de ficha. */
#titulo { font-size: clamp(32px, 2.6vw + 18px, 48px); letter-spacing: -.025em; margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 24px; }
.fotos:empty { display: none; }
.fotos div { position: relative; animation: foto .5s var(--ease); }
.fotos div:first-child { grid-column: 1 / -1; }
.fotos img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; border-radius: var(--r-ctrl); display: block; background: var(--surface-2); }
.fotos div:first-child img { aspect-ratio: 7 / 5; border-radius: var(--r); }
.fotos button {
  position: absolute; top: 6px; right: 6px; min-height: 0; width: 32px; height: 32px; padding: 0;
  border-radius: 999px; background: rgb(0 0 0 / .62); color: #fff;
}
.fotos div:first-child button { top: 12px; right: 12px; }
.fotos button .i { width: 16px; height: 16px; }
/* Botões pequenos (32-34px): área de toque de 44px sem mudar o visual. */
.aviso button { position: relative; }
.fotos button::after, .aviso button::after { content: ""; position: absolute; inset: -6px; }
.botoes-foto { display: flex; gap: 8px; margin-top: 12px; }
.botoes-foto label {
  flex: 1; margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px;
  border-radius: var(--r-ctrl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--campo); cursor: pointer; color: var(--accent);
  transition: background-color .15s, transform .12s var(--ease);
}
.botoes-foto label:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.sem-fotos {
  margin: 24px 0 0; aspect-ratio: 7 / 5; display: grid; place-items: center; padding: 16px; text-align: center;
  color: var(--muted); font: 500 13px var(--mono); letter-spacing: .06em; text-transform: uppercase;
  background: var(--tom); border: 1px solid var(--border); border-radius: var(--r);
}
.fotos:not(:empty) + .sem-fotos { display: none; }
#form .col-campos > :is(label, .rotulo) {
  font: 500 12.5px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  border-top: 1px solid var(--border); padding-top: 18px; margin-top: 22px;
}
.antigos-linha + .antigos-linha { margin-top: 8px; }
.mais { color: var(--accent); padding: 0 4px; min-height: 44px; margin-top: 4px; }
.historico h3 { font: 500 12.5px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 40px 0 0; padding-bottom: 12px; }

/* Transferências: título e ação à esquerda, termos como cards empilhados com o nº grande em mono. */
#lista-transf { gap: 20px; }
#lista-transf .evento {
  padding: 24px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
}
#lista-transf .ev-topo h3 {
  order: -1; flex: 1 1 100%; margin: 0 0 8px; font: 500 clamp(24px, 1.4vw + 16px, 34px)/1.05 var(--mono);
  letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums;
}
#lista-transf .evento > .meta { margin-top: 12px; font-size: 16px; color: var(--text); }
#lista-transf .mudancas { border-top: 1px solid var(--border); padding-top: 12px; }
#lista-transf .mudancas b { font: 500 14px var(--mono); color: var(--accent); }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.acoes button { min-height: 44px; font-size: 14.5px; padding: 0 14px; }
/* Nº do termo: prefixo TTI/TTE colado no campo */
.numero-termo { display: flex; }
.numero-termo output {
  display: grid; place-items: center; flex: none; min-width: 68px; padding: 0 12px; font: 600 15px var(--mono); letter-spacing: .06em;
  background: var(--primary); color: var(--on-primary); border-radius: var(--r-ctrl) 0 0 var(--r-ctrl);
}
.numero-termo input { border-radius: 0 var(--r-ctrl) var(--r-ctrl) 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* Lista de bens para transferir */
#nt-itens {
  max-height: min(55vh, 520px); overflow: auto; overscroll-behavior: contain; margin-top: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-ctrl);
}
#nt-itens .check { align-items: flex-start; min-height: 52px; padding: 12px 14px; font-weight: 400; transition: background-color .15s; }
#nt-itens .check + .check { border-top: 1px solid var(--border); }
#nt-itens .check:has(:checked) { background: var(--accent-soft); }
#nt-itens .check input { margin-top: 1px; }
#nt-itens .check > span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
#nt-itens .check b { font: 500 14px var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; }
#nt-itens:not(:has(.check:not([hidden])))::after {
  content: "Nenhum bem disponível com esse filtro."; display: block; padding: 32px 16px; color: var(--muted);
}
.enviar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.enviar output { color: var(--muted); font: 500 13.5px var(--mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
/* Nova transferência: título centralizado com fio, formulário num painel tonal. */
#nova-transf .tela-topo { padding-bottom: 24px; border-bottom: 1px solid var(--border); margin-bottom: 32px; }
#f-transf { max-width: 760px; margin: auto; background: var(--tom); padding: 8px 20px 24px; border-radius: var(--r-ctrl); }
#f-transf > .meta { margin: 16px 0 0; }

/* Usuários: linhas abertas com índice mono U-01 (referência: lista de perguntas numeradas). */
#lista-usuarios { gap: 0; border-top: 1px solid var(--border); counter-reset: u; }
#lista-usuarios .card {
  border-radius: 0; background: none; border-bottom: 1px solid var(--border); padding: 20px 8px; align-items: baseline; gap: 20px;
  content-visibility: visible; /* auto isola o contador: todos viravam U-01 */
}
#lista-usuarios .card::before {
  counter-increment: u; content: "U-" counter(u, decimal-leading-zero);
  flex: none; width: 3.5rem; font: 500 13px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums;
}
#lista-usuarios .card-top .meta { font-family: var(--mono); font-size: 13px; }

/* Secretarias: cards de comparação com a sigla grande e linhas de ficha (referência: planos lado a lado). */
#lista-secretarias { gap: 20px; }
#lista-secretarias .card {
  flex-direction: column; align-items: stretch; padding: 28px; border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--border); min-height: 220px;
}
#lista-secretarias .card[aria-current] { box-shadow: inset 0 0 0 2px var(--primary); }
#lista-secretarias .card[aria-current]::after {
  content: "Sua secretaria"; position: absolute; top: 24px; right: 24px; padding: 4px 8px; border-radius: var(--r-ctrl);
  font: 500 11.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--primary); color: var(--on-primary);
}
#lista-secretarias .card-top { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
#lista-secretarias .num { font-size: clamp(32px, 1.5vw + 22px, 40px); font-weight: 700; letter-spacing: -.025em; }
#lista-secretarias :is(.desc, .meta) { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }
#lista-secretarias .desc { font-size: 16px; color: var(--muted); -webkit-line-clamp: 3; }
#lista-secretarias .meta { font-size: 15px; color: var(--text); }
#sec-prefixo { text-transform: uppercase; max-width: 6rem; font-family: var(--mono); }

/* Meu perfil: rótulo à esquerda, título e ficha à direita (referência: estúdio). */
.login > .meta { font-size: 16px; margin: 12px 0 0; }
.login button { width: 100%; margin-top: 28px; }
.login button + button { margin-top: 8px; }
#f-perfil { max-width: 560px; margin: 4vh auto 0; }
#f-perfil h2 { margin: 0; font-size: clamp(32px, 2vw + 22px, 44px); font-weight: 500; letter-spacing: -.02em; }
#f-perfil > label { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 22px; font: 500 12.5px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
#f-perfil > label:first-of-type { margin-top: 32px; }
.perfil-lado { margin-bottom: 28px; }
.pessoa { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.pessoa > span:last-child { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pessoa #p-funcao { font-size: 14px; color: var(--muted); }
.avatar { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 16px var(--mono); }
.marca { margin: 40px 0 0; font: 500 12.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.marca span { margin-left: 8px; color: var(--accent); }
.faixa-lado { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.faixa-lado .sec { width: 48px; padding: 0; flex: none; }
.faixa-lado .sobre { margin: 0; }
#nova-transf h2 { margin: 0; font-size: clamp(30px, 2.4vw + 18px, 44px); letter-spacing: -.02em; }

/* ========== 6. Utilitários ========== */
/* Só para leitor de tela */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Sprite de ícones: fora do fluxo */
.sprite { position: absolute; }

/* ========== 7. Permissões ========== */
/* O servidor barra de verdade; aqui só esconde o que o usuário não pode usar. */
body:not([data-perm]) .logado,
body:not([data-perm~=cadastrar]) .p-cadastrar, body:not([data-perm~=excluir]) .p-excluir,
body:not([data-perm~=relatorios]) .p-relatorios, body:not([data-perm~=auditoria]) .p-auditoria,
body:not([data-perm~=usuarios]) .p-usuarios, body:not([data-perm~=secretarias]) .p-secretarias,
body:not([data-perm~=transferir]) .p-transferir, #form.ler .editavel { display: none !important; }

/* ========== 8. Animações ========== */
/* Entradas e revelações por rolagem ficam em js/movimento.js (Web Animations); aqui só o que é CSS puro. */
@keyframes surgir { from { opacity: 0; translate: 0 -4px; } }
@keyframes lateral { from { translate: 100% 0; } }
@keyframes subir { from { opacity: 0; translate: 0 16px; } }
@keyframes fundo { from { opacity: 0; } }
@keyframes foto { from { opacity: 0; scale: 1.02; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: var(--ease); }

/* ========== 9. Media queries ========== */
/* Só com mouse: hover não "gruda" no toque. */
@media (hover: hover) and (pointer: fine) {
  .primario:hover:not(:disabled) { background: var(--primary-hover); }
  .sec:hover { background: var(--tom); }
  .login .l-senha button:hover { color: var(--text); }
  .topo button:hover { background: rgb(255 255 255 / .2); }
  .topo .novo-topo:hover { background: #e2ebf4; }
  #ver:hover { background-color: rgb(255 255 255 / .2); }
  .filtros button:not(.ativo):hover { box-shadow: inset 0 0 0 1px var(--campo); }
  #itens .card:hover, #lista-usuarios .card:hover { background: var(--tom); }
  #lista-secretarias .card:hover { box-shadow: inset 0 0 0 1px var(--campo); }
  #lista-secretarias .card[aria-current]:hover { box-shadow: inset 0 0 0 2px var(--primary-hover); }
  .botoes-foto label:hover { background: var(--accent-soft); }
  #menu :is(a, button):hover { background: var(--tom); }
  #nt-itens .check:hover { background: var(--tom); }
  #nt-itens .check:has(:checked):hover { background: var(--accent-soft); }
}

/* Tablet */
@media (min-width: 640px) {
  .topo { height: 64px; }
  #itens { grid-template-columns: repeat(2, 1fr); }
  #itens .card { flex-direction: row-reverse; padding: 22px 24px; min-height: 140px; }
  #itens .card img, #itens .card .semfoto { width: 64px; height: 64px; }
  #lista-secretarias { grid-template-columns: repeat(2, 1fr); }
  #lista-usuarios .card { padding: 24px 12px; }
  #lista-usuarios .card::before { width: 5rem; }
  #eventos .evento { padding-left: 12rem; }
  #eventos .ev-topo time { position: absolute; left: 0; top: 30px; width: 11rem; margin: 0; font-size: 14.5px; color: var(--text); }
  /* Tablet e PC: grupo centrado na viewport, como o herói da referência. */
  #login { align-items: center; justify-content: center; text-align: center; min-height: calc(100dvh - 64px - env(safe-area-inset-top)); padding-top: 24px; padding-bottom: 64px; }
  #login .apoio { max-width: 46ch; }
  #login .login { text-align: left; margin-top: 0; }
  #f-transf { padding: 12px 36px 36px; }
  #nova-transf .tela-topo { text-align: center; }
  #nova-transf .tela-topo .titulo { padding-right: 60px; }
  #nova-transf .sobre { justify-content: center; }
}

/* PC */
@media (min-width: 900px) {
  main { padding: 36px 24px 120px; }
  .topo { padding: 0 24px; }
  .fab { display: none; }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6%; align-items: start; }
  .col-fotos { position: sticky; top: 100px; }
  .barra div { justify-content: flex-end; }
  .barra button { flex: 0 0 160px; }
  .perigo { width: auto; }
}
@media (min-width: 1024px) {
  #itens { grid-template-columns: repeat(3, 1fr); }
  #lista-secretarias { grid-template-columns: repeat(3, 1fr); }
  /* Transferências: coluna de título fixa à esquerda, termos à direita. */
  #transferencias { display: grid; grid-template-columns: 5fr 6fr; column-gap: 7%; align-items: start; }
  #transferencias .tela-topo { position: sticky; top: 100px; flex-direction: column; align-items: flex-start; gap: 20px; }
  #transferencias .titulo h2 { font-size: 48px; }
  #lista-transf { grid-column: 2; grid-row: 1 / span 2; }
  /* Auditoria: coluna lateral com título e busca, eventos à direita. */
  #auditoria { display: grid; grid-template-columns: minmax(220px, 22%) 1fr; column-gap: 56px; align-items: start; }
  #auditoria .tela-topo { flex-direction: column; align-items: flex-start; gap: 16px; }
  #auditoria .ferramentas { grid-column: 1; }
  #eventos { grid-column: 2; grid-row: 1 / span 3; }
  /* Meu perfil: rótulo no terço esquerdo, conteúdo nos dois terços à direita. */
  #f-perfil { max-width: none; display: grid; grid-template-columns: 30% minmax(0, 640px); column-gap: 6%; align-items: start; margin-top: 6vh; }
  #f-perfil > * { grid-column: 2; }
  #f-perfil > .sobre { grid-column: 1; grid-row: 1; margin-top: 14px; }
}
@media (min-width: 1280px) { #itens { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 899px) {
  .so-pc { display: none !important; }
  .col-campos { margin-top: 36px; }
}
@media (max-width: 1023px) {
  .tela-topo { flex-wrap: wrap; align-items: center; }
  .tela-topo .titulo { order: 1; flex-basis: 100%; margin-top: 8px; }
  .tela-topo .titulo + * { margin-left: auto; }
  .tela-topo .contador { margin-block: 0; }
}
@media (max-width: 639px) {
  .enviar button { flex: 1 1 100%; } .enviar output { flex: 1 1 100%; text-align: center; }
  .fotos { grid-template-columns: repeat(3, 1fr); }
  .lista-topo { flex-direction: column; align-items: stretch; gap: 16px; }
  .lista-lado { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .lista-lado .apoio { display: none; } /* o placeholder da busca já diz isso */
  .contador { margin: 0; }
}
@media (max-width: 420px) {
  #eu-nome, #total { display: none; } /* o total já aparece em "N / bens" */
  header h1 { font-size: 19px; }
  #ver { max-width: 6.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; transition-duration: .12s !important; transition-property: color, background-color, border-color, box-shadow !important; }
}

body::before { content: "AMBIENTE DE TESTE · dados de mentira"; position: sticky; top: 0; z-index: 9999; display: block;
  padding: 4px; text-align: center; font: 700 13px/1.4 system-ui; letter-spacing: .05em; background: #c2410c; color: #fff; }