/* =====================================================================
   Gestão de Acesso Condominial — Design System v2
   CSS puro, mobile-first, com tema claro e escuro.
   ===================================================================== */

:root {
  /* Paleta base (tema claro) */
  --bg: #eef1f7;
  --bg-grad-1: #eef2fb;
  --bg-grad-2: #f5f7fc;
  --surface: #ffffff;
  --surface-2: #f5f7fb;
  --surface-3: #eef1f6;
  --border: #e4e8f0;
  --border-strong: #d4dae6;
  --text: #131a26;
  --text-soft: #4c5666;
  --text-faint: #5f6b79; /* >= 4.5:1 sobre superfícies claras (WCAG AA texto pequeno) */

  --primary: #3b6ef5;
  --primary-dark: #2a52c9;
  --primary-soft: #e7eefe;
  --primary-grad-1: #4f7bf7;
  --primary-grad-2: #6a8ffb;

  --success: #15a05a;
  --success-soft: #e3f6ec;
  --warning: #d98309;
  --warning-soft: #fdf1df;
  --danger: #e0443e;
  --danger-soft: #fdeae9;
  --info: #3b6ef5;
  --info-soft: #e7eefe;
  --neutral: #64748b;
  --neutral-soft: #eef1f6;

  /* ---- Cores de TEXTO de status (WCAG AA sobre fundo claro/*-soft) ----
     As cores acima (--success/--warning/…) são de ACENTO: servem para barras,
     pontos e ícones grandes. Como TEXTO pequeno elas reprovam em AA (o --warning
     nem chega a 3:1 sobre branco). Estes tokens são as versões escuras, medidas
     para >= 4.5:1 sobre a superfície e sobre o respectivo *-soft. */
  --success-text: #0c7a44;   /* 4.86:1 sobre --success-soft */
  --warning-text: #96590a;   /* 5.04:1 sobre --warning-soft */
  --danger-text:  #b8322c;   /* 5.06:1 sobre --danger-soft  */
  --info-text:    #2a52c9;   /* 6.6:1 sobre --info-soft     */
  --neutral-text: #4c5666;   /* 7.4:1 sobre --neutral-soft  */
  --accent-text:  #2a52c9;   /* links/realces sobre superfície (o --primary dá 4.44:1: reprova) */

  /* ---- Botões sólidos ----
     Texto sobre cor cheia. No claro: tinta BRANCA sobre fundo escurecido.
     No escuro: tinta ESCURA sobre a cor viva (padrão de dark UI) — assim o botão
     mantém a cor forte SEM texto ilegível. */
  --on-accent: #ffffff;
  --btn-primary-bg: #2a52c9;  /* 6.6:1 com texto branco */
  --btn-success-bg: #0c7040;  /* 6.1:1 */
  --btn-danger-bg:  #c03530;  /* 5.5:1 */

  /* ---- Geometria (revisão 2026-07: linguagem mais "enterprise") ----
     Antes: raio 16/10/22px + sombras fortes (cara de app de consumo).
     Agora: raio menor e sombra sutil — a hierarquia vem da BORDA e do espaçamento,
     não da sombra. Mais denso, mais legível em telas cheias de dados. */
  --radius: 10px;      /* cards, tabelas, modais */
  --radius-sm: 6px;    /* botões, inputs, chips */
  --radius-lg: 14px;   /* modais grandes */
  --radius-xs: 4px;    /* badges, tags */
  --shadow-xs: 0 1px 2px rgba(18,26,40,.04);
  --shadow: 0 1px 3px rgba(18,26,40,.06);
  --shadow-md: 0 4px 12px rgba(18,26,40,.08);
  --shadow-lg: 0 12px 32px rgba(18,26,40,.14);
  --ring: 0 0 0 3px var(--primary-soft);

  --bottom-nav-h: 64px;
  --sidebar-w: 244px;
  --header-h: 60px;

  --icon: 20px;

  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}

/* ---------- Tema escuro ---------- */
:root[data-theme="dark"] {
  --bg: #0e1320;
  --bg-grad-1: #0d1220;
  --bg-grad-2: #121a2c;
  --surface: #161d2e;
  --surface-2: #1c2638;
  --surface-3: #222d42;
  --border: #283248;
  --border-strong: #35415b;
  --text: #eaeef6;
  --text-soft: #b8c5d6; /* contraste AA p/ texto pequeno no dark */
  --text-faint: #8b97ad; /* clareado: o antigo #6f7c93 dava 3.3:1 sobre --surface-3 (reprovava) */

  --primary: #6a8ffb;
  --primary-dark: #5379e8;
  --primary-soft: #1d2a48;
  --primary-grad-1: #5b82f6;
  --primary-grad-2: #7aa0fc;

  --success: #34c97e;
  --success-soft: #11321f;
  --warning: #e0a33c;
  --warning-soft: #34270f;
  --danger: #f1736d;
  --danger-soft: #371a1a;
  --info: #6a8ffb;
  --info-soft: #1d2a48;
  --neutral: #93a0b6;
  --neutral-soft: #222d42;

  /* No escuro os fundos *-soft são MUITO escuros, então a própria cor viva já
     passa em AA como texto — não precisa da versão escurecida do tema claro. */
  --success-text: var(--success);
  --warning-text: var(--warning);
  --danger-text:  var(--danger);
  --info-text:    var(--info);
  --neutral-text: var(--neutral);
  --accent-text:  var(--primary);

  /* Botão sólido no escuro: cor viva + tinta ESCURA (texto branco sobre estas
     cores claras dava 2.1–3.5:1). */
  --on-accent: #0d1220;
  --btn-primary-bg: var(--primary);
  --btn-success-bg: var(--success);
  --btn-danger-bg:  var(--danger);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 1px 3px rgba(0,0,0,.35);
  --shadow-md: 0 4px 14px rgba(0,0,0,.4);
  --shadow-lg: 0 14px 36px rgba(0,0,0,.55);
  --ring: 0 0 0 3px rgba(106,143,251,.25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  /* Fundo LISO (era um gradiente radial forte): num sistema de dados, o fundo
     não deve competir com o conteúdo. */
  background: var(--bg);
  color: var(--text);
  font-size: 14px;               /* mais denso (era 15px) */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* ⚠ O atributo [hidden] TEM QUE GANHAR de qualquer `display` nosso.
   A regra do navegador é `[hidden] { display: none }` — especificidade (0,1,0),
   perde para QUALQUER classe (0,1,0 empata e vence quem vier depois... e as
   nossas vêm depois). Foi assim que o `.flash { display:flex }` deixou visível o
   `<div id="wErr" class="flash flash-error" hidden>` da tela de água: uma FAIXA
   VERMELHA VAZIA, sem erro nenhum, em toda visita. Vale para todo elemento que o
   JS mostra/esconde via `.hidden = false` (wErr, notifBadge, …). */
[hidden] { display: none !important; }

a { color: var(--accent-text); text-decoration: none; }
h1,h2,h3,h4 { margin: 0 0 .4em; line-height: 1.22; letter-spacing: -.01em; }
h1 { font-size: 1.55rem; font-weight: 750; }
h2 { font-size: 1.2rem; font-weight: 700; }
h3 { font-size: 1.02rem; font-weight: 700; }
small { color: var(--text-faint); }
svg { display: inline-block; vertical-align: middle; }

/* ---------- Layout shell ---------- */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.app-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; min-height: var(--header-h);
}
/* Marca: o logo vem do H::brandLogo() (símbolo SVG + wordmark). O `.dot` antigo
   saiu — o símbolo já é o ponto de cor do header. */
.app-header .brand { font-weight: 700; font-size: 1.04rem; display: flex; align-items: center; letter-spacing: -.01em; color: var(--text); text-decoration: none; }
.app-header .brand:hover { color: var(--text); }
.app-header .spacer { flex: 1; }
.app-header .user-chip { text-align: right; line-height: 1.15; }
.app-header .user-chip .name { font-weight: 650; font-size: .9rem; }
.app-header .user-chip .role { font-size: .72rem; color: var(--text-faint); }
.env-tag { font-size: .72rem; padding: 3px 9px; border-radius: 999px; background: var(--warning-soft); color: var(--warning-text); font-weight: 800; letter-spacing: .03em; }

/* Botão de tema (e demais ícones do header) — alvo de toque confortável. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft);
  transition: background .15s, color .15s, transform .15s;
}
@media (pointer: coarse) { .theme-toggle { width: 44px; height: 44px; } }
/* Botão de PÂNICO: precisa ser inconfundível no meio dos ícones do header. */
.theme-toggle.panic-btn { border-color: var(--danger); background: var(--danger-soft); color: var(--danger-text); }
.theme-toggle.panic-btn:hover { background: var(--danger); color: #fff; }
.theme-toggle:hover { color: var(--text); background: var(--surface-3); }
.theme-toggle svg { width: 19px; height: 19px; }

/* Sino de notificações */
.notif-wrap { position: relative; display: inline-flex; }
.notif-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger, #d23b3b); color: #fff; font-size: .66rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface); }
.notif-panel { position: absolute; top: 46px; right: 0; width: 320px; max-width: 88vw; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 70; overflow: hidden; }
.notif-head { padding: 10px 14px; font-weight: 700; font-size: .82rem; border-bottom: 1px solid var(--border); color: var(--text-soft); }
.notif-empty { padding: 18px 14px; text-align: center; color: var(--text-faint); font-size: .85rem; }
.notif-item { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; font-size: .86rem; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface-2); }
.notif-item .notif-mk { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--text-faint); }
.notif-item.danger .notif-mk { background: var(--danger); }
.notif-item.warning .notif-mk { background: var(--warning); }
.notif-item.info .notif-mk { background: var(--primary); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.app-body { flex: 1; display: flex; }
.sidebar { display: none; }
.main {
  flex: 1; min-width: 0;
  padding: 18px 16px calc(var(--bottom-nav-h) + 22px);
  max-width: 1120px; margin: 0 auto; width: 100%;
}

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  height: var(--bottom-nav-h);
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-around; align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom);
}
/* O item "Menu" é um <button> (abre o drawer); os demais são links. */
.bottom-nav a, .bottom-nav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--text-faint); font-size: .72rem; font-weight: 650;
  position: relative; transition: color .15s;
  background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0;
}
.bottom-nav a.active { color: var(--accent-text); }
.bottom-nav a.active::before { content: ""; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary); }
.bottom-nav a svg, .bottom-nav button svg { width: 23px; height: 23px; }

/* ---------- Cards ---------- */
/* A hierarquia vem da BORDA (não da sombra): card liso, borda 1px, sombra mínima. */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-xs);
  padding: 16px; margin-bottom: 12px;
}
.card.tight { padding: 12px 14px; }
.card-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 700; margin-bottom: 10px; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
.stat {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); display: block;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.stat:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }
.stat::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--neutral); opacity: .85; }
.stat .label { font-size: .77rem; color: var(--text-soft); font-weight: 650; }
.stat .value { font-size: 1.85rem; font-weight: 820; margin-top: 4px; letter-spacing: -.02em; }
.stat.accent-green::after { background: var(--success); }
.stat.accent-orange::after { background: var(--warning); }
.stat.accent-red::after { background: var(--danger); }
.stat.accent-blue::after { background: var(--primary); }
.stat.accent-green .value { color: var(--success-text); }
.stat.accent-orange .value { color: var(--warning-text); }
.stat.accent-red .value { color: var(--danger-text); }
.stat.accent-blue .value { color: var(--accent-text); }

/* ---------- List cards (mobile) ---------- */
.list-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 15px; margin-bottom: 11px;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.list-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.list-card .lc-title { font-weight: 720; font-size: 1rem; }
.list-card .lc-sub { color: var(--text-soft); font-size: .85rem; margin-top: 2px; }
.list-card .lc-meta { color: var(--text-faint); font-size: .82rem; margin-top: 4px; }

/* Miniatura de foto em linhas de lista (pessoas/veículos) */
.rowthumb { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; background: var(--surface-3); border: 1px solid var(--border); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.rowthumb-empty { color: var(--text-faint); font-weight: 800; font-size: 1rem; }
.data td .rowthumb { width: 38px; height: 38px; border-radius: 8px; }
.list-card .lc-actions { margin-top: 11px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font-size: .71rem; font-weight: 750; white-space: nowrap; line-height: 1.5;
  background: var(--neutral-soft); color: var(--neutral);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.badge-success { background: var(--success-soft); color: var(--success-text); }
.badge-warning { background: var(--warning-soft); color: var(--warning-text); }
.badge-danger  { background: var(--danger-soft); color: var(--danger-text); }
.badge-info    { background: var(--info-soft); color: var(--info-text); }
.badge-neutral { background: var(--neutral-soft); color: var(--neutral-text); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: .875rem; font-weight: 600; cursor: pointer; line-height: 1.2;
  padding: 8px 15px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: var(--surface-2); color: var(--text);
  transition: box-shadow .12s, filter .12s, background .12s, border-color .12s; text-align: center;
}
/* Sem "pulo" no hover (era translateY -1px): num painel denso isso vira ruído.
   O feedback vem do brilho/sombra. */
.btn:hover { filter: brightness(1.06); }
.btn:active { filter: brightness(.96); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--btn-primary-bg); color: var(--on-accent); }
.btn-primary:hover { box-shadow: var(--shadow); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-danger { background: var(--btn-danger-bg); color: var(--on-accent); }
.btn-success { background: var(--btn-success-bg); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--accent-text); padding: 8px 11px; }
.btn-ghost:hover { background: var(--primary-soft); }
.btn-sm { padding: 7px 13px; font-size: .82rem; border-radius: 9px; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Forms ---------- */
.field { margin-bottom: 15px; }
.field label { display: block; font-weight: 650; font-size: .85rem; margin-bottom: 6px; color: var(--text-soft); }
.field .hint { font-size: .76rem; color: var(--text-faint); margin-top: 5px; }
.input, .select, .textarea {
  width: 100%; padding: 11px 13px; font-size: .95rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.textarea { min-height: 84px; resize: vertical; }
.field-error { color: var(--danger-text); font-size: .78rem; margin-top: 4px; font-weight: 600; }
/* Legenda de obrigatórios (o "*" sozinho não é anunciado nem óbvio). */
.form-required-note { font-size: .8rem; color: var(--text-faint); margin: 0 0 12px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 15px; }

.day-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.day-picker label {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  cursor: pointer; font-size: .8rem; font-weight: 700; user-select: none; transition: all .12s;
}
.day-picker input { position: absolute; opacity: 0; width: 0; height: 0; }
.day-picker label:has(input:checked) { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--on-accent); }
/* O input real tem 0x0 — sem isto o anel de foco fica invisível no teclado. */
.day-picker label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Tables (desktop) ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
table.data { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
/* Densidade maior (era 12x15): num sistema de dados cabem mais linhas sem rolar. */
table.data th, table.data td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: .875rem; }
table.data th { background: var(--surface-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-faint); font-weight: 700; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background .12s; }
table.data tbody tr:hover td { background: var(--surface-2); }

/* ---------- Flash / alerts ---------- */
.flash { padding: 13px 15px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: .9rem; font-weight: 550; border: 1px solid transparent; display: flex; gap: 9px; align-items: flex-start; }
.flash .flash-close {
  margin-left: auto; background: none; border: 0; cursor: pointer; color: inherit;
  font-size: 1.15rem; line-height: 1; opacity: .65;
  /* Era ~18x22px: alvo pequeno demais, e é o ÚNICO jeito de fechar um erro
     (que não some sozinho). */
  min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; flex: 0 0 auto;
}
.flash .flash-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
@media (pointer: coarse) { .flash .flash-close { min-width: 44px; min-height: 44px; } }
.flash-success { background: var(--success-soft); color: var(--success-text); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.flash-error { background: var(--danger-soft); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: .85rem; margin-bottom: 12px; border: 1px solid transparent; }
.alert-warning { background: var(--warning-soft); color: var(--warning-text); border-color: color-mix(in srgb, var(--warning) 25%, transparent); }
.alert-danger { background: var(--danger-soft); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.alert-info { background: var(--info-soft); color: var(--info-text); border-color: color-mix(in srgb, var(--info) 25%, transparent); }

/* ---------- Page header ---------- */
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
/* O título da tela é SEMPRE <h1> (era <h2> em 56 telas, que ficavam sem h1 nenhum
   e quebravam a navegação por headings). Tamanho normalizado aqui para que a
   promoção h2->h1 não deixe os títulos gigantes. */
.page-head h1 { margin: 0; font-size: 1.35rem; font-weight: 750; display: flex; align-items: center; gap: 9px; }
.page-head .spacer { flex: 1; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 40px 16px; color: var(--text-soft); }
.empty .icon { font-size: 2rem; margin-bottom: 8px; }
.empty p { margin: 4px 0 16px; font-weight: 550; }

/* ---------- Search ---------- */
.search-box { position: relative; margin-bottom: 14px; }
.search-box input { padding-left: 40px; }
.search-box .si { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-faint); }

/* ---------- Filters ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filters .input, .filters .select { width: auto; min-width: 120px; flex: 1 1 140px; }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: 6px; justify-content: center; margin: 18px 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: 8px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); font-size: .85rem; font-weight: 650; color: var(--text-soft);
}
.pagination a:hover { background: var(--surface-2); }
.pagination .current { background: var(--btn-primary-bg); color: var(--on-accent); border-color: var(--btn-primary-bg); }
.pagination { margin: 12px 0 0; }

/* Rodapé de listagem: seletor "por página" + paginação */
.list-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 16px 0 4px; }
.perpage { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 0; }
.perpage-label { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--text-soft); font-weight: 600; }
.perpage .select { width: auto; min-width: 76px; padding-top: 6px; padding-bottom: 6px; }
.perpage-total { font-size: .8rem; color: var(--text-faint); }

/* ---------- Chaves (acionar portões) ---------- */
.key-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.key-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px; box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.key-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.key-card.is-off { opacity: .72; }
.key-top { display: flex; align-items: center; justify-content: space-between; }
.key-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-strong, var(--primary)));
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.key-card.is-off .key-ico { background: var(--surface-2); color: var(--text-faint); box-shadow: none; }
.key-status { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .02em; }
.key-status.on { color: var(--success-text); background: var(--success-soft); }
.key-status.off { color: var(--danger-text); background: var(--danger-soft); }
.key-name { font-size: 1.04rem; font-weight: 750; line-height: 1.2; }
.key-desc { font-size: .82rem; color: var(--text-soft); line-height: 1.35; }
.key-foot { margin-top: auto; padding-top: 6px; }
.key-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; padding-top: 11px; padding-bottom: 11px; font-weight: 700; }
@media (max-width: 560px) {
  .key-grid { grid-template-columns: 1fr; gap: 11px; }
  .key-card { padding: 14px; }
}

/* ---------- Modal ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(8,12,22,.55); backdrop-filter: blur(3px); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .15s ease; }
/* Respeita o atributo [hidden]: sem isto o display:flex acima deixaria o modal
   sempre visível (era por isso que o modal de captura de foto abria sozinho na
   edição de pessoa). Especificidade (0,2,0) vence a regra base (0,1,0). */
.modal-overlay[hidden] { display: none; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 22px; width: 100%; max-width: 430px; animation: pop .16s ease; }
.modal h3 { margin-bottom: 8px; }
.modal p { color: var(--text-soft); font-size: .92rem; }
.modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- Detail sections ---------- */
.section { margin-bottom: 18px; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; font-size: .9rem; }
.kv dt { color: var(--text-faint); font-weight: 650; }
.kv dd { margin: 0; }

.wizard-steps { display: flex; gap: 6px; margin-bottom: 18px; }
.wizard-steps .step { flex: 1; text-align: center; font-size: .73rem; font-weight: 800; color: var(--text-faint); padding-bottom: 9px; border-bottom: 3px solid var(--border); transition: all .15s; }
.wizard-steps .step.active { color: var(--accent-text); border-color: var(--primary); }
.wizard-steps .step.done { color: var(--success-text); border-color: var(--success); }

.muted { color: var(--text-faint); }
.text-right { text-align: right; }
.mt { margin-top: 14px; }
.mb { margin-bottom: 14px; }
.hide { display: none; }
code { background: var(--surface-3); padding: 2px 6px; border-radius: 6px; font-size: .85em; }

/* ---------- Desktop ---------- */
@media (min-width: 860px) {
  .bottom-nav { display: none; }
  .sidebar {
    display: block; width: var(--sidebar-w); flex-shrink: 0;
    background: var(--surface); border-right: 1px solid var(--border);
    padding: 14px 12px; position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .sidebar .group-label { font-size: .67rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 800; padding: 16px 12px 6px; }
  .sidebar a.nav-item {
    display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-sm);
    color: var(--text-soft); font-weight: 650; font-size: .9rem; margin-bottom: 2px; transition: background .12s, color .12s;
  }
  .sidebar a.nav-item:hover { background: var(--surface-2); color: var(--text); }
  .sidebar a.nav-item.active { background: var(--primary-soft); color: var(--primary-dark); }
  :root[data-theme="dark"] .sidebar a.nav-item.active { color: var(--primary); }
  .main { padding: 24px 28px 32px; max-width: none; }
  .form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .mobile-only { display: none !important; }
}
@media (max-width: 859px) {
  .desktop-only { display: none !important; }
}

/* ---------- Accordion de navegação (sidebar desktop + drawer mobile) ---------- */
/* Cada seção é um <details>; o <summary> é o cabeçalho. SÓ UMA seção fica aberta
   por vez (app.js → initNavAccordion); sem JS, o servidor já abre só a da tela
   atual. Resolve o "não cabe na tela" com muitos módulos.

   ⚠ O cabeçalho é um RÓTULO DE SEÇÃO, não um item de menu. Por isso ele NÃO tem
   ícone à esquerda (só os itens têm), NÃO ganha pílula de fundo no hover e usa
   um tamanho/cor próprios. Antes ele era ícone + texto + pílula — visualmente
   idêntico a um item, e o usuário clicava achando que ia para algum lugar. */
.nav-group { margin: 0; }
.nav-group + .nav-group { border-top: 1px solid var(--border); }
.nav-group > summary.nav-group-head {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 11px 12px 9px; border-radius: 0; background: none;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-faint); font-weight: 800; user-select: none;
  transition: color .12s;
}
.nav-group > summary.nav-group-head::-webkit-details-marker { display: none; } /* Safari: some o triângulo */
.nav-group > summary.nav-group-head::marker { content: ""; }                    /* demais navegadores */
.nav-group > summary.nav-group-head:hover { color: var(--accent-text); }
.nav-group > summary.nav-group-head:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.nav-group .nav-group-name { flex: 1; min-width: 0; }
.nav-group .nav-chevron { width: 14px; height: 14px; flex: 0 0 14px; opacity: .55; transition: transform .18s ease; }
.nav-group[open] > summary .nav-chevron { transform: rotate(180deg); opacity: .9; }
/* Aberta = destaque: é o único cabeçalho colorido da lista, então o olho acha
   na hora em que seção você está. */
.nav-group[open] > summary.nav-group-head { color: var(--accent-text); }
/* Trilho: amarra visualmente os itens ao rótulo que os abriu. */
.nav-group-items {
  padding: 0 0 10px 0; margin-left: 12px; padding-left: 8px;
  border-left: 2px solid var(--border);
}
.nav-group[open] > .nav-group-items { border-left-color: var(--primary-soft); }

/* ---------- Drawer de menu (mobile) ---------- */
.menu-drawer-overlay { padding: 0; }
.menu-drawer {
  width: min(86vw, 330px); height: 100%; margin-left: auto;
  background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow-y: auto;
  padding: 8px 12px calc(env(safe-area-inset-bottom) + 14px);
  box-shadow: var(--shadow-lg);
}
.menu-drawer-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 4px 10px;
  position: sticky; top: 0; z-index: 1; background: var(--surface);
  border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.menu-drawer-head strong { font-size: 1.05rem; }
.menu-drawer-nav { flex: 1; }
.menu-drawer .nav-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: var(--radius-sm); color: var(--text-soft); font-weight: 650; font-size: .95rem;
  margin-bottom: 1px;
}
.menu-drawer .nav-item:hover { background: var(--surface-2); }
.menu-drawer .nav-item.active { background: var(--primary-soft); color: var(--primary-dark); }
:root[data-theme="dark"] .menu-drawer .nav-item.active { color: var(--primary); }
.menu-drawer-foot { margin-top: auto; padding-top: 12px; }

/* Botão "Sair" da sidebar (é <button>, não <a> — precisa do mesmo visual). */
.sidebar .nav-logout { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.sidebar .nav-logout .nav-item {
  width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border-radius: var(--radius-sm); color: var(--text-soft); font-weight: 650; font-size: .9rem;
  background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit;
}
.sidebar .nav-logout .nav-item:hover { background: var(--surface-2); color: var(--text); }

/* ---------- CRÍTICO: tamanho dos ícones de navegação ---------- */
/* SVGs sem width/height explícitos esticam para preencher o flex container.
   Fixamos um tamanho para todos os ícones de navegação. */
.sidebar a.nav-item svg,
.bottom-nav a svg,
.bottom-nav button svg,
.nav-item svg,
.menu-link svg {
  width: var(--icon); height: var(--icon);
  flex: 0 0 var(--icon); stroke-width: 2;
}
.bottom-nav a svg, .bottom-nav button svg { width: 23px; height: 23px; flex-basis: 23px; }

/* ---------- Refinamentos mobile / UX (revisão geral) ---------- */
.table-wrap { -webkit-overflow-scrolling: touch; }

/* Tabelas que viram CARTÕES no celular (opt-in: class="data cards-mobile").
   Cada linha vira um card; cada célula mostra o rótulo da coluna (data-label). */
@media (max-width: 640px) {
  .table-wrap:has(table.cards-mobile) { box-shadow: none; overflow: visible; border-radius: 0; }
  table.data.cards-mobile, table.data.cards-mobile tbody, table.data.cards-mobile tr, table.data.cards-mobile td { display: block; width: 100%; }
  table.data.cards-mobile thead { display: none; }
  table.data.cards-mobile tr { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; padding: 4px 12px; background: var(--surface); box-shadow: var(--shadow); }
  table.data.cards-mobile td { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: right; padding: 9px 0; border: none; border-bottom: 1px solid var(--border); font-size: .92rem; }
  table.data.cards-mobile td:last-child { border-bottom: none; }
  table.data.cards-mobile td::before { content: attr(data-label); font-weight: 700; color: var(--text-faint); font-size: .74rem; text-transform: uppercase; letter-spacing: .02em; text-align: left; flex: 0 0 auto; }
  /* Células sem rótulo (foto, ações): ocupam a linha inteira, centralizadas. */
  table.data.cards-mobile td[data-label=""] { justify-content: center; }
  table.data.cards-mobile td[data-label=""]::before { content: none; }
  table.data.cards-mobile td.text-right { justify-content: center; }
}
@media (max-width: 640px) {
  /* iOS: fonte >= 16px no campo evita o zoom automático ao focar. */
  .input, .select, .textarea { font-size: 16px; }
  /* Cabeçalho de página: título + ações quebram em vez de estourar. */
  .page-head { flex-wrap: wrap; gap: 8px 10px; }
  .page-head h1 { font-size: 1.3rem; }
  .page-head .spacer { display: none; }
  /* Botões pequenos com área de toque mais confortável. */
  .btn-sm { padding: 9px 14px; }
  /* Detalhes (rótulo/valor) com coluna de rótulo mais estreita. */
  .kv { grid-template-columns: 96px 1fr; gap: 6px 12px; }
  /* Um pouco mais justo para telas estreitas. */
  .main { padding-left: 13px; padding-right: 13px; }
  .card { padding: 15px; }
  .btn-row .btn { flex: 1 1 auto; }
}

/* =====================================================================
   Refinamento visual v2.1 — placa Mercosul + acentos de cor / ícones
   ===================================================================== */

/* ---------- Placa Mercosul (H::plate) ---------- */
.plate-tag {
  display: inline-flex; flex-direction: column; align-items: stretch;
  min-width: 74px; border-radius: 5px; overflow: hidden; vertical-align: middle;
  border: 1.5px solid #23262b; background: #f7f8f8; line-height: 1;
  box-shadow: var(--shadow-xs);
  font-family: ui-monospace, "SFMono-Regular", "DejaVu Sans Mono", "Courier New", monospace;
}
.plate-tag .plate-top {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(180deg, #1f52cc, #123d9e); color: #fff;
  font-size: .5rem; font-weight: 800; letter-spacing: .12em; padding: 1px 4px 2px;
}
.plate-tag .plate-flag {
  width: 11px; height: 7px; border-radius: 1px; flex: 0 0 auto;
  background: linear-gradient(180deg, #159a3f 0 44%, #f4d000 44% 76%, #159a3f 76%);
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.3);
}
.plate-tag .plate-num {
  padding: 2px 7px 3px; text-align: center; color: #15181c;
  font-weight: 800; font-size: .92rem; letter-spacing: .12em;
}
.plate-tag.plate-sm { min-width: 60px; }
.plate-tag.plate-sm .plate-top { font-size: .44rem; padding: 1px 3px; }
.plate-tag.plate-sm .plate-num { font-size: .76rem; padding: 1px 5px 2px; letter-spacing: .09em; }
/* A placa é um objeto físico (clara); no dark só suavizamos a borda. */
:root[data-theme="dark"] .plate-tag { border-color: #3a3f47; box-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* ---------- Título de card com acento colorido ---------- */
.card-title { display: flex; align-items: center; gap: 8px; }
.card-title::before {
  content: ""; width: 4px; height: 13px; border-radius: 3px; flex: 0 0 auto;
  background: linear-gradient(180deg, var(--primary-grad-1), var(--primary-grad-2));
}

/* ---------- Cabeçalho de página: fio inferior sutil ---------- */
.page-head { padding-bottom: 12px; border-bottom: 1px solid var(--border); }

/* ---------- Cards de estatística tingidos pelo acento ---------- */
.stat::after { width: 5px; border-radius: 0 3px 3px 0; }
.stat.accent-blue   { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), var(--surface)); }
.stat.accent-green  { background: linear-gradient(180deg, color-mix(in srgb, var(--success) 9%, var(--surface)), var(--surface)); }
.stat.accent-orange { background: linear-gradient(180deg, color-mix(in srgb, var(--warning) 10%, var(--surface)), var(--surface)); }
.stat.accent-red    { background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 9%, var(--surface)), var(--surface)); }

/* ---------- Menu lateral ativo com acento em gradiente ---------- */
.sidebar a.nav-item.active {
  background: linear-gradient(90deg, var(--primary-soft), transparent);
  box-shadow: inset 3px 0 0 var(--primary);
}

/* ---------- Botões: cor CHEIA (o gradiente clareava o fundo e derrubava o
   contraste do texto para 2.1–3.5:1 — reprovava em AA nos dois temas). Sem o
   "glow" colorido da v2.1 — sombra sutil só no hover (visual enterprise). ---------- */
.btn-success { background: var(--btn-success-bg); color: var(--on-accent); }
.btn-danger  { background: var(--btn-danger-bg);  color: var(--on-accent); }
.btn-success:hover, .btn-danger:hover { box-shadow: var(--shadow); }

/* ---------- Badges com contorno sutil (destacam sobre fundos tingidos) ---------- */
.badge { border: 1px solid color-mix(in srgb, currentColor 20%, transparent); }

/* ---------- Seção atual no cabeçalho (desktop) ---------- */
.app-section { display: none; }
@media (min-width: 860px) {
  .app-section { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--border-strong); color: var(--text-soft); font-weight: 700; font-size: .92rem; }
  .app-section .as-ico { width: 18px; height: 18px; color: var(--primary); flex: 0 0 auto; }
  .app-section .as-txt { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- Ícone do cabeçalho de página (opt-in: .ph-ico no page-head) ---------- */
.page-head .ph-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, var(--surface)), var(--surface));
  color: var(--primary); border: 1px solid var(--border);
}
.page-head .ph-ico svg { width: 21px; height: 21px; }

/* ---------- Empty state com ícone destacado ---------- */
.empty .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 12px;
  background: var(--surface-2); color: var(--text-faint); font-size: 1.9rem;
}
.empty .icon svg { width: 30px; height: 30px; }

/* ---------- Ícone nos stat cards (dashboard) ---------- */
.stat { position: relative; }
.stat .stat-ico {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: color-mix(in srgb, currentColor 14%, transparent);
  opacity: .9;
}
.stat .stat-ico svg { width: 19px; height: 19px; }
.stat.accent-blue .stat-ico { color: var(--primary); }
.stat.accent-green .stat-ico { color: var(--success); }
.stat.accent-orange .stat-ico { color: var(--warning); }
.stat.accent-red .stat-ico { color: var(--danger); }

/* ===================================================================
   Acessibilidade
   =================================================================== */
/* Foco visível p/ teclado (WCAG 2.4.7) sem afetar o clique de mouse. */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 5px;
}
/* Alvos de toque confortáveis em telas de toque (WCAG 2.5.5 = 44x44). */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm, .btn-ghost { min-height: 44px; }
  .pagination a, .pagination span { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .bottom-nav a { min-height: 44px; }
}
/* Respeita "reduzir movimento". */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
/* "Pular para o conteúdo" — aparece só ao focar via teclado. */
.skip-link {
  position: absolute; left: 12px; top: -52px; z-index: 100;
  background: var(--btn-primary-bg); color: var(--on-accent); padding: 9px 14px;
  border-radius: 0 0 10px 10px; font-weight: 700; transition: top .15s;
}
.skip-link:focus { top: 0; color: var(--on-accent); }

/* ---------- Chip de imagem de dispositivo (tipos/produtos do Omada) ----------
   As ilustrações são cinza p/ fundo claro; o chip claro as mostra bem nos dois
   temas (padrão do próprio Omada). Fallback: ícone vetorial do sistema. */
/* ⚠ O chip NÃO pode ser claro: as artes de produto/tipo são quase todas BRANCAS
   (roteador branco, AP branco, notebook prateado…) e sumiam no fundo claro.
   Cinza-escuro translúcido: dá contraste com a arte branca e funciona nos dois
   temas (no claro vira um cinza médio; no escuro, um cinza mais profundo). */
.dev-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(38, 46, 60, .72);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius-sm);
  flex: 0 0 auto; overflow: hidden;
}
.dev-chip img { width: 78%; height: 78%; object-fit: contain; }
/* Fallback vetorial: aqui o ícone é de cor única e segue o tema — chip neutro. */
.dev-chip.dev-chip-icon { background: var(--surface-2); border-color: var(--border); color: var(--text-soft); }
.dev-chip.dev-chip-icon svg { width: 55%; height: 55%; }
:root[data-theme="dark"] .dev-chip { background: rgba(18, 24, 34, .78); }

/* Só para leitor de tela (rótulos de tabela, status ao vivo, legendas). */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Ordenação por clique no cabeçalho ---------- */
.th-sortable { cursor: pointer; user-select: none; -webkit-user-select: none; white-space: nowrap; transition: background .12s, color .12s; }
.th-sortable:hover { color: var(--text); background: var(--surface-3); }
.th-arrow { color: var(--accent-text); font-weight: 800; font-size: .8em; }

/* ---------- Estado "ao vivo" x "sem conexão" (telas de operação/portaria) ----------
   Num painel de portaria, mostrar dado velho como se fosse novo é risco real.
   Estas classes dão o vocabulário único: ponto pulsante + rótulo TEXTUAL. */
.live-flag { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--success-text); }
.live-flag .live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); flex: 0 0 auto; animation: livePulse 1.6s ease-in-out infinite; }
.live-flag.stale { color: var(--danger-text); }
.live-flag.stale .live-dot { background: var(--danger); animation: none; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Estado vazio: alias tolerante (3 telas usavam .empty-state, que não existia). */
.empty-state { text-align: center; padding: 40px 16px; color: var(--text-soft); }

/* ---------- Barra de status com TEXTO (calendário e Gantt de OS) ----------
   Era cor cheia + texto branco (branco sobre laranja/azul-claro dá ~2.5:1:
   reprova). Agora fundo suave + texto no token escuro — passa em AA e segue o tema. */
.status-bar {
  display: block; font-size: .72rem; line-height: 1.25; text-decoration: none;
  border-radius: 5px; padding: 1px 5px; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid transparent; font-weight: 600;
}
.sb-success { background: var(--success-soft); color: var(--success-text); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.sb-warning { background: var(--warning-soft); color: var(--warning-text); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.sb-danger  { background: var(--danger-soft);  color: var(--danger-text);  border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.sb-info    { background: var(--info-soft);    color: var(--info-text);    border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.sb-neutral { background: var(--neutral-soft); color: var(--neutral-text); border-color: color-mix(in srgb, var(--neutral) 35%, transparent); }

[x-cloak] { display: none !important; }