/* =========================================================
   Nexo - estilos proprios por cima do Bootstrap 5
   ========================================================= */

:root {
  --nexo-sidebar-w: 240px;
  --nexo-bg: #f4f6f9;
  --nexo-surface: #ffffff;
  --nexo-border: #e3e7ee;
  --nexo-text: #1f2937;
  --nexo-muted: #6b7280;
  --nexo-brand: #0f766e;
  --nexo-brand-dark: #0b5e57;
  --nexo-brand-soft: #e6f4f2;

  /* cores das colunas do kanban */
  --col-urgente: #dc2626;
  --col-demanda: #2563eb;
  --col-pendencia: #d97706;
  --col-decisao: #059669;
  --col-proximoPasso: #7c3aed;
  --col-resolvido: #64748b;

  --bs-body-bg: var(--nexo-bg);
  --bs-body-color: var(--nexo-text);
  --bs-border-color: var(--nexo-border);
  --bs-link-color: var(--nexo-brand);
  --bs-link-hover-color: var(--nexo-brand-dark);
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html, body { height: 100%; }
body { font-size: 0.925rem; }

/* Botões e controles na cor da marca */
.btn-primary {
  --bs-btn-bg: var(--nexo-brand);
  --bs-btn-border-color: var(--nexo-brand);
  --bs-btn-hover-bg: var(--nexo-brand-dark);
  --bs-btn-hover-border-color: var(--nexo-brand-dark);
  --bs-btn-active-bg: #094c46;
  --bs-btn-active-border-color: #094c46;
  --bs-btn-disabled-bg: #7fb5b0;
  --bs-btn-disabled-border-color: #7fb5b0;
}
.btn-outline-primary {
  --bs-btn-color: var(--nexo-brand);
  --bs-btn-border-color: var(--nexo-brand);
  --bs-btn-hover-bg: var(--nexo-brand);
  --bs-btn-hover-border-color: var(--nexo-brand);
  --bs-btn-active-bg: var(--nexo-brand);
  --bs-btn-active-border-color: var(--nexo-brand);
}
.form-check-input:checked { background-color: var(--nexo-brand); border-color: var(--nexo-brand); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #6fb3ac;
  box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.18);
}
.text-brand { color: var(--nexo-brand) !important; }
.bg-brand-soft { background-color: var(--nexo-brand-soft) !important; }

/* ---------- Shell (sidebar + topbar) ---------- */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  width: var(--nexo-sidebar-w);
  flex: 0 0 var(--nexo-sidebar-w);
  background: #0f1f2e;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.app-sidebar .brand {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.1rem 1.25rem;
  color: #fff; text-decoration: none; font-weight: 600; font-size: 1.05rem;
}
.app-sidebar .brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, #14b8a6, #0f766e);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .9rem;
}
.app-sidebar .nav-section {
  padding: .9rem 1.25rem .35rem;
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #64748b;
}
.app-sidebar .nav-link {
  color: #cbd5e1; padding: .55rem 1.25rem; display: flex; align-items: center; gap: .65rem;
  border-left: 3px solid transparent; font-size: .9rem;
}
.app-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.04); }
.app-sidebar .nav-link.active {
  color: #fff; background: rgba(20,184,166,.12); border-left-color: #14b8a6;
}
.app-sidebar .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.app-sidebar .sidebar-footer {
  margin-top: auto; padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.06); font-size: .8rem; color: #94a3b8;
}

.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
  background: var(--nexo-surface);
  border-bottom: 1px solid var(--nexo-border);
  padding: .8rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  position: sticky; top: 0; z-index: 1020;
}
.app-topbar h1 { font-size: 1.15rem; margin: 0; font-weight: 600; }
.app-topbar .topbar-meta { color: var(--nexo-muted); font-size: .85rem; }

/* ---------- Topbar: menu de conta ---------- */
.topbar-menu { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }

.topbar-icon-btn {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid transparent; background: transparent; color: var(--nexo-muted);
  display: grid; place-items: center; font-size: 1.05rem; cursor: pointer;
}
.topbar-icon-btn:hover { background: #f1f5f9; color: var(--nexo-text); }

.topbar-badge {
  position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 999px; background: #dc2626; color: #fff; font-size: .65rem; font-weight: 700;
  line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--nexo-surface);
}

.topbar-wa-status {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .7rem; border-radius: 999px; background: #f1f5f9;
  color: var(--nexo-text); text-decoration: none; font-size: .8rem; font-weight: 500;
}
.topbar-wa-status:hover { background: #e6ebf1; color: var(--nexo-text); }

.topbar-avatar-btn { border: 0; background: transparent; padding: 0; border-radius: 50%; cursor: pointer; }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6, #0f766e);
  color: #fff; font-weight: 700; font-size: .9rem;
  display: grid; place-items: center;
}

.topbar-notif-menu { width: 340px; max-width: 90vw; padding: 0; overflow: hidden; }
.topbar-notif-header {
  padding: .65rem 1rem; font-weight: 600; font-size: .85rem;
  border-bottom: 1px solid var(--nexo-border);
}
.topbar-notif-list-wrap { max-height: 360px; overflow-y: auto; }
.topbar-notif-item {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .65rem 1rem; text-decoration: none; color: var(--nexo-text);
  border-bottom: 1px solid var(--nexo-border);
}
.topbar-notif-item:last-child { border-bottom: 0; }
.topbar-notif-item:hover { background: #f8fafc; }
.topbar-notif-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: .4rem; flex: 0 0 auto; background: transparent; }
.topbar-notif-item.is-unread .topbar-notif-dot { background: var(--nexo-brand); }
.topbar-notif-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.topbar-notif-body strong { font-size: .85rem; font-weight: 600; }
.topbar-notif-body span {
  font-size: .8rem; color: var(--nexo-muted); overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.topbar-notif-body time { font-size: .7rem; color: #9ca3af; }
.topbar-notif-empty { padding: 1.25rem 1rem; text-align: center; color: var(--nexo-muted); font-size: .85rem; }

.app-content { padding: 1.5rem; flex: 1 1 auto; }

@media (max-width: 991.98px) {
  .app-sidebar { width: 64px; flex-basis: 64px; }
  .app-sidebar .brand span, .app-sidebar .nav-link span, .app-sidebar .nav-section, .app-sidebar .sidebar-footer { display: none; }
  .app-sidebar .nav-link { justify-content: center; padding: .7rem 0; }
  .app-sidebar .brand { justify-content: center; padding: 1rem 0; }
}

/* ---------- Cards genéricos ---------- */
.card { border-color: var(--nexo-border); box-shadow: 0 1px 2px rgba(16,24,40,.04); background: var(--nexo-surface); }
.card-header { background: transparent; border-bottom-color: var(--nexo-border); font-weight: 600; }
.section-title { font-size: 1rem; font-weight: 600; margin-bottom: .25rem; }
.section-desc { color: var(--nexo-muted); font-size: .85rem; margin-bottom: 1rem; }
.page-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }

/* ---------- Estados ---------- */
.empty-state {
  text-align: center; padding: 3rem 1.5rem; color: var(--nexo-muted);
  border: 1px dashed var(--nexo-border); border-radius: .75rem; background: var(--nexo-surface);
}
.empty-state i { font-size: 2rem; display: block; margin-bottom: .75rem; color: #9ca3af; }
.empty-state strong { display: block; color: var(--nexo-text); margin-bottom: .25rem; }

.skeleton {
  position: relative; overflow: hidden; background: #e9edf2; border-radius: .375rem; color: transparent !important;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform: translateX(-100%); animation: shimmer 1.3s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton-line { height: .8rem; margin-bottom: .55rem; }
.skeleton-line:last-child { margin-bottom: 0; }
.skeleton-card { background: #fff; border-radius: .6rem; padding: .85rem; border: 1px solid var(--nexo-border); }

/* ---------- Kanban ---------- */
/* Flex (e não grid) porque a coluna "Resolvido" pode ficar minimizada
   com largura fixa enquanto as outras dividem o espaço restante. */
.kanban-board {
  display: flex;
  gap: .75rem;
  align-items: stretch;
  overflow-x: auto;
  padding-bottom: .5rem;
}

/* O mínimo é baixo o suficiente para as 5 categorias mais a coluna
   "Resolvido" minimizada caberem juntas em desktop, sem rolagem. */
.kanban-column {
  background: #eaeef3;
  border-radius: .75rem;
  display: flex; flex-direction: column;
  min-height: 60vh;
  flex: 1 1 0; min-width: 186px;
  transition: flex-basis .18s ease, min-width .18s ease;
}
/* Altura mínima fixa para que os cards da primeira linha fiquem alinhados
   entre colunas, mesmo quando um título quebra em duas linhas. */
.kanban-column-header {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .85rem;
  min-height: 3.4rem;
  font-weight: 600; font-size: .9rem;
}
.kanban-column-header .titulo { line-height: 1.25; }
.kanban-column-header .btn-collapse {
  border: 0; background: transparent; color: var(--nexo-muted);
  padding: 0 .1rem; line-height: 1; border-radius: .25rem; cursor: pointer;
}
.kanban-column-header .btn-collapse:hover { color: var(--nexo-text); background: rgba(0,0,0,.06); }

/* ---------- Coluna minimizada (estilo ClickUp) ---------- */
.kanban-column.is-collapsed {
  flex: 0 0 52px; min-width: 52px; width: 52px;
  background: #e4e9ef;
}
.kanban-column.is-collapsed:hover { background: #dce3ea; }
.kanban-column-collapsed {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  width: 100%; flex: 1 1 auto;
  padding: .7rem .25rem 1rem;
  background: transparent; border: 0; color: var(--nexo-text);
  font-weight: 600; font-size: .85rem; cursor: pointer;
  border-radius: .75rem;
}
.kanban-column-collapsed > i { color: var(--nexo-muted); }
.kanban-column-collapsed .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.kanban-column-collapsed .count {
  background: #fff; color: var(--nexo-muted);
  border-radius: 999px; padding: 0 .4rem; font-size: .72rem; font-weight: 600; line-height: 1.4rem;
}
/* Título na vertical, lido de baixo para cima */
.kanban-column-collapsed .titulo-vertical {
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; letter-spacing: .02em;
}
.kanban-column.is-collapsed.drag-over {
  background: rgba(15,118,110,.14); box-shadow: inset 0 0 0 2px rgba(15,118,110,.45);
}
.kanban-column-header .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.kanban-column-header .count {
  margin-left: auto; background: #fff; color: var(--nexo-muted);
  border-radius: 999px; padding: 0 .55rem; font-size: .75rem; font-weight: 600; line-height: 1.5rem;
}
.kanban-column-body {
  padding: 0 .6rem .6rem; display: flex; flex-direction: column; gap: .6rem; flex: 1 1 auto;
  border-radius: 0 0 .75rem .75rem; transition: background-color .12s ease, box-shadow .12s ease;
}
.kanban-column-body.drag-over { background: rgba(15,118,110,.08); box-shadow: inset 0 0 0 2px rgba(15,118,110,.45); }
.kanban-column-empty {
  color: #9ca3af; font-size: .8rem; text-align: center; padding: 1.25rem .5rem;
  border: 1px dashed #cfd6df; border-radius: .5rem;
}

.kanban-card {
  background: #fff; border-radius: .6rem; padding: .75rem .85rem;
  border: 1px solid var(--nexo-border); border-left: 4px solid var(--card-color, #999);
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
  cursor: grab; user-select: none;
}
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: .45; transform: rotate(1.5deg); }

/* Bolinha de marcação + texto, na mesma linha */
.kanban-card .card-main {
  display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .55rem;
}
.kanban-card .card-text {
  /* Ocupa a sobra para o botao de excluir ficar colado na direita. */
  flex: 1 1 auto; min-width: 0;
  font-size: .9rem; line-height: 1.4; margin: 0; color: var(--nexo-text);
}

/* Excluir: discreto até o hover, para não competir com a bolinha. */
.card-excluir {
  flex: 0 0 auto; margin-left: auto; margin-top: .05rem; padding: 0 .1rem;
  border: 0; background: none; line-height: 1; cursor: pointer;
  color: #c3ccd8; font-size: .8rem;
}
.card-excluir:hover { color: #dc2626; }
.card-excluir:focus-visible { outline: 2px solid var(--nexo-brand); outline-offset: 2px; border-radius: .2rem; }

/* Modal da lixeira: so a lista rola, para a barra de acoes em massa e a
   paginacao ficarem sempre visiveis. */
.lixeira-massa {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .5rem .75rem; margin-bottom: .5rem;
  border: 1px solid var(--nexo-border); border-radius: .5rem; background: #f8fafc;
}
.lixeira-lista { max-height: 46vh; overflow-y: auto; padding-right: .35rem; }
.lixeira-lista.is-vazia { overflow: visible; }
/* Paginacao de listas (historico de resumos, lixeira do kanban) */
.lista-paginacao {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--nexo-border);
}

/* Itens listados no modal da lixeira */
.lixeira-item { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--nexo-border); }
.lixeira-item:first-child { border-top: 0; }
.lixeira-item .lixeira-selecao { flex: 0 0 auto; padding-top: .15rem; }
.lixeira-item .lixeira-corpo { flex: 1 1 auto; min-width: 0; }
.lixeira-item .lixeira-texto { margin: 0 0 .3rem; font-size: .9rem; line-height: 1.4; }
.lixeira-item .lixeira-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .75rem; color: var(--nexo-muted); }
.lixeira-item .lixeira-acoes { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem; }

.card-check {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: .1rem; padding: 0;
  border-radius: 50%; border: 2px solid #c3ccd8; background: #fff;
  display: grid; place-items: center; cursor: pointer;
  color: transparent; font-size: .65rem; line-height: 1;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}
.card-check:hover { border-color: var(--col-resolvido); color: #c3ccd8; }
.card-check:focus-visible { outline: 2px solid var(--nexo-brand); outline-offset: 2px; }
.card-check[aria-pressed="true"] {
  background: var(--col-resolvido); border-color: var(--col-resolvido); color: #fff;
}
.card-check[aria-pressed="true"]:hover { background: #52606f; border-color: #52606f; color: #fff; }

/* Card já resolvido */
.kanban-card.is-resolvido { background: #f8fafc; }
.kanban-card.is-resolvido .card-text {
  color: var(--nexo-muted); text-decoration: line-through; text-decoration-color: #cbd5e1;
}
/* Meta em duas linhas: o nome do grupo cabe inteiro em coluna estreita
   e a data nunca quebra no meio. */
.kanban-card .card-meta {
  display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  font-size: .75rem; color: var(--nexo-muted);
}
.kanban-card .card-meta .grupo {
  display: inline-flex; align-items: center; gap: .3rem; max-width: 100%;
  background: #f1f5f9; border-radius: 999px; padding: .1rem .55rem; font-weight: 500;
  overflow: hidden;
}
.kanban-card .card-meta .grupo > i { flex: 0 0 auto; }
.kanban-card .card-meta time {
  display: inline-flex; align-items: center; gap: .3rem;
  white-space: nowrap; padding-left: .1rem;
}
.kanban-card.saving { opacity: .6; pointer-events: none; }

.kanban-filtros input,
.kanban-filtros select{
  background: #fff;
}

/* ---------- Resumos ---------- */
.resumo-entry { border-left: 4px solid var(--nexo-brand); overflow: hidden; }

/* Na lixeira o card ganha uma calha à esquerda com o checkbox de seleção.
   Ele fica FORA do <summary> de propósito: dentro, o preventDefault que
   impede o acordeão de abrir também desfaria a marcação. */
.resumo-entry.is-selecionavel { display: flex; align-items: flex-start; }
.resumo-entry.is-selecionavel > .resumo-selecao { padding: 1.05rem .1rem 0 .95rem; flex: 0 0 auto; }
.resumo-entry.is-selecionavel > .resumo-details { flex: 1 1 auto; min-width: 100%; }
/* .resumo-entry.is-selecionavel > .resumo-details > .resumo-summary { padding-left: .55rem; } */

/* Acordeão nativo (<details>): fechado por padrão, sem depender de JS. */
.resumo-summary {
  display: block; padding: 1rem 1.15rem; cursor: pointer;
  list-style: none; /* remove o marcador padrão */
}
.resumo-summary::-webkit-details-marker { display: none; }
.resumo-summary::marker { content: ""; }
.resumo-summary:hover { background: #fbfcfe; }
.resumo-summary:focus-visible { outline: 2px solid var(--nexo-brand); outline-offset: -2px; }

.resumo-linha-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem 1rem; flex-wrap: wrap;
}
/* `margin-left: auto` mantém as ações à direita mesmo quando elas quebram para
   a linha de baixo — aí são o único item da linha, e o space-between do pai
   sozinho as jogaria para a esquerda. O wrap interno evita que a fileira
   estoure a largura do card quando há muitos botões (caso da lixeira). */
.resumo-acoes {
  display: inline-flex; align-items: center; gap: .5rem;
  flex: 0 1 auto; margin-left: auto;
  flex-wrap: wrap; justify-content: flex-end;
}

/* Hierarquia: 1) grupo  2) quando  3) resumo geral */
.resumo-grupo {
  font-size: 1.075rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em;
  color: var(--nexo-text); margin: 0;
  display: flex; align-items: center; gap: .45rem; min-width: 0;
}
.resumo-grupo > i { color: #9ca3af; font-size: .9rem; flex: 0 0 auto; }

.resumo-quando {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-top: .3rem;
  font-size: .775rem; color: var(--nexo-muted);
  font-variant-numeric: tabular-nums;
}
.resumo-quando .ponto { color: #cbd5e1; }
.resumo-quando .relativo { color: #9ca3af; }

.resumo-geral {
  font-size: .95rem; line-height: 1.6; color: #374151; margin: 0;
  max-width: 78ch;
}
.resumo-summary .resumo-geral { margin-top: .7rem; }

/* Contador de mensagens processadas no ciclo */
.resumo-msgs {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  font-size: .775rem; font-weight: 500; color: #15803d;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 999px;
  padding: .15rem .6rem;
}
.resumo-msgs > i { font-size: .85rem; }

/* Indicador de abrir/fechar */
.resumo-toggle {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  font-size: .75rem; font-weight: 600; color: var(--nexo-muted);
  background: #f1f5f9; border: 1px solid transparent; border-radius: 999px;
  padding: .15rem .55rem;
}
.resumo-toggle > i { font-size: .65rem; transition: transform .18s ease; }
.resumo-summary:hover .resumo-toggle { background: #e6ebf1; color: var(--nexo-text); }
.resumo-details[open] .resumo-toggle {
  background: var(--nexo-brand-soft); color: var(--nexo-brand); border-color: #b9ded9;
}
.resumo-details[open] .resumo-toggle > i { transform: rotate(180deg); }

/* Corpo revelado ao abrir */
.resumo-body { padding: 0 1.15rem 1.15rem; }
.resumo-body::before {
  content: ""; display: block; height: 1px; background: var(--nexo-border);
  margin: 0 0 1rem;
}

.resumo-categorias { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; }
@media (max-width: 1200px) { .resumo-categorias { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .resumo-categorias { grid-template-columns: 1fr 1fr; } }
.resumo-cat {
  background: #f8fafc; border: 1px solid var(--nexo-border); border-radius: .5rem; padding: .65rem .75rem;
  border-top: 3px solid var(--cat-color, #999);
}
.resumo-cat h6 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--nexo-muted);
  margin-bottom: .4rem; display: flex; align-items: center; gap: .35rem;
}
.resumo-cat ul { padding-left: 1.1rem; margin: 0; font-size: .85rem; }
.resumo-cat li + li { margin-top: .25rem; }
.resumo-cat .vazio { color: #9ca3af; font-size: .8rem; font-style: italic; }
.wa-badge { color: #16a34a; }

/* ---------- Configurações ---------- */
.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.status-dot.on { background: #16a34a; box-shadow: 0 0 0 4px rgba(22,163,74,.15); }
.status-dot.off { background: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,.15); }

.qr-placeholder {
  width: 220px; height: 220px; margin: 0 auto 2.25rem; border-radius: .5rem;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%),
    linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
  border: 10px solid #fff; box-shadow: 0 0 0 1px var(--nexo-border);
  position: relative;
}
.qr-placeholder::before {
  content: ""; position: absolute; inset: 30%;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230f766e'><path d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2z'/></svg>") center/60% no-repeat;
  border-radius: 6px;
}
.qr-placeholder::after {
  content: "QR code de exemplo"; position: absolute; left: 0; right: 0; bottom: -2rem; text-align: center;
  font-size: .75rem; color: var(--nexo-muted);
}
.grupo-row { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--nexo-border); }
.grupo-row:last-child { border-bottom: 0; }
.grupo-row .nome { flex: 1 1 auto; font-weight: 500; }
.grupo-row .form-check { margin: 0; }
.grupo-row .form-check-input { cursor: pointer; }

/* ---------- Tabela admin ---------- */
.table > :not(caption) > * > * { padding: .75rem .9rem; vertical-align: middle; }
.table thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--nexo-muted);
  font-weight: 600; border-bottom-width: 1px; background: #f8fafc;
}
.row-link { cursor: pointer; }
.row-link:hover { background: #f8fafc; }

.stat-card .stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--nexo-muted); }
.stat-card .stat-value { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }

/* ---------- Login ---------- */
.login-page {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background: radial-gradient(900px 500px at 10% -10%, #d9f0ec 0%, transparent 60%), var(--nexo-bg);
}
.login-card { width: 100%; max-width: 400px; }