/* Visual inspirado no shadcn-admin (github.com/satnaing/shadcn-admin, licença MIT):
   tokens de cor do shadcn/ui (tema slate), menu lateral recolhível, cabeçalho fixo, cartões e tabelas. */
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.129 0.042 264.695);
  --card: oklch(1 0 0);
  --popover: oklch(1 0 0);
  --primary: oklch(0.208 0.042 265.755);
  --primary-foreground: oklch(0.984 0.003 247.858);
  --secondary: oklch(0.968 0.007 247.896);
  --muted-bg: oklch(0.968 0.007 247.896);
  --muted-foreground: oklch(0.554 0.046 257.417);
  --accent-bg: oklch(0.968 0.007 247.896);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.929 0.013 255.508);
  --input: oklch(0.929 0.013 255.508);
  --ring: oklch(0.704 0.04 256.788);
  --sidebar: oklch(0.984 0.003 247.858);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  /* cores lidas pelos gráficos (em hex, porque o código soma transparência ao fim) */
  --in: #16a34a; --out: #dc2626; --accent: #2563eb; --warn: #d97706;
  --line: #e2e8f0; --muted: #64748b; --fg: #0f172a; --bg: #ffffff; --panel: #ffffff;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sb-w: 16rem; --sb-w-icon: 3.25rem;
}
.dark {
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.14 0.04 259.21);
  --popover: oklch(0.208 0.042 265.755);
  --primary: oklch(0.929 0.013 255.508);
  --primary-foreground: oklch(0.208 0.042 265.755);
  --secondary: oklch(0.279 0.041 260.031);
  --muted-bg: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);
  --accent-bg: oklch(0.279 0.041 260.031);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.027 264.364);
  --sidebar: oklch(0.208 0.042 265.755);
  --in: #22c55e; --out: #f87171; --accent: #60a5fa; --warn: #fbbf24;
  --line: #1e293b; --muted: #94a3b8; --fg: #f8fafc; --bg: #020617; --panel: #0b1222;
}

* { box-sizing: border-box; border-color: var(--border); }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--background); color: var(--foreground); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
button:not(:disabled), [role=button]:not(:disabled) { cursor: pointer; }
svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; margin: 0; }
h3 { margin: 0; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }
.muted, .note { color: var(--muted-foreground); }
.note { font-size: 0.8125rem; margin: 4px 0 14px; }

/* ---------------- layout ---------------- */
.layout { display: flex; min-height: 100svh; }
.sidebar { position: sticky; top: 0; height: 100svh; width: var(--sb-w); flex: none; display: flex; flex-direction: column; background: var(--sidebar); border-right: 1px solid var(--border); transition: width .2s ease; z-index: 40; }
.sb-head { padding: 10px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: calc(var(--radius) - 2px); }
.brand .logo { width: 32px; height: 32px; border-radius: 8px; background: var(--primary); color: var(--primary-foreground); display: grid; place-items: center; flex: none; }
.brand-txt { display: grid; line-height: 1.2; min-width: 0; }
.brand-txt b { font-size: 0.875rem; font-weight: 600; }
.brand-txt span { font-size: 0.75rem; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-nav { flex: 1; overflow-y: auto; padding: 4px 10px; }
.sb-group { margin-bottom: 10px; }
.sb-label { font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); padding: 6px 8px; white-space: nowrap; }
.sb-nav button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 8px; border-radius: calc(var(--radius) - 2px); font-size: 0.875rem; color: var(--foreground); cursor: pointer; white-space: nowrap; }
.sb-nav button:hover { background: var(--accent-bg); }
.sb-nav button.on { background: var(--accent-bg); font-weight: 500; }
.sb-nav button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.sb-foot { padding: 10px; border-top: 1px solid var(--border); }
.user { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: calc(var(--radius) - 2px); }
.avatar { width: 32px; height: 32px; border-radius: 8px; background: var(--muted-bg); display: grid; place-items: center; font-size: 0.75rem; font-weight: 600; flex: none; }
.user .txt { display: grid; line-height: 1.2; min-width: 0; flex: 1; }
.user .txt b { font-size: 0.875rem; font-weight: 600; }
.user .txt span { font-size: 0.75rem; color: var(--muted-foreground); }
.user a { color: var(--muted-foreground); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; }
.user a:hover { background: var(--accent-bg); color: var(--foreground); }

/* recolhido: só ícones */
.layout.colapsado .sidebar { width: var(--sb-w-icon); }
.layout.colapsado .brand-txt, .layout.colapsado .sb-label, .layout.colapsado .sb-nav button span, .layout.colapsado .user .txt, .layout.colapsado .user a { display: none; }
.layout.colapsado .sb-nav button { justify-content: center; padding: 0; }
.layout.colapsado .brand, .layout.colapsado .user { justify-content: center; padding: 6px 0; }
.layout.colapsado .sb-label { height: 8px; padding: 0; }

.inset { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: color-mix(in oklab, var(--background) 85%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.topbar .sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.topbar .grow { flex: 1; }
.main { padding: 20px 16px 48px; }
@media (min-width: 768px) { .main { padding: 24px 28px 56px; } .topbar { padding: 0 20px; } }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 18px; }
.page-head .desc { margin: 4px 0 0; color: var(--muted-foreground); max-width: 62rem; }
.takeaway { color: var(--muted-foreground); margin: -4px 0 16px; max-width: 62rem; }
.takeaway b { color: var(--foreground); font-weight: 600; }
.sync-info { font-size: 0.8125rem; color: var(--muted-foreground); margin: 0 0 12px; min-height: 0; }
.sync-info:empty { display: none; }
.sb-overlay { display: none; }

@media (max-width: 767px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); width: 17rem !important; }
  .layout.aberto .sidebar { transform: none; }
  .layout.aberto .sb-overlay { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / .5); z-index: 35; }
  .layout.colapsado .brand-txt, .layout.colapsado .sb-label, .layout.colapsado .sb-nav button span, .layout.colapsado .user .txt, .layout.colapsado .user a { display: revert; }
  .topbar .esconder-sm { display: none; }
}

/* ---------------- botões e campos ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: calc(var(--radius) - 2px); border: 1px solid var(--border); background: var(--background); color: var(--foreground); font: 500 0.875rem var(--sans); text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-xs); transition: background .15s; }
.btn:hover { background: var(--accent-bg); }
.btn.primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.btn.primary:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.btn.danger { background: var(--destructive); color: #fff; border-color: transparent; }
.btn.ghost { border-color: transparent; box-shadow: none; background: transparent; }
.btn.ghost:hover { background: var(--accent-bg); }
.btn:disabled, .btn[disabled] { opacity: .5; pointer-events: none; }
.btn:focus-visible, .icon-btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); border-color: var(--ring); }
.icon-btn { all: unset; box-sizing: border-box; width: 36px; height: 36px; display: grid; place-items: center; border-radius: calc(var(--radius) - 2px); color: var(--foreground); cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--accent-bg); }
.search { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; height: 36px; width: 16rem; max-width: 40vw; padding: 0 8px 0 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--muted-bg); color: var(--muted-foreground); font-size: 0.875rem; cursor: pointer; }
.search span { flex: 1; }
kbd { font: 500 0.6875rem var(--sans); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; background: var(--background); color: var(--muted-foreground); }
@media (max-width: 767px) { .search { width: 36px; padding: 0; justify-content: center; background: transparent; border-color: transparent; } .search span, .search kbd { display: none; } }

.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
input[type=search], input[type=email], input[type=password], input[type=text], input[type=file], input[type=date], input:not([type]), input[inputmode], select, textarea {
  height: 36px; padding: 0 12px; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--foreground); font: 0.875rem var(--sans); box-shadow: var(--shadow-xs); min-width: 0; }
select { padding-right: 28px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.dark select option { background: var(--popover); }
.tools input[type=search] { flex: 1 1 16rem; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary); margin: 0; vertical-align: middle; }
.sum { margin-left: auto; font-size: 0.8125rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.chk { font-size: 0.875rem; color: var(--muted-foreground); display: inline-flex; gap: 8px; align-items: center; }

/* abas segmentadas (TabsList do shadcn) */
.seg { display: inline-flex; align-items: center; height: 36px; padding: 3px; border-radius: var(--radius); background: var(--muted-bg); }
.seg button { all: unset; height: 30px; padding: 0 10px; border-radius: calc(var(--radius) - 2px); font-size: 0.8125rem; font-weight: 500; color: var(--muted-foreground); cursor: pointer; white-space: nowrap; }
.seg button.on { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-sm); }
.custom { display: inline-flex; gap: 6px; }

/* ---------------- cartões ---------------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; margin-bottom: 16px; }
.kpi, .card { background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-sm); }
.kpi { padding: 18px 20px; }
.kpi .l { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.875rem; font-weight: 500; }
.kpi .l svg { color: var(--muted-foreground); }
.kpi .v { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .s { font-size: 0.75rem; color: var(--muted-foreground); }
.up { color: var(--in) !important; } .down { color: var(--out) !important; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.card { padding: 20px 22px; min-width: 0; }
.card.wide { grid-column: 1 / -1; }
.ch { position: relative; height: 250px; } .ch.tall { height: 310px; }
.split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }
.detail { position: sticky; top: 72px; }
@media (max-width: 1100px) { .detail { position: static; } }

/* ---------------- tabelas ---------------- */
.tbox { max-height: 62vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
th { position: sticky; top: 0; z-index: 1; background: var(--card); text-align: left; color: var(--muted-foreground); font-weight: 500; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; white-space: nowrap; }
tbody tr { cursor: pointer; transition: background .1s; }
tbody tr:hover td { background: color-mix(in oklab, var(--muted-bg) 60%, transparent); }
tr.sel td { background: var(--muted-bg); }
@media (max-width: 640px) { .sm { display: none; } }

/* badges */
.chip, .badge { display: inline-flex; align-items: center; height: 22px; font-size: 0.75rem; font-weight: 500; padding: 0 8px; border-radius: 6px; border: 1px solid var(--border); white-space: nowrap; color: var(--foreground); background: transparent; }
.chip.ok { color: var(--in); border-color: color-mix(in oklab, var(--in) 35%, transparent); background: color-mix(in oklab, var(--in) 10%, transparent); }
.chip.bad { color: var(--out); border-color: color-mix(in oklab, var(--out) 35%, transparent); background: color-mix(in oklab, var(--out) 10%, transparent); }
.chip.warn { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 35%, transparent); background: color-mix(in oklab, var(--warn) 10%, transparent); }
.badge { background: var(--secondary); border-color: transparent; }
.badge.demo { color: var(--warn); background: color-mix(in oklab, var(--warn) 14%, transparent); }

dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 8px 0; font-size: 0.875rem; }
dt { color: var(--muted-foreground); } dd { margin: 0; word-break: break-word; }
.mono { font-family: var(--mono); font-size: 0.75rem; color: var(--muted-foreground); word-break: break-all; }
.msg { font-size: 0.8125rem; color: var(--muted-foreground); min-height: 1.2em; }
.erro { color: var(--destructive); font-size: 0.875rem; min-height: 1em; }
.vazio { color: var(--muted-foreground); padding: 20px 12px; font-size: 0.875rem; text-align: center; }
iframe#c-prev { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }

/* avisos */
.aviso { border: 1px solid color-mix(in oklab, var(--out) 40%, transparent); color: var(--out); background: color-mix(in oklab, var(--out) 7%, transparent); border-radius: var(--radius); padding: 12px 16px; font-size: 0.875rem; margin: 0 0 16px; }
.alertas { margin: 0 0 16px; display: grid; gap: 8px; }
.alertas:empty { display: none; }
.alertas .al { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 0.875rem; padding: 10px 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.alertas .al b { white-space: nowrap; font-weight: 600; }
.alertas .al.alto { border-color: color-mix(in oklab, var(--out) 45%, transparent); }
.alertas .al.alto b { color: var(--out); }
.alertas .al.medio b { color: var(--warn); }
.alertas .al .q { color: var(--muted-foreground); font-size: 0.75rem; margin-left: auto; white-space: nowrap; }
.cob { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.regua { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 14px; font-size: 0.8125rem; background: var(--muted-bg); }
.regua ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted-foreground); }
#t-lote tbody tr { cursor: pointer; }

/* ---------------- diálogos ---------------- */
dialog { border: 1px solid var(--border); border-radius: var(--radius); background: var(--popover); color: var(--foreground); max-width: 480px; width: calc(100% - 32px); padding: 24px; box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgb(0 0 0 / .5); }
dialog h3 { font-size: 1.05rem; margin-bottom: 4px; }
#dlg-cob, #dlg-lote { max-width: 680px; }
dialog label, .login-card label { display: block; font-size: 0.875rem; font-weight: 500; margin: 12px 0; }
dialog input:not([type=checkbox]), dialog textarea, .login-card input { display: block; width: 100%; margin-top: 6px; }
dialog textarea { height: auto; padding: 10px 12px; font: 0.75rem/1.5 var(--mono); resize: vertical; }
dialog .tools:last-child { justify-content: flex-end; margin: 16px 0 0; }

/* busca ⌘K */
#cmdk { padding: 0; max-width: 560px; overflow: hidden; }
#cmdk .cmd-in { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--border); }
#cmdk .cmd-in input { border: 0; box-shadow: none; height: 48px; flex: 1; padding: 0; font-size: 0.9rem; }
#cmdk .cmd-in input:focus-visible { box-shadow: none; }
#cmdk ul { list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow: auto; }
#cmdk .grp { font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); padding: 8px 8px 4px; }
#cmdk li.item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; font-size: 0.875rem; cursor: pointer; }
#cmdk li.item.ativo { background: var(--accent-bg); }
#cmdk li.item svg { color: var(--muted-foreground); }
#cmdk .nada { padding: 24px; text-align: center; color: var(--muted-foreground); font-size: 0.875rem; }

/* ---------------- login ---------------- */
.login-body { display: grid; place-items: center; min-height: 100svh; padding: 16px; background: var(--muted-bg); }
.login-wrap { width: 100%; max-width: 400px; }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; font-weight: 600; }
.login-brand .logo { width: 32px; height: 32px; border-radius: 8px; background: var(--primary); color: var(--primary-foreground); display: grid; place-items: center; }
.login-card { background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); padding: 24px; box-shadow: var(--shadow-sm); }
.login-card h1 { font-size: 1.15rem; }
.login-card .btn { width: 100%; margin-top: 8px; height: 38px; }

/* ===== perfis, paginação e notificações ===== */
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }

/* cabeçalho ordenável */
th[data-ord] { cursor: pointer; user-select: none; }
th[data-ord]:hover { color: var(--foreground); }
th[data-ord]::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: 2px; border: 4px solid transparent; border-top-color: currentColor; opacity: .25; }
th[data-ord].ord { color: var(--foreground); }
th[data-ord].ord::after { opacity: 1; }
th[data-ord].ord[data-dir="asc"]::after { border-top-color: transparent; border-bottom-color: currentColor; vertical-align: 5px; }
th[data-ord]:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
td.c, th.c { text-align: center; }
td.c svg.i { color: var(--in); }
tbody tr.fixa { cursor: default; }
tbody tr.fixa:hover td { background: transparent; }
tr.inativo td { color: var(--muted-foreground); }
tr.alerta td:nth-child(3) { color: var(--out); }

/* barra de páginas */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-top: 12px; font-size: 0.8125rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.pager .grow { flex: 1; }
.pager select { height: 32px; font-size: 0.8125rem; }
.pager .info { white-space: nowrap; }
.icon-btn.mini { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--background); }
.icon-btn:disabled { opacity: .4; pointer-events: none; }
.btn.mini { height: 30px; padding: 0 10px; font-size: 0.8125rem; }
@media (max-width: 520px) { .pager .grow { flex-basis: 100%; height: 0; } }

/* sino e lista de notificações */
.sino { position: relative; }
.cont, .sb-cont { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--destructive); color: #fff; font: 600 0.625rem/17px var(--sans); font-style: normal; text-align: center; pointer-events: none; }
.sb-cont { position: static; margin-left: auto; }
.layout.colapsado .sb-cont { display: none; }
.pop { position: absolute; right: 0; top: calc(100% + 8px); width: min(380px, calc(100vw - 24px)); background: var(--popover); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg, 0 10px 30px rgb(0 0 0 / .15)); z-index: 50; overflow: hidden; }
.pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.pop-foot { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 10px; text-align: center; font-size: 0.8125rem; font-weight: 500; border-top: 1px solid var(--border); cursor: pointer; }
.pop-foot:hover, .pop-foot:focus-visible { background: var(--accent-bg); }
.notif-lista { list-style: none; margin: 0; padding: 4px; max-height: min(420px, 60vh); overflow: auto; }
.notif-lista.grande { max-height: none; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); }
.notif-lista.grande .nt { border-radius: 0; border-bottom: 1px solid var(--border); padding: 14px 16px; }
.notif-lista.grande .nt:last-child { border-bottom: 0; }
.notif-lista .vazio { list-style: none; }
.nt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 10px 12px; border-radius: calc(var(--radius) - 2px); cursor: pointer; }
.nt:hover, .nt:focus-visible { background: var(--accent-bg); outline: none; }
.nt-ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--muted-bg); color: var(--muted-foreground); }
.nt.alto .nt-ic { color: var(--out); background: color-mix(in oklab, var(--out) 12%, transparent); }
.nt.medio .nt-ic { color: var(--warn); background: color-mix(in oklab, var(--warn) 14%, transparent); }
.nt-txt { display: grid; gap: 1px; min-width: 0; }
.nt-tipo { font-size: 0.6875rem; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--muted-foreground); }
.nt-txt b { font-size: 0.875rem; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.nt.nova .nt-txt b { font-weight: 600; }
.nt-det { font-size: 0.8125rem; color: var(--muted-foreground); line-height: 1.4; }
.nt-q { font-size: 0.75rem; color: var(--muted-foreground); white-space: nowrap; padding-right: 10px; }
.nt-dot { position: absolute; right: 10px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.notif-lista.grande .nt-dot { top: 20px; right: 14px; }
.nt.lida { opacity: .78; }
@media (max-width: 520px) { .nt { grid-template-columns: auto minmax(0, 1fr); } .nt-q { grid-column: 2; padding: 0; } }

/* rodapé do menu: abre "Minha conta" */
.user-btn { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; border-radius: calc(var(--radius) - 2px); cursor: pointer; padding: 2px; }
.user-btn:hover { background: var(--accent-bg); }
.user-btn:focus-visible { outline: 2px solid var(--ring); }
.user-btn .txt { display: grid; line-height: 1.2; min-width: 0; }
.user-btn .txt b, .user-btn .txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-btn .txt b { font-size: 0.875rem; font-weight: 600; }
.user-btn .txt span { font-size: 0.75rem; color: var(--muted-foreground); }
.layout.colapsado .user-btn .txt { display: none; }
.layout.colapsado .user { flex-direction: column; }

/* diálogos de usuário e conta */
#dlg-usu, #dlg-conta { max-width: 520px; }
.linha { display: flex; gap: 8px; margin-top: 6px; }
.linha input { margin: 0 !important; flex: 1; font-family: var(--mono); }
dialog small.note { display: block; margin: 6px 0 0; font-weight: 400; }
fieldset.perfis { border: 0; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
fieldset.perfis legend { font-size: 0.875rem; font-weight: 500; padding: 0; margin-bottom: 6px; }
label.perfil-opcao { display: flex !important; gap: 10px; align-items: flex-start; margin: 0 !important; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; font-weight: 400 !important; }
label.perfil-opcao:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
label.perfil-opcao input { margin-top: 3px !important; width: auto !important; display: inline !important; accent-color: var(--primary); }
label.perfil-opcao span { display: grid; gap: 2px; }
label.perfil-opcao b { font-size: 0.875rem; }
label.perfil-opcao small { color: var(--muted-foreground); font-size: 0.8125rem; }
dialog label.chk { display: flex; margin: 12px 0; }
dialog .tools a.btn { margin-right: auto; }

/* login da demonstração: um botão por perfil */
.perfis-demo { display: grid; gap: 10px; margin-top: 8px; }
button.perfil-opcao { all: unset; box-sizing: border-box; display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--card); }
button.perfil-opcao:hover, button.perfil-opcao:focus-visible { border-color: var(--primary); background: var(--accent-bg); }
button.perfil-opcao b { font-size: 0.9rem; }
button.perfil-opcao span { font-size: 0.8125rem; color: var(--muted-foreground); }
#t-rec td:first-child, #t-env td:first-child, #t-ext td:first-child, #t-bol td:first-child, #t-pag td:first-child,
#t-rec td:nth-child(3), #t-ext td:nth-child(4) { white-space: nowrap; }
@media (max-width: 560px) {
  .topbar { gap: 4px; }
  .topbar .sep, #btn-tema { display: none; }
  .seg button { padding: 0 8px; }
}
.outro-login { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; font-size: 0.875rem; }
.outro-login summary { cursor: pointer; color: var(--muted-foreground); font-weight: 500; }
.outro-login summary:hover { color: var(--foreground); }

/* ===== conexão com o banco ===== */
.sb-cad { width: 12px !important; height: 12px !important; margin-left: auto; color: var(--muted-foreground); }
.layout.colapsado .sb-cad { display: none; }
.aviso-conexao { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0 0 16px; border-radius: var(--radius); font-size: 0.875rem;
  border: 1px solid color-mix(in oklab, var(--warn) 45%, transparent); background: color-mix(in oklab, var(--warn) 9%, var(--card)); }
.aviso-conexao svg.i { color: var(--warn); margin-top: 2px; }
.aviso-conexao a { font-weight: 600; color: var(--foreground); }
.cofre { max-width: 460px; margin: 24px auto; background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); padding: 28px 28px 22px; box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / .05)); }
.cofre-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--primary); color: var(--primary-foreground); margin-bottom: 14px; }
.cofre-ic svg.i { width: 22px; height: 22px; }
.cofre h2 { font-size: 1.15rem; margin: 0 0 4px; letter-spacing: -0.01em; text-wrap: balance; }
.cofre label { display: block; font-size: 0.875rem; font-weight: 500; margin: 14px 0; }
.cofre input { display: block; width: 100%; margin-top: 6px; box-sizing: border-box; }
#cad-codigo { font: 600 1.25rem var(--mono); letter-spacing: .2em; text-align: center; height: 48px; }
.cofre .btn.primary { width: 100%; height: 40px; margin-top: 4px; }
.passos { margin: 8px 0 12px; padding-left: 20px; font-size: 0.875rem; display: grid; gap: 6px; }
.qr { display: grid; place-items: center; padding: 12px; background: #fff; border-radius: var(--radius); border: 1px solid var(--border); width: fit-content; margin: 8px auto; }
.qr svg { width: 200px; height: 200px; display: block; }
.chave-totp { text-align: center; margin: 4px 0 0; }
.chave-totp code { font: 600 0.8125rem var(--mono); word-break: break-all; user-select: all; }
.faixa-aberto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 8px 8px 14px; margin-bottom: 16px; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--in); border: 1px solid color-mix(in oklab, var(--in) 35%, transparent); background: color-mix(in oklab, var(--in) 8%, var(--card)); }
.faixa-aberto .grow { flex: 1; }
.faixa-aberto .btn { color: var(--foreground); }
.campos2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 16px; }
.campos2 label, #cx-form label:not(.perfil-opcao) { display: block; font-size: 0.875rem; font-weight: 500; margin: 10px 0; }
.campos2 input { display: block; width: 100%; margin-top: 6px; box-sizing: border-box; }
.campos2 input[type=file] { height: auto; padding: 7px 10px; font-size: 0.8125rem; }
fieldset.amb { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.teste-lista { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.teste-lista li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border); font-size: 0.875rem; }
.teste-lista li span { display: grid; gap: 2px; }
.teste-lista li small { color: var(--muted-foreground); font-size: 0.8125rem; }
.teste-lista li.ok svg.i { color: var(--in); margin-top: 2px; }
.teste-lista li.falha { border-color: color-mix(in oklab, var(--out) 40%, transparent); }
.teste-lista li.falha svg.i { color: var(--out); margin-top: 2px; }
.autorizados { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.autorizados li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.autorizados li:last-child { border-bottom: 0; }
.autorizados li span { display: grid; }
.autorizados li small { color: var(--muted-foreground); font-size: 0.75rem; }
input[role=switch] { appearance: none; width: 36px; height: 20px; border-radius: 999px; background: var(--muted-bg); border: 1px solid var(--border); position: relative; cursor: pointer; transition: background .15s; flex: none; }
input[role=switch]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--background); box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: left .15s; }
input[role=switch]:checked { background: var(--primary); border-color: var(--primary); }
input[role=switch]:checked::after { left: 18px; }
input[role=switch]:disabled { opacity: .5; cursor: default; }
.ajuda { margin-top: 16px; font-size: 0.875rem; }
.ajuda summary { cursor: pointer; font-weight: 500; }
.dica-demo { margin: 12px 0 0; padding: 8px 12px; border-radius: var(--radius); font-size: 0.8125rem; color: var(--warn); background: color-mix(in oklab, var(--warn) 10%, transparent); }
input[type=file] { height: auto; padding: 6px 10px; }
input[type=file]::file-selector-button { font: 500 0.8125rem var(--sans); border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); background: var(--secondary, var(--muted-bg)); color: var(--foreground); padding: 4px 10px; margin-right: 10px; cursor: pointer; }
#t-wh .chip, #t-whe .chip { white-space: normal; height: auto; min-height: 22px; line-height: 1.3; padding-block: 2px; }
@media (max-width: 640px) { #t-wh .note { display: none; } #t-wh td, #t-whe td { padding: 8px; } }