/* ══════════════════════════════════════════════════════════════
   MODULE: HUB
   Portado do hub.html antigo — cards com logo, hero verde, projetos ricos
   ══════════════════════════════════════════════════════════════ */

.hub {
  display: block;
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.hub-head { margin-bottom: 28px; }
.hub-head h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  color: var(--txt);
  letter-spacing: .3px;
  line-height: 1.2;
}
.hub-head p {
  font-size: 14px;
  color: var(--sub);
  margin-top: 6px;
  max-width: 720px;
}

/* ──────────────────────────────────────────────────────────────
   FILTRO / BUSCA
   ────────────────────────────────────────────────────────────── */
.hub-filter {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: var(--shadow);
}
.hub-filter input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 6px 0;
  background: transparent;
  color: var(--txt);
}
.hub-filter input::placeholder { color: var(--muted); }
.hub-filter__ico { color: var(--muted); font-size: 16px; flex-shrink: 0; }
.hub-filter__count {
  font-size: 11px;
  font-weight: 700;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px;
  background: var(--info-bg);
  border-radius: 20px;
  flex-shrink: 0;
}
.hub-filter__novo {
  background: var(--accent);
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.hub-filter__novo:hover { background: var(--accent-dark); }

/* ──────────────────────────────────────────────────────────────
   GRID DE CLIENTES
   ────────────────────────────────────────────────────────────── */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.cli-card {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform   .18s var(--ease-out),
    box-shadow  .18s var(--ease-soft),
    border-color .18s var(--ease-soft);
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.cli-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.cli-card:focus-visible {
  outline: none;
  box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-soft);
  border-color: var(--accent);
}

.cli-card__logo {
  height: 120px;
  background: linear-gradient(135deg, #f8f9fa 0%, #eef2f2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--borda);
  padding: 16px;
  position: relative;
}
.cli-card__logo img {
  max-width: 80%;
  max-height: 80px;
  object-fit: contain;
}
.cli-card__logo-fallback {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  color: var(--primary);
  letter-spacing: 1px;
  text-align: center;
  opacity: .55;
}

.cli-card__body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cli-card__nome {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--txt);
  line-height: 1.25;
  margin-bottom: 4px;
}
.cli-card__sub {
  font-size: 11px;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 14px;
}
.cli-card__meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
  flex-wrap: wrap;
}
.cli-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--info-bg);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}
.cli-card__badge .n { font-size: 13px; }
.cli-card__badge--plano { background: #fef3c7; color: #854d0e; }

.cli-card__tag-top {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,.95);
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  border: 1px solid var(--borda);
}

/* ──────────────────────────────────────────────────────────────
   CLIENTE ABERTO — HERO
   ────────────────────────────────────────────────────────────── */
.cli-hero {
  background:
    radial-gradient(80% 180% at 92% -20%, color-mix(in srgb, var(--bx-violet) 42%, transparent), transparent 58%),
    radial-gradient(70% 150% at 6% 120%, color-mix(in srgb, var(--bx-teal2) 12%, transparent), transparent 60%),
    linear-gradient(115deg, var(--bx-hero1) 0%, var(--bx-hero2) 58%, var(--bx-hero3) 100%);
  color: #fff;
  border-radius: 18px;
  padding: 30px 34px;
  margin-bottom: 32px;
  display: flex;
  gap: 26px;
  align-items: center;
  box-shadow: 0 30px 60px -32px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}
.cli-hero::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='1' fill='%23ffffff' fill-opacity='0.045'/></svg>");
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(110% 120% at 88% -10%, #000, transparent 70%);
          mask-image: radial-gradient(110% 120% at 88% -10%, #000, transparent 70%);
}
.cli-hero > * { position: relative; z-index: 1; }
.cli-hero::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--bxc-accent) 0%, var(--bxc-violet) 55%, transparent 100%);
  opacity: .8;
}
.cli-hero__logo {
  flex-shrink: 0;
  width: 112px; height: 112px;
  border-radius: 16px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.6);
}
.cli-hero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cli-hero__logo-fallback {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 34px;
  color: var(--primary);
  letter-spacing: 1px;
  text-align: center;
  line-height: 1;
}

.cli-hero__info { flex: 1; min-width: 0; }
.cli-hero__nome {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #fff;
  margin-bottom: 6px;
}
.cli-hero__razao {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.cli-hero__dados {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.cli-hero__dado { display: flex; flex-direction: column; gap: 2px; }
.cli-hero__dado-lbl {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.cli-hero__dado-val { font-size: 14px; color: #fff; font-weight: 500; }

.cli-hero__escopo {
  margin-top: 18px;
  font-size: 13px;
  color: rgba(255,255,255,.82);
  line-height: 1.55;
  max-width: 720px;
  font-style: italic;
  border-left: 3px solid var(--gold);
  padding-left: 14px;
}

/* ──────────────────────────────────────────────────────────────
   TOPBAR (v15/05/2026) — botão "← Hub" no topo da Home do Cliente
   Espelha .top-back (Perito), .topbar__back (Gestor) e .plano__back
   (Inteligência). Mesmo gesto: subir 1 nível na hierarquia.
   Hub raiz não tem botão (é a raiz).
   ────────────────────────────────────────────────────────────── */
.hub-cli__topbar {
  margin-bottom: 18px;
}
.hub-cli__back {
  background: var(--accent, #1D7A4F);
  color: #fff;
  border: 0;
  padding: 9px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s;
  text-decoration: none;
}
.hub-cli__back:hover { background: var(--accent-dark, #155f3c); }
.hub-cli__back:active { transform: translateY(1px); }

/* ──────────────────────────────────────────────────────────────
   SEÇÕES DE PROJETOS E PLANOS
   ────────────────────────────────────────────────────────────── */
.hub-cli__sec {
  margin-bottom: 32px;
}
.hub-cli__sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borda);
}
.hub-cli__sec__head h2 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--txt);
}
.hub-cli__sec__head-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hub-cli__sec__head .n {
  font-size: 11px;
  font-weight: 700;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ──────────────────────────────────────────────────────────────
   CARDS DE PROJETO
   ────────────────────────────────────────────────────────────── */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.proj-card {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform   .18s var(--ease-out),
    box-shadow  .18s var(--ease-soft),
    border-color .18s var(--ease-soft);
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.proj-card:hover:not(.is-disabled) {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.proj-card:focus-visible {
  outline: none;
  box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-soft);
  border-color: var(--accent);
}
.proj-card.is-disabled { opacity: .62; cursor: not-allowed; }

.proj-card__head {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--borda);
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #fafbfb 0%, #f3f5f5 100%);
}
.proj-card__ico {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--info-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.proj-card__head-txt { flex: 1; min-width: 0; }
.proj-card__tipo {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-dark);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 2px;
}
.proj-card__nome {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--txt);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.proj-card__body {
  padding: 14px 18px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.proj-card__modulos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.mod-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--info-bg);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 12px;
}

.proj-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--borda);
}
.proj-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.proj-card__status .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.proj-card__status.is-ativo { color: var(--accent-dark); }
.proj-card__status.is-ativo .dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(88, 200, 220,.15);
}

.proj-card__acao {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-dark);
  letter-spacing: .5px;
}

.proj-card__badge-soon {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(255,255,255,.95);
  color: var(--gold-dark);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  border: 1px solid var(--gold);
}

/* ──────────────────────────────────────────────────────────────
   CARDS DE PLANO (variante)
   ────────────────────────────────────────────────────────────── */
.plano-card {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    transform   .18s var(--ease-out),
    box-shadow  .18s var(--ease-soft),
    border-color .18s var(--ease-soft);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
}
.plano-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.plano-card:focus-visible {
  outline: none;
  box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-soft);
  border-color: var(--accent);
}
.plano-card__ico {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--warn-bg);
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.plano-card__body { flex: 1; min-width: 0; }
.plano-card__nome {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--txt);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plano-card__meta {
  font-size: 12px;
  color: var(--sub);
  display: flex;
  gap: 10px;
  align-items: center;
}
.plano-card__meta strong { color: var(--warn); font-weight: 700; }
.plano-card__acao {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-dark);
  letter-spacing: .5px;
}

/* ──────────────────────────────────────────────────────────────
   VAZIO
   ────────────────────────────────────────────────────────────── */
.hub-vazio {
  background: var(--card);
  border: 1px dashed var(--borda);
  border-radius: 14px;
  padding: 48px 20px;
  text-align: center;
  color: var(--sub);
}
.hub-vazio__ico { font-size: 40px; margin-bottom: 10px; }
.hub-vazio h3 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--txt);
  margin-bottom: 4px;
}
.hub-vazio p { font-size: 13px; max-width: 420px; margin: 0 auto; }

/* ──────────────────────────────────────────────────────────────
   BOTÃO EDITAR no hero
   ────────────────────────────────────────────────────────────── */
.cli-hero__actions {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.cli-hero__edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
  font-family: var(--font-display);
  text-decoration: none;
}
.cli-hero__edit:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.5);
  transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────────
   MODAL · editar cliente
   ────────────────────────────────────────────────────────────── */
.edit-cli__logo-sec {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.edit-cli__logo-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.edit-cli__logo-box {
  width: 140px;
  height: 140px;
  border: 1px dashed var(--borda);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f8f9fa 0%, #eef2f2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: hidden;
}
.edit-cli__logo-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.edit-cli__logo-fb {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  color: var(--primary);
  letter-spacing: 1px;
  text-align: center;
  opacity: .55;
}
.edit-cli__logo-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.edit-cli__logo-actions label.btn {
  cursor: pointer;
}
.edit-cli__logo-hint {
  font-size: 11px;
  color: var(--muted);
}
.edit-cli__logo-status {
  font-size: 12px;
  color: var(--sub);
  min-height: 16px;
}

/* Modal de edição cliente é mais largo que o default (520px)
   pra caber os campos institucionais com conforto */
.modal-overlay.show .modal:has(.edit-cli) {
  max-width: 640px;
}

/* ── Slot do logo da sidebar — preview em fundo escuro ──
   O logo da sidebar é a versão clara (fundo verde do shell);
   o box espelha esse contexto para o preview ser fiel. */
.edit-cli__logo-box--dark {
  background: linear-gradient(135deg, var(--bxc-brand) 0%, #15302f 100%);
  border-color: #2f4f4d;
}
.edit-cli__logo-box--dark .edit-cli__logo-fb {
  color: var(--bxc-gold);
  opacity: .7;
}

/* Escala do logo no login — slider + prévia ao vivo */
.edit-cli__escala { margin-top: 16px; }
.edit-cli__escala-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 10px;
}
.edit-cli__escala-row input[type="range"] {
  flex: 1;
  accent-color: var(--primary);
  cursor: pointer;
}
.edit-cli__escala-val {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--primary);
  min-width: 56px;
  text-align: right;
}
.edit-cli__escala-prev {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 8px;
  min-height: 96px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.edit-cli__escala-prev img {
  display: block;
  max-height: 80px;
  max-width: 230px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.edit-cli__escala-fb {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 28px;
  color: var(--primary);
}

/* ══════════════════════════════════════════════════════════════
   GESTOR DE USUÁRIOS CLIENTE · seção opcional na tela do cliente
   Visível só pra consultores com admin_clientes: true
   ══════════════════════════════════════════════════════════════ */

.hub-cli__sec--usuarios { /* herda padding/border de hub-cli__sec */ }

.hub-vazio--sm {
  padding: 18px;
  text-align: center;
  color: var(--sub);
  font-size: var(--fs-base);
}

.usr-skeleton {
  height: 80px;
  background: linear-gradient(90deg, var(--bg-soft) 25%, var(--bg) 50%, var(--bg-soft) 75%);
  background-size: 200% 100%;
  animation: usr-shimmer 1.4s infinite;
  border-radius: var(--radius);
}
@keyframes usr-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Tabela */
.usr-tbl {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  overflow: hidden;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
.usr-tbl thead { background: var(--bg-soft); }
.usr-tbl th {
  text-align: left;
  padding: 10px 14px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  font-weight: var(--fw-bold);
  border-bottom: 1px solid var(--borda);
}
.usr-tbl td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--borda-soft);
  color: var(--txt);
  vertical-align: middle;
}
.usr-tbl tbody tr:last-child td { border-bottom: none; }
.usr-tbl tbody tr:hover { background: var(--bg-soft); }
.usr-tbl tr.is-inativo { opacity: .55; }
.usr-tbl__user {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  background: var(--primary-soft);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: var(--fw-semibold);
}
.usr-tbl__meta {
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--sub);
  line-height: 1.4;
}
.usr-tbl__acoes-h { width: 1%; }
.usr-tbl__acoes {
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

/* Tags de módulos */
.usr-tag {
  display: inline-block;
  font-size: var(--fs-xs);
  background: var(--bg-soft);
  border: 1px solid var(--borda);
  padding: 2px 8px;
  border-radius: 99px;
  color: var(--sub);
  margin-right: 4px;
  margin-bottom: 2px;
}
.usr-tag--all {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
  font-weight: var(--fw-semibold);
}

/* Status */
.usr-status {
  display: inline-block;
  font-size: var(--fs-xs);
  padding: 2px 9px;
  border-radius: 99px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.usr-status--ativo   { background: var(--ok-bg);      color: var(--ok); }
.usr-status--inativo { background: var(--neutral-bg); color: var(--neutral); }

/* Modal */
.usr-modal {
  max-width: 560px;
  width: 92vw;
}
.usr-modal__cli {
  font-size: var(--fs-sm);
  color: var(--sub);
  padding: 10px 14px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.usr-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.usr-field { display: flex; flex-direction: column; gap: 4px; }
.usr-field--full { grid-column: 1 / -1; }
.usr-field__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--sub);
  font-weight: var(--fw-semibold);
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.usr-field__hint-inline {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-regular);
}
.usr-field__input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--txt);
  transition: border-color .12s, box-shadow .12s;
}
.usr-field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.usr-field__input:read-only {
  background: var(--bg-soft);
  color: var(--sub);
  cursor: not-allowed;
}
.usr-field__hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* Permissões */
.usr-modal__perms {
  border-top: 1px solid var(--borda-soft);
  padding-top: 14px;
}
.usr-modal__perms > .usr-field__label {
  margin-bottom: 10px;
}
.usr-perm-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: var(--fs-base);
  color: var(--txt);
  cursor: pointer;
}
.usr-perm-radio input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--primary);
}
.usr-perm-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  padding: 12px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  margin-top: 4px;
}
.usr-perm-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  color: var(--txt);
  padding: 4px 0;
  cursor: pointer;
}
.usr-perm-check input[type="checkbox"] {
  accent-color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════
   GESTOR DE USUÁRIOS · permissões granulares (módulo > telas)
   ══════════════════════════════════════════════════════════════ */
.usr-modal__perms .usr-perm-list {
  grid-template-columns: 1fr;   /* sobrescreve o 2-cols antigo */
  gap: 4px;
  padding: 8px;
}
.usr-perm-mod {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.usr-perm-check--mod {
  font-size: var(--fs-base);
  padding: 4px 0;
}
.usr-perm-telas {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--borda-soft);
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.usr-perm-telas-hint {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: 4px;
  font-style: italic;
}
.usr-perm-check--tela {
  font-size: var(--fs-sm);
  color: var(--sub);
  padding: 2px 0;
}

/* Sufixo de tag mostra contagem de telas restritas */
.usr-tag-suf {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-style: italic;
  margin-left: 4px;
}

/* ══════════════════════════════════════════════════════════════
   Hierarquia · cabeçalho de sub-hub (carteira) + card de grupo
   Adicionado na Fase 2 (clientes.parent_id). Aditivo, não-destrutivo.
   ══════════════════════════════════════════════════════════════ */
.hub-head--grupo{
  display:flex; align-items:center; gap:16px;
}
.hub-head__logo{
  height:52px; width:auto; max-width:150px; object-fit:contain;
  flex:0 0 auto;
}
/* Card que agrupa outros clientes (ex.: consultoria) — leve destaque roxo */
.cli-card--grupo{
  border-color:var(--primary-soft);
  background:linear-gradient(180deg, color-mix(in srgb, var(--bxc-brand) 3.5%, transparent), transparent 60%);
}
.cli-card--grupo .cli-card__badge{
  color:var(--primary); background:var(--primary-soft);
  font-weight:600;
}
.cli-card--grupo::after{
  content:"Carteira"; position:absolute; top:10px; right:10px;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--primary); background:var(--primary-soft);
  padding:2px 8px; border-radius:999px; font-weight:600;
}

/* ══════════════════════════════════════════════════════════════
   HUB PERITO · landing escura full-screen (Fase 2B)
   Aparece no Hub Perito (topo) e nos sub-hubs (carteiras).
   A página de cliente (folha) continua na moldura clara do app.
   ══════════════════════════════════════════════════════════════ */
#app.perito-hub-mode .topbar,
#app.perito-hub-mode .sidebar { display: none !important; }
#app.perito-hub-mode .main { margin-left: 0 !important; width: 100% !important; }
#app.perito-hub-mode .content { padding: 0 !important; max-width: none !important;
  background: radial-gradient(135% 110% at 50% -12%, var(--bx-ovl1) 0%, var(--bx-ovl2) 50%, var(--bx-ovl3) 100%); }
#app.perito-hub-mode .hub { max-width: none !important; padding: 0 !important; }

.perito-hub { position: relative; min-height: 100vh; overflow: hidden; color: #eae6f5; }
.perito-hub__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.perito-hub__bg .ph-vignette { position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(7,3,16,.6) 100%); }
.perito-hub__bg .neural { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .56; }
.perito-hub__bg .neural .mesh-drift { transform-origin: center; animation: phNeuralDrift 42s var(--ease-in-out) infinite alternate; }
@keyframes phNeuralDrift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-40px,-28px) scale(1.07); } }
.perito-hub__bg .breathe {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(42% 42% at 28% 26%, color-mix(in srgb, var(--bxc-accent) 30%, transparent), transparent 64%),
    radial-gradient(54% 54% at 76% 72%, color-mix(in srgb, var(--bx-breathe2) 55%, transparent), transparent 64%),
    radial-gradient(40% 40% at 60% 50%, color-mix(in srgb, var(--bx-breathe3) 38%, transparent), transparent 70%);
  background-repeat: no-repeat;
  background-size: 170% 170%, 190% 190%, 150% 150%;
  background-position: 6% 8%, 92% 88%, 50% 50%;
  animation: phBreathe 15s var(--ease-in-out) infinite alternate;
  will-change: background-position, opacity;
}
@keyframes phBreathe {
  0%   { background-position: 6% 8%, 92% 88%, 50% 50%;   opacity: .42; }
  50%  { background-position: 34% 30%, 64% 62%, 58% 44%; opacity: .85; }
  100% { background-position: 18% 22%, 80% 74%, 44% 56%; opacity: .55; }
}

.ph-wrap { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 28px 32px 70px; }
.ph-top { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.07); }
.ph-top__right { display: flex; align-items: center; gap: 14px; }
.ph-usuarios { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 15px; border-radius: 40px; font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: #cfc8e0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: color .2s, background .2s, border-color .2s; }
.ph-usuarios:hover { color: #fff; background: color-mix(in srgb, var(--bxc-violet) 18%, transparent); border-color: color-mix(in srgb, var(--bxc-violet) 40%, transparent); }
.usuarios-grupo-hint { margin: 0 0 16px; font-size: 13px; color: var(--sub); line-height: 1.45; }
.ph-brand { display: inline-flex; }
.ph-brand img { height: 70px; width: auto; filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--bxc-accent) 22%, transparent)); }
.ph-user { display: flex; align-items: center; gap: 12px; padding: 8px 9px 8px 16px; border-radius: 40px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 14px; }
.ph-user__txt b { font-weight: 600; color: #fff; }
.ph-user__txt small { color: #9a93ac; font-size: 11px; display: block; margin-top: -2px; letter-spacing: .04em; }
.ph-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; color: #0d0820; background: linear-gradient(135deg, var(--bxc-accent), var(--bxc-violet)); }
.ph-logout { background: transparent; border: 0; color: #9a93ac; cursor: pointer; font-size: 18px;
  line-height: 1; padding: 6px; border-radius: 8px; transition: color .2s, background .2s; }
.ph-logout:hover { color: #fff; background: rgba(255,255,255,.08); }

.ph-back { display: inline-flex; align-items: center; gap: 7px; margin-top: 26px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: #9a93ac; text-decoration: none; transition: color .2s; }
.ph-back:hover { color: var(--bxc-accent); }
.ph-back span { font-size: 15px; }

.ph-hero { margin: 38px 0 30px; }
.perito-hub .ph-back + .ph-hero { margin-top: 16px; }
.ph-kicker { font-family: var(--font-mono); font-weight: 500; letter-spacing: .34em; text-transform: uppercase;
  font-size: 11px; color: var(--bxc-accent); margin-bottom: 13px; }
.ph-kicker .sl { color: var(--bxc-gold); }
.ph-kicker .cur { animation: phBlink 1.1s steps(1) infinite; }
@keyframes phBlink { 50% { opacity: 0; } }
.ph-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.02; letter-spacing: -.005em; color: #fff; }
.ph-hero h1 em { font-style: normal; background: linear-gradient(100deg, var(--bxc-accent), var(--bxc-violet));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph-hero p { margin-top: 11px; color: #aaa2c2; max-width: 48ch; font-size: 14.5px; }

.ph-sechead { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ph-sechead h2 { font-family: var(--font-mono); font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  font-size: 12px; color: #cfc8e4; white-space: nowrap; }
.ph-sechead .ln { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.16), transparent); }
.ph-sechead .n { font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--bxc-gold);
  padding: 2px 10px; border: 1px solid rgba(209,169,80,.4); border-radius: 7px; }

.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(282px, 1fr)); gap: 18px; align-items: stretch; }
.ph-card { position: relative; display: flex; flex-direction: column; text-decoration: none; border-radius: 16px;
  padding: 22px 22px 16px; background: #fff; border: 1px solid transparent;
  box-shadow: 0 22px 50px -22px rgba(0,0,0,.6), 0 2px 6px -3px rgba(0,0,0,.4);
  transition: transform .38s var(--ease-out), box-shadow .38s var(--ease-out); }
.ph-card:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -26px rgba(0,0,0,.7), 0 0 0 1.5px var(--bxc-accent); }
.ph-card__logo { height: 52px; display: flex; align-items: center; justify-content: flex-start; }
.ph-card__logo img { height: 40px; width: auto; max-width: 180px; object-fit: contain; object-position: left center; transition: transform .42s var(--ease-out); }
.ph-card:hover .ph-card__logo img { transform: scale(1.045); }
.ph-card__fb { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #fff;
  background: linear-gradient(135deg, var(--bxc-brand-2), var(--bxc-brand)); }
.ph-card__cap { margin-top: 14px; font-size: 12.5px; color: #9a93ac; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-card__edit { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 8px; cursor: pointer;
  color: #9a93ac; background: #f3f0fa; border: 1px solid color-mix(in srgb, var(--bxc-brand) 7%, transparent);
  opacity: 0; transform: translateY(-4px); transition: opacity .26s var(--ease-out), transform .26s var(--ease-out), color .2s, border-color .2s; z-index: 3; }
.ph-card__edit svg { width: 15px; height: 15px; }
.ph-card:hover .ph-card__edit { opacity: 1; transform: none; }
.ph-card__edit:hover { color: var(--bxc-brand-2); border-color: color-mix(in srgb, var(--bxc-violet) 50%, transparent); background: #fff; }
.ph-card__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.ph-chip { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: #5f5878;
  padding: 5px 11px; border-radius: 8px; background: #f3f0fa; border: 1px solid color-mix(in srgb, var(--bxc-brand) 6%, transparent); }
.ph-chip b { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--bxc-brand); }
.ph-card__foot { display: flex; align-items: center; justify-content: flex-end; margin-top: auto; padding-top: 14px; }
.ph-card__go { font-family: var(--font-mono); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  font-size: 11.5px; color: var(--bxc-brand-2); display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 8px; transition: .32s var(--ease-out); }
.ph-card:hover .ph-card__go { gap: 11px; color: #fff; background: linear-gradient(100deg, var(--bxc-brand-2), var(--bxc-brand));
  padding: 6px 14px; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--bxc-brand) 70%, transparent); }
.ph-card--new { align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px;
  background: rgba(255,255,255,.035); border: 1.5px dashed rgba(255,255,255,.16); box-shadow: none; color: #aaa2c2; }
.ph-card--new:hover { transform: translateY(-6px); border-color: var(--bxc-accent); color: #fff; box-shadow: none; }
.ph-plus { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-size: 26px; font-weight: 300; color: var(--bxc-accent); background: color-mix(in srgb, var(--bxc-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bxc-accent) 34%, transparent); transition: transform .4s var(--ease-out), background .4s; }
.ph-card--new:hover .ph-plus { transform: scale(1.1) rotate(90deg); background: color-mix(in srgb, var(--bxc-accent) 18%, transparent); }
.ph-card--new span { font-family: var(--font-mono); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
.ph-vazio { grid-column: 1 / -1; padding: 40px; text-align: center; color: #9a93ac; }
.ph-foot { margin-top: 50px; text-align: center; color: #9a93ac; font-size: 11px; letter-spacing: .14em; font-family: var(--font-mono); }
.ph-foot--powered { display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: normal; }
.ph-foot--powered span { font-family: var(--font-ui); font-style: italic; color: #8a82a0; font-size: 12px; }
.ph-foot--powered img { height: 22px; width: auto; opacity: .9; }

@media (max-width: 600px) {
  .ph-wrap { padding: 20px 18px 50px; }
  .ph-brand img { height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .perito-hub__bg .neural { display: none; }
  .perito-hub__bg .breathe, .ph-kicker .cur { animation: none !important; }
}

/* ── Telinha: tamanho dos logos por superfície (Fase 2B) ───────── */
.logos-tune { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.logos-tune__zone { border: 1px solid var(--borda); border-radius: 12px; padding: 12px; background: var(--bg-soft); }
.logos-tune__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.logos-tune__t { font-weight: 700; font-size: 13px; color: var(--txt); display: block; }
.logos-tune__sub { font-size: 10px; color: var(--sub); text-transform: uppercase; letter-spacing: .04em; display: block; margin-top: 1px; }
.logos-tune__val { font-family: var(--font-mono); font-size: 12px; color: var(--primary); font-weight: 700; white-space: nowrap; }
.logos-tune__prev { height: 124px; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 12px; }
.logos-tune__prev--dark { background: radial-gradient(120% 130% at 50% 0%, var(--bx-ovl1), #150c28); }
.logos-tune__prev--light { background: #fff; border: 1px solid var(--borda); }
.logos-tune__prev img { object-fit: contain; }
.logos-tune__fb { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: #fff; opacity: .85; }
.logos-tune__prev--light .logos-tune__fb { color: var(--primary); }
.logos-tune__zone input[type="range"] { width: 100%; accent-color: var(--primary); cursor: pointer; }
.logos-tune__hint { margin-top: 14px; font-size: 12px; color: var(--sub); line-height: 1.4; }
@media (max-width: 560px) { .logos-tune { grid-template-columns: 1fr; } }

/* Estado vazio da lista de permissões (cliente sem projetos/módulos) */
.usr-perm-vazio { padding: 14px 16px; font-size: 13px; color: var(--sub); line-height: 1.5;
  background: var(--bg-soft); border: 1px dashed var(--borda); border-radius: 10px; }

/* ── Hub do cliente em moldura escura imersiva (igual à carteira) ──
   Cards de projeto/plano seguem brancos (contraste no fundo neural,
   como os cards de cliente da carteira). Só os títulos e a topbar
   precisam clarear. */
.perito-hub--cli .hub-cli__topbar { border: 0; padding: 0; margin-bottom: 4px; }
.perito-hub--cli .hub-cli__sec__head { border-bottom-color: rgba(255,255,255,.12); }
.perito-hub--cli .hub-cli__sec__head h2 { color: #fff; }
.perito-hub--cli .hub-cli__sec__head .n { color: rgba(255,255,255,.55); }
/* Estado vazio segue card branco com texto escuro (não pintar de branco!).
   Só os botões da topbar (ex.: Ver carteira) precisam clarear sobre o escuro. */
.perito-hub--cli .hub-cli__topbar .btn { color: rgba(255,255,255,.85); background: transparent; border-color: rgba(255,255,255,.22); }
.perito-hub--cli .hub-cli__topbar .btn:hover { background: rgba(255,255,255,.08); }

/* ── Liga/desliga de cliente na carteira (só dono da plataforma) ── */
.ph-card { position: relative; }
.ph-card__pwr {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px 4px 7px; border-radius: 999px;
  font: 700 10px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s;
  background: rgba(120,120,135,.16); color: #8a8a99;
  border: 1px solid rgba(120,120,135,.28);
}
.ph-card:hover .ph-card__pwr, .ph-card__pwr.on { opacity: 1; }
.ph-card__pwr .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.ph-card__pwr.on {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.ph-card__pwr:hover { filter: brightness(1.08); }
.ph-card__pwr:disabled { opacity: .5; cursor: default; }
.ph-card.is-inativo { opacity: .5; filter: grayscale(.5); }
.ph-card.is-inativo:hover { opacity: .72; }