/* ============================================================
   e-NFSe por enovix — design system (sobre Pico CSS; cores e fonte vêm de tokens.css)
   ============================================================ */
/* mesmo seletor do Pico (`:root:not([data-theme=dark])`) e carregado depois dele: sem isso as variáveis --pico-* não valem */
:root,
:root:not([data-theme="dark"]),
[data-theme="light"] {
  --pico-font-family: var(--font-ui);
  --pico-font-size: 14px;
  --pico-line-height: 1.5;
  --pico-border-radius: var(--radius-control);
  --pico-form-element-spacing-vertical: .45rem;
  --pico-form-element-spacing-horizontal: .7rem;
  --pico-spacing: .9rem;
  --pico-typography-spacing-vertical: .8rem;

  /* nomes usados no resto deste arquivo, ligados aos tokens oficiais (tokens.css) */
  --navy-900: var(--brand-navy); --navy-800: var(--brand-navy); --navy-700: #1D4067; --navy-600: #2A5683;
  --azul: var(--brand-blue); --azul-escuro: var(--brand-blue-hover); --azul-claro: var(--brand-blue-tint);
  --verde: var(--status-success); --verde-claro: var(--status-success-tint);
  --amarelo: var(--status-warning); --amarelo-claro: var(--status-warning-tint);
  --vermelho: var(--status-error); --vermelho-claro: var(--status-error-tint);
  --roxo: var(--brand-navy); --roxo-claro: var(--brand-navy-tint);   /* a marca não tem roxo: "cancelada" usa o navy */
  --cinza-50: var(--brand-background); --cinza-100: #F1F5F9; --cinza-200: var(--border-subtle); --cinza-300: #CBD5E1;
  --cinza-500: var(--text-muted); --cinza-700: #334155; --cinza-900: var(--text-primary);
  --fundo: var(--brand-background); --card: var(--brand-white); --borda: var(--border-subtle);
  --sombra: var(--shadow-card);
  --sidebar-w: 248px; --topbar-h: 58px;

  --pico-primary: var(--brand-blue); --pico-primary-background: var(--brand-blue); --pico-primary-border: var(--brand-blue);
  --pico-primary-hover: var(--brand-blue-hover); --pico-primary-hover-background: var(--brand-blue-hover);
  --pico-primary-hover-border: var(--brand-blue-hover);
  --pico-primary-underline: transparent; --pico-primary-focus: rgba(47, 111, 237, .28);
  --pico-background-color: var(--fundo); --pico-color: var(--text-primary);
  --pico-muted-color: var(--text-muted); --pico-card-background-color: var(--card);
  --pico-card-border-color: var(--borda); --pico-form-element-border-color: var(--border-control);
  --pico-form-element-background-color: #fff; --pico-form-element-focus-color: var(--brand-blue);
  /* secundário = contornado (BRAND.md §5): fundo branco, texto navy, borda discreta.
     No Pico, *-inverse é a cor do TEXTO do botão e *-background a do fundo. */
  --pico-secondary: var(--brand-navy); --pico-secondary-inverse: var(--brand-navy);
  --pico-secondary-background: var(--brand-white); --pico-secondary-border: var(--border-control);
  --pico-secondary-hover: var(--brand-navy); --pico-secondary-hover-inverse: var(--brand-navy);
  --pico-secondary-hover-background: #F1F5F9; --pico-secondary-hover-border: var(--brand-navy);
  --pico-secondary-focus: rgba(15, 45, 74, .25);
  --pico-primary-inverse: #fff;
}
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--cinza-900); }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar {
  background: var(--brand-navy);
  color: #CBD5E1; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  border-right: 1px solid rgba(255,255,255,.06);
}
.brand { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 40px; height: 40px; border-radius: var(--radius-control); flex: none; }
.brand-texto { display: flex; flex-direction: column; line-height: 1.2; }
.brand-texto strong { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.brand-texto small { color: var(--brand-slate); font-size: .74rem; font-weight: 500; }
/* marca enovix em texto (o arquivo vetorial oficial ainda não foi entregue): minúsculas, X em azul */
.enovix { font-weight: 700; letter-spacing: -.02em; text-transform: lowercase; }
.enovix b { color: var(--brand-blue); font-weight: 700; }
.sidebar .enovix b, .login-lado .enovix b { color: #6F9BFF; }   /* o mesmo azul, clareado para ler sobre o navy (≥ 4,5:1) */
.nav { padding: .6rem .7rem; flex: 1; overflow-y: auto; }
.nav-grupo { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-slate); padding: .9rem .6rem .35rem; font-weight: 600; }
.nav-item { display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; border-radius: 8px; color: #cbd5e1; font-size: .88rem; margin-bottom: 2px; position: relative; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav-item.ativo { background: rgba(47,111,237,.30); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--brand-blue-focus); }
.nav-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.nav-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #F5C04A; box-shadow: 0 0 0 3px rgba(245,192,74,.25); }
.sidebar-user { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #1D4067; color: #fff; display: grid; place-items: center; font-weight: 700; }
.sidebar-user-texto { display: flex; flex-direction: column; line-height: 1.15; flex: 1; min-width: 0; }
.sidebar-user-texto strong { color: #fff; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-texto small { color: var(--brand-slate); font-size: .74rem; }
.sidebar-user form { margin: 0; }
.btn-icone { background: transparent; border: 0; padding: .35rem; margin: 0; color: var(--brand-slate); border-radius: 6px; width: auto; min-height: 0; }
.btn-icone:hover { background: rgba(255,255,255,.08); color: #fff; }
.btn-icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.principal { display: flex; flex-direction: column; min-width: 0; }
.topbar { height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.6rem; background: #fff; border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 20; }
.topbar-esquerda { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.topbar-titulo { font-weight: 700; font-size: 1.05rem; color: var(--cinza-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-menu { display: none; background: transparent; border: 1px solid var(--borda); border-radius: 8px; padding: .35rem; margin: 0; width: 40px; height: 40px; color: var(--cinza-700); flex: none; }
.btn-menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.btn-fechar-menu { display: none; margin-left: auto; }
.backdrop { display: none; }
[x-cloak] { display: none !important; }
img, svg, video { max-width: 100%; }
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.topbar-acoes { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .02em; border: 1px solid transparent; }
.pill-homologacao { background: var(--amarelo-claro); color: var(--amarelo); border-color: #FCD34D; }
.pill-producao { background: var(--vermelho-claro); color: var(--vermelho); border-color: #fca5a5; }
.pill-alerta { background: var(--status-warning-tint); color: var(--status-warning); border-color: #FCD34D; }
.pill-neutro { background: var(--cinza-100); color: var(--cinza-700); border-color: var(--cinza-200); }
a.pill:hover { text-decoration: none; filter: brightness(.97); }
.conteudo { padding: 1.4rem 1.6rem 2rem; flex: 1; max-width: 1500px; width: 100%; }
.rodape { color: var(--cinza-500); font-size: .74rem; padding: .8rem 1.6rem; border-top: 1px solid var(--borda); background: #fff; }

/* ---------- tipografia e cartões ---------- */
main h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .25rem; color: var(--cinza-900); }
main h2 small { font-weight: 500; color: var(--cinza-500); font-size: .85rem; }
main h2 + p > small, .subtitulo { color: var(--cinza-500); font-size: .85rem; }
main h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cinza-500); font-weight: 700; margin: 1.4rem 0 .6rem; }
article, .card { background: var(--card); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra); padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
article > header { margin: -1.1rem -1.2rem .9rem; padding: .75rem 1.2rem; background: var(--cinza-50); border-bottom: 1px solid var(--borda); border-radius: 12px 12px 0 0; font-size: .85rem; color: var(--cinza-700); }
article > footer { margin: .9rem -1.2rem -1.1rem; padding: .75rem 1.2rem; background: var(--cinza-50); border-top: 1px solid var(--borda); border-radius: 0 0 12px 12px; }
.grid { gap: 1rem; }
.grid-dash { grid-template-columns: 1fr 1.6fr 1.6fr; }
@media (max-width: 1200px) { .grid-dash { grid-template-columns: 1fr; } }
article table.grid { box-shadow: none; }
article table.grid thead th { white-space: normal; }
article table.grid td, article table.grid th { padding: .45rem .55rem; }
form article { margin-bottom: 1rem; }

/* ---------- avisos ---------- */
.aviso { padding: .7rem 1rem; margin-bottom: 1rem; border-radius: 10px; border: 1px solid; font-size: .88rem; box-shadow: none; }
.aviso.sucesso { background: var(--verde-claro); color: var(--verde); border-color: #86efac; }
.aviso.erro { background: var(--vermelho-claro); color: var(--vermelho); border-color: #fca5a5; }
.aviso.alerta { background: var(--amarelo-claro); color: var(--amarelo); border-color: #fcd34d; }
.aviso ul { margin: .3rem 0 0; padding-left: 1.2rem; }

/* ---------- tabelas ---------- */
table { --pico-table-border-color: var(--borda); font-size: .85rem; }
table.grid { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; box-shadow: var(--sombra); }
table.grid thead th { background: var(--cinza-50); color: var(--cinza-500); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: .55rem .7rem; border-bottom: 1px solid var(--borda); white-space: nowrap; }
table.grid td { padding: .5rem .7rem; vertical-align: top; border-bottom: 1px solid var(--cinza-100); }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover td { background: #f8fafc; }
table.grid td small { color: var(--cinza-500); }
table:not(.grid) th { font-weight: 600; color: var(--cinza-500); font-size: .8rem; width: 34%; }
table:not(.grid) td, table:not(.grid) th { padding: .4rem .5rem; border-bottom: 1px solid var(--cinza-100); }
details summary { cursor: pointer; }
table details summary { list-style: none; font-size: .78rem; color: var(--azul); }
table details summary::-webkit-details-marker { display: none; }

/* ---------- badges ---------- */
.badge { display: inline-block; padding: .14rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; }
.badge-sucesso { background: var(--verde-claro); color: var(--verde); border-color: #86efac; }
.badge-erro { background: var(--vermelho-claro); color: var(--vermelho); border-color: #fca5a5; }
.badge-pendente { background: var(--cinza-100); color: var(--cinza-700); border-color: var(--cinza-300); }
.badge-enviado { background: var(--azul-claro); color: var(--azul-escuro); border-color: #93c5fd; }
.badge-atencao { background: var(--amarelo-claro); color: var(--amarelo); border-color: #fcd34d; }
.badge-cancelada { background: var(--roxo-claro); color: var(--roxo); border-color: #c4b5fd; }

/* ---------- formulários ---------- */
label { font-size: .8rem; font-weight: 600; color: var(--cinza-700); }
label small { font-weight: 400; color: var(--cinza-500); }
input, select, textarea { font-size: .88rem; }
input[type=checkbox], input[type=radio] { margin-right: .45rem; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .4rem 1rem; }
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; align-items: end; background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: .9rem 1rem; margin-bottom: 1rem; box-shadow: var(--sombra); }
.filtros label { margin-bottom: 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza-500); }
.filtros input, .filtros select { margin-bottom: 0; }
.filtros button { margin-bottom: 0; }
button, [role=button], input[type=submit] { font-weight: 600; font-size: .86rem; border-radius: var(--radius-control); width: auto; padding: .5rem 1rem; min-height: var(--target-size); display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
/* botões dentro de tabelas e o seletor de menu mantêm tamanho compacto (alvo ≥ 32 px, acima do mínimo de 24 px do WCAG 2.2) */
table button, table [role=button], table input[type=submit], .btn-compacto { min-height: 32px; padding: .25rem .7rem; }
.btn-menu, .btn-icone { min-height: 0; }
.btn-menu { min-height: 40px; }
button svg, [role=button] svg, .ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
:where(a, button, [role=button], input, select, textarea, summary):focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; }
.sidebar :focus-visible, .login-lado :focus-visible { outline-color: var(--brand-blue-focus); }
button.secondary, button.outline { font-weight: 600; }
.somente-leitura { background: var(--cinza-100) !important; color: var(--cinza-500); }
fieldset { border: 1px solid var(--borda); border-radius: 10px; padding: .6rem 1rem; margin-bottom: 1rem; }
legend { font-size: .78rem; font-weight: 700; color: var(--cinza-500); text-transform: uppercase; letter-spacing: .06em; padding: 0 .4rem; }
pre.xml { max-height: 420px; overflow: auto; font-size: .74rem; white-space: pre-wrap; word-break: break-all; background: var(--navy-900); color: #cbd5e1; border-radius: 10px; padding: .8rem 1rem; }
code { font-size: .82em; background: var(--cinza-100); color: var(--navy-700); border-radius: 4px; padding: .1rem .35rem; }
.msg-gis { font-size: .78rem; color: var(--vermelho); }
.acoes form { display: inline; }
.acoes a { font-size: .8rem; }
main > details, article > details { margin-bottom: .6rem; }
main > details > summary { font-weight: 600; font-size: .85rem; color: var(--cinza-700); background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: .55rem .9rem; }

/* ---------- KPI / dashboard ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.kpi { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 1rem 1.1rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .2rem; border-top: 3px solid var(--azul); }
.kpi.verde { border-top-color: var(--status-success); } .kpi.amarelo { border-top-color: var(--status-warning); } .kpi.vermelho { border-top-color: var(--status-error); } .kpi.roxo { border-top-color: var(--brand-navy); }
.kpi-rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cinza-500); font-weight: 700; }
.kpi-valor { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; color: var(--cinza-900); line-height: 1.1; }
.kpi-detalhe { font-size: .78rem; color: var(--cinza-500); }
.barras { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding: 0 0 1.4rem; border-bottom: 1px solid var(--borda); margin: .5rem 0 1.5rem; }
.barra { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.barra .preench { width: 100%; background: var(--brand-blue); min-height: 2px; border-radius: 3px 3px 0 0; transition: filter .15s; }
.barra:hover .preench { filter: brightness(1.15); }
.barra small { position: absolute; bottom: -1.3rem; font-size: .65rem; color: var(--cinza-500); white-space: nowrap; }

/* ---------- modais e login ---------- */
dialog { padding: 1rem; } dialog article { max-width: 960px; width: 96%; }
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-lado { background: var(--brand-navy); color: #CBD5E1; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.login-marca .brand-mark { width: 48px; height: 48px; }
.login-marca .brand-texto strong { font-size: 1.4rem; }
.login-lado h1 { color: #fff; font-size: 1.9rem; letter-spacing: -.02em; margin: 1.5rem 0 .6rem; }
.login-lado p { color: #CBD5E1; max-width: 440px; }
.login-lado ul { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .5rem; }
.login-lado li { display: flex; gap: .6rem; font-size: .88rem; color: #cbd5e1; }
.login-lado li::before { content: "✓"; color: #6F9BFF; font-weight: 700; }
.login-form { display: grid; place-items: center; padding: 2rem; background: var(--fundo); }
.login-form article { width: 100%; max-width: 420px; }
.login-form h3 { font-size: 1.2rem; margin-bottom: .2rem; }
@media print { .sidebar, .topbar, .rodape { display: none; } .app { grid-template-columns: 1fr; } }

/* Pico define `.grid` como CSS grid; tabelas usam a classe `grid` para estilo tabular — restaurar layout de tabela */
table.grid { display: table; grid-template-columns: none; }
table.grid thead { display: table-header-group; } table.grid tbody { display: table-row-group; }
table.grid tr { display: table-row; } table.grid th, table.grid td { display: table-cell; }

/* log geral */
tr.log-erro td { background: rgba(239,68,68,.06); }
tr.log-alerta td { background: rgba(245,158,11,.07); }

/* ============================================================
   Responsivo (Story 7.13) — mobile first a partir de 900px
   ============================================================ */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  /* menu lateral vira gaveta */
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(84vw, 300px); height: 100dvh; z-index: 40;
    transform: translateX(-102%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(2,6,23,.4); }
  .menu-aberto .sidebar { transform: none; }
  .backdrop { display: block; position: fixed; inset: 0; background: rgba(2,6,23,.55); z-index: 35; animation: surgir .18s ease; }
  @keyframes surgir { from { opacity: 0 } to { opacity: 1 } }
  .btn-menu { display: inline-flex; align-items: center; justify-content: center; }
  .btn-fechar-menu { display: inline-flex; }
  .nav-item { min-height: 44px; font-size: .95rem; }
  .sidebar-user { padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); }
  /* topo compacto */
  .topbar { height: auto; min-height: 52px; padding: .45rem .8rem; gap: .5rem; }
  .topbar-acoes { gap: .3rem; }
  .pill { font-size: .66rem; padding: .18rem .5rem; }
  .pill-neutro { display: none; }
  .conteudo { padding: .9rem .8rem 1.5rem; }
  .rodape { font-size: .68rem; padding: .6rem .8rem; text-align: center; }
  main h2 { font-size: 1.15rem; }
  article, .card { padding: .9rem .9rem; border-radius: 10px; }
  article > header { margin: -.9rem -.9rem .8rem; padding: .6rem .9rem; border-radius: 10px 10px 0 0; }
  article > footer { margin: .8rem -.9rem -.9rem; padding: .6rem .9rem; }
  /* tabelas rolam na horizontal sem estourar a página */
  table.grid { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  table.grid thead th, table.grid td { white-space: nowrap; }
  table.grid td small { white-space: normal; }
  .kpis { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .kpi { padding: .8rem .9rem; }
  .kpi-valor { font-size: 1.4rem; }
  .filtros { grid-template-columns: 1fr 1fr; padding: .7rem .8rem; }
  .barras { height: 120px; }
  pre.xml { font-size: .68rem; }
}
@media (max-width: 640px) {
  .grid-form, .filtros { grid-template-columns: 1fr; }
  .filtros button, form > button[type=submit], .grid-form label > button { width: 100%; }
  input, select, textarea { font-size: 16px; } /* evita zoom automático no iOS */
  .kpis { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr !important; }
  dialog { padding: 0; } dialog article { width: 100%; max-width: none; max-height: 100dvh; border-radius: 0; margin: 0; overflow-y: auto; }
  main h2 { font-size: 1.05rem; }
  /* tabelas com data-label viram cartões */
  table.grid.cartoes { display: block; overflow: visible; border: 0; background: transparent; box-shadow: none; }
  table.grid.cartoes thead { display: none; }
  table.grid.cartoes tbody { display: block; }
  table.grid.cartoes tr { display: block; background: #fff; border: 1px solid var(--borda); border-radius: 10px; margin-bottom: .6rem; box-shadow: var(--sombra); padding: .35rem 0; }
  table.grid.cartoes td { display: grid; grid-template-columns: 36% 1fr; gap: .5rem; align-items: start; padding: .35rem .8rem; border: 0; white-space: normal; text-align: left !important; }
  table.grid.cartoes td::before { content: attr(data-label); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza-500); font-weight: 700; padding-top: .15rem; }
  table.grid.cartoes td:empty, table.grid.cartoes td[data-label=""] { display: none; }
  table.grid.cartoes td.acoes { grid-template-columns: 1fr; }
  table.grid.cartoes td.acoes::before { display: none; }
  table.grid.cartoes tbody tr:hover td { background: transparent; }
  /* topo em duas linhas: título inteiro, selos embaixo */
  .topbar { flex-wrap: wrap; row-gap: .25rem; }
  .topbar-esquerda { flex: 1 1 100%; }
  .topbar-acoes { padding-left: 46px; }
  /* login: cabeçalho compacto em vez de esconder a marca */
  .login-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100dvh; }
  .login-lado { display: flex; justify-content: flex-start; min-height: 0; padding: 1.4rem 1.2rem 1rem; }
  .login-lado h1 { font-size: 1.2rem; margin: .9rem 0 .3rem; }
  .login-lado p { font-size: .85rem; }
  .login-lado ul, .login-lado > small { display: none; }
  .login-form { padding: 1rem; align-items: start; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-lado { padding: 2rem; }
  .login-lado ul { display: none; }
}
/* indicador de carregamento do HTMX (botões Atualizar / Processar agora) */
.htmx-indicator { opacity: 0; transition: opacity .15s; color: var(--cinza-500); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* respeita a preferência do sistema por menos movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* estado ligado/desligado sempre acompanhado de texto (nunca só cor) */
.status-ponto { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--brand-slate); margin-right: .4em; vertical-align: .05em; }
.status-ponto.ligado { background: var(--status-success); }

/* caminhos, hashes e mensagens longas não estouram o cartão */
table:not(.grid) td, table:not(.grid) td small, .msg-gis { overflow-wrap: anywhere; }

/* abas (relatórios): lado a lado; a ativa usa o botão primário e é anunciada por aria-current */
nav.abas { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .5rem; margin-bottom: 1rem; }
nav.abas a { margin: 0; }

/* relógio do topo: números de largura fixa para não "pular" a cada segundo */
.relogio { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.relogio-dia { color: var(--text-muted); font-weight: 500; text-transform: capitalize; }
@media (max-width: 640px) { .relogio-dia, .relogio-seg { display: none; } }
@media (max-width: 900px) { .pill-neutro.relogio { display: inline-flex; } }   /* as outras etiquetas neutras somem no celular; o relógio fica */