/* =============================================================
   Sistema de Cadastro  -  style.css
   Reescrito do zero (2026) - design system moderno e unificado
   ============================================================= */

/* ---------- Design Tokens ---------- */
/* TEMA: Grafite + Âmbar/Dourado (dark mode) — 2026 */
:root {
  /* Brand / Acentos (âmbar/dourado) */
  --c-primary:       #f5a524;
  --c-primary-2:     #fbbf24;
  --c-primary-3:     #fcd34d;
  --c-primary-soft:  rgba(245, 165, 36, .14);
  --c-primary-ring:  rgba(245, 165, 36, .32);
  --c-on-primary:    #1a1206;   /* texto escuro p/ ler sobre o âmbar */

  /* Surfaces (grafite) */
  --c-bg:            #0d1014;
  --c-surface:       #161a21;
  --c-surface-2:     #1c212a;
  --c-surface-3:     #242b35;
  --c-border:        #2b323d;
  --c-border-strong: #3b4350;
  --c-divider:       #232a34;

  /* Texto */
  --c-text:    #eef1f6;
  --c-text-2:  #c4cbd5;
  --c-text-3:  #97a1ad;
  --c-text-4:  #6c7682;
  --c-muted:   #8a93a0;

  /* Status (cores vivas + fundos translúcidos p/ dark) */
  --c-warn:    #f59e0b;
  --c-warn-bg: rgba(245, 158, 11, .15);
  --c-warn-bd: rgba(245, 158, 11, .38);

  --c-info:    #3b82f6;
  --c-info-bg: rgba(59, 130, 246, .15);
  --c-info-bd: rgba(59, 130, 246, .38);

  --c-success:    #22c55e;
  --c-success-2:  #10b981;
  --c-success-bg: rgba(16, 185, 129, .15);
  --c-success-bd: rgba(16, 185, 129, .38);

  --c-danger:    #ef4444;
  --c-danger-bg: rgba(239, 68, 68, .15);
  --c-danger-bd: rgba(239, 68, 68, .38);

  /* Brand escuro (drawer / topbar admin) — grafite profundo */
  --c-dark-0: #0a0d11;
  --c-dark-1: #12161d;
  --c-dark-2: #20262f;

  /* Radius / sombras */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow:    0 1px 3px rgba(15, 23, 42, .05), 0 8px 24px -12px rgba(15, 23, 42, .10);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, .08), 0 16px 32px -16px rgba(15, 23, 42, .14);
  --shadow-lg: 0 24px 48px -16px rgba(15, 23, 42, .30), 0 12px 24px -12px rgba(15, 23, 42, .18);

  /* Tipografia */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Layout */
  --topbar-h: 60px;
  --drawer-w: 280px;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
input, select, textarea, button { font-family: inherit; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Sistema de Telas ---------- */
.tela { display: none; }
.tela.ativa { display: block; }

/* ---------- Tipografia utilitária ---------- */
.h1 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 0; color: var(--c-text); }
.h2 { font-size: 22px; font-weight: 600; letter-spacing: -.015em; margin: 0; color: var(--c-text); }
.h3 { font-size: 18px; font-weight: 600; margin: 0; color: var(--c-text); }
.muted { color: var(--c-text-3); }
.small { font-size: 13px; }

/* =============================================================
   LOGIN
   ============================================================= */
#telaLogin {
  --lg-shadow-lg: 0 30px 60px -20px rgba(15, 23, 42, .45),
                  0 18px 36px -18px rgba(15, 23, 42, .35);
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(245, 165, 36, .35), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(251, 191, 36, .25), transparent 60%),
    linear-gradient(160deg, var(--c-dark-0) 0%, var(--c-dark-1) 55%, var(--c-dark-2) 100%);
  color: var(--c-text);
  overflow: auto;
  z-index: 10;
}
#telaLogin.tela:not(.ativa) { display: none; }
#telaLogin.ativa { display: block; }
#telaLogin::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events: none;
}

.lg-shell {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.lg-card {
  position: relative;
  width: 100%;
  max-width: 1040px;
  background: var(--c-surface);
  border-radius: 24px;
  box-shadow: var(--lg-shadow-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}

/* Painel branding (desktop only) */
.lg-brand {
  display: none;
  position: relative;
  padding: 48px 44px;
  color: #fff;
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(255, 255, 255, .08), transparent 60%),
    linear-gradient(160deg, #14181f 0%, #1b2129 50%, #20262f 100%);
  overflow: hidden;
}
.lg-brand::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 165, 36, .55), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.lg-brand-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.lg-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  color: #e0e7ff;
}
.lg-brand-logo .lg-mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
}
.lg-brand h2 {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #fff;
}
.lg-brand p {
  margin: 12px 0 0;
  color: #cbd5e1;
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 38ch;
}
.lg-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lg-features li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13.5px;
  color: #e2e8f0;
}
.lg-features .lg-dot {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  display: grid; place-items: center;
  color: #fcd34d;
}
.lg-foot { font-size: 12px; color: #94a3b8; }

/* Painel do formulário */
.lg-form-wrap {
  padding: 36px 24px 32px;
  display: flex; flex-direction: column;
  justify-content: center;
}
.lg-form-inner { width: 100%; max-width: 380px; margin: 0 auto; }

.lg-top-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}
.lg-top-mark .lg-mark {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 60%, var(--c-primary-3) 100%);
  box-shadow: 0 10px 24px -10px rgba(245, 165, 36, .6);
}
.lg-top-mark .lg-brandtxt {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 600;
}

#telaLogin h1.lg-title {
  margin: 0 0 6px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--c-text);
  text-align: center;
}
#telaLogin p.lg-subtitle {
  margin: 0 0 26px;
  font-size: 14px;
  color: var(--c-text-2);
  text-align: center;
}

#formLogin { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lg-field { display: flex; flex-direction: column; gap: 6px; }
.lg-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text-2);
  letter-spacing: .02em;
}
.lg-control {
  position: relative;
  display: flex; align-items: center;
  background: var(--c-surface-2);
  border: 1.5px solid var(--c-border);
  border-radius: 12px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.lg-control:hover { border-color: var(--c-border-strong); }
.lg-control:focus-within {
  border-color: var(--c-primary-2);
  background: var(--c-surface);
  box-shadow: 0 0 0 4px var(--c-primary-ring);
}
.lg-control .lg-ic {
  flex: none;
  width: 44px;
  display: grid; place-items: center;
  color: var(--c-muted);
}
.lg-control:focus-within .lg-ic { color: var(--c-primary); }
.lg-control input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 0; outline: 0; background: transparent;
  padding: 14px 14px 14px 0;
  font: inherit;
  font-size: 15px;
  color: var(--c-text);
}
.lg-control input::placeholder { color: #a3aec0; }
.lg-control input:-webkit-autofill,
.lg-control input:-webkit-autofill:hover,
.lg-control input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--c-text);
  -webkit-box-shadow: 0 0 0 1000px var(--c-surface-2) inset;
  transition: background-color 9999s ease-out 0s;
}
.lg-toggle {
  flex: none;
  width: 44px; height: 44px;
  border: 0; background: transparent;
  display: grid; place-items: center;
  color: var(--c-muted);
  cursor: pointer;
  border-radius: 10px;
  transition: color .15s ease, background .15s ease;
}
.lg-toggle:hover { color: var(--c-text); background: rgba(15, 23, 42, .04); }
.lg-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
  font-size: 13px;
}
.lg-check {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--c-text-2);
  cursor: pointer;
  user-select: none;
}
.lg-check input {
  width: 16px; height: 16px;
  accent-color: var(--c-primary);
  cursor: pointer;
}
#loginErro {
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--c-danger);
  background: var(--c-danger-bg);
  border: 1px solid var(--c-danger-bd);
  border-radius: 10px;
  display: none;
}
#loginErro:not(:empty) { display: block; }

#telaLogin .btn-primary,
#telaLogin .lg-btn {
  appearance: none;
  width: 100%;
  margin-top: 6px;
  padding: 13px 18px;
  border: 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
  box-shadow: 0 10px 24px -10px rgba(245, 165, 36, .55);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .18s ease, filter .18s ease;
}
#telaLogin .btn-primary:hover,
#telaLogin .lg-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 14px 28px -10px rgba(245, 165, 36, .65);
}
#telaLogin .btn-primary:active,
#telaLogin .lg-btn:active { transform: translateY(1px); }
.lg-fineprint {
  margin: 22px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--c-muted);
}

@media (min-width: 980px) {
  .lg-shell { padding: 40px; }
  .lg-card { grid-template-columns: 1.05fr 1fr; min-height: 600px; }
  .lg-brand { display: block; }
  .lg-top-mark { display: none; }
  .lg-form-wrap { padding: 56px 56px; }
  #telaLogin h1.lg-title { text-align: left; font-size: 28px; }
  #telaLogin p.lg-subtitle { text-align: left; }
}
@media (max-width: 480px) {
  .lg-shell { padding: 16px 12px; }
  .lg-card { border-radius: 20px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5); }
  .lg-form-wrap { padding: 28px 20px 24px; }
  #telaLogin h1.lg-title { font-size: 22px; }
  .lg-control input { font-size: 16px; }
}

/* =============================================================
   TOPBAR (admin + usuário)
   ============================================================= */
.topbar, .topbar-admin {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.topbar-admin {
  background: linear-gradient(135deg, #161b22 0%, #1c222b 60%, #232b35 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
}
.topbar-hamburger {
  flex: none;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--c-surface-3);
  color: var(--c-text);
  display: grid; place-items: center;
  transition: background .15s ease;
}
.topbar-admin .topbar-hamburger {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.topbar-hamburger:hover { background: var(--c-border); }
.topbar-admin .topbar-hamburger:hover { background: rgba(255, 255, 255, .18); }

.topbar-brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--c-text);
}
.topbar-admin .topbar-brand { color: #fff; }

.topbar-user, .topbar-admin-user {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  font-size: 13px;
  color: var(--c-text-2);
  background: var(--c-surface-3);
  padding: 6px 12px;
  border-radius: 999px;
}
.topbar-admin .topbar-admin-user {
  background: rgba(255, 255, 255, .12);
  color: #e0e7ff;
}

/* Breadcrumb admin */
.admin-section-header {
  position: sticky;
  top: var(--topbar-h);
  z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-2);
}
.admin-section-header svg { color: var(--c-primary); }

/* =============================================================
   DRAWER LATERAL (admin + usuário)
   ============================================================= */
.drawer-overlay, .admin-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  z-index: 40;
}
.drawer-overlay.aberto, .admin-drawer-overlay.aberto {
  opacity: 1; pointer-events: auto;
}

.drawer, .admin-drawer {
  position: fixed;
  top: 0; bottom: 0;
  left: 0;
  width: var(--drawer-w);
  max-width: 86vw;
  background: var(--c-surface);
  z-index: 50;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 8px 0 32px -8px rgba(15, 23, 42, .25);
}
.drawer.aberto, .admin-drawer.aberto { transform: translateX(0); }

.admin-drawer {
  background: linear-gradient(180deg, #0a0d11 0%, #12161d 100%);
  color: #fff;
}

.drawer-header, .admin-drawer-header {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--c-divider);
}
.admin-drawer-header {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #e0e7ff;
  font-weight: 600;
  font-size: 15px;
  position: relative;
}
.admin-drawer-header svg:first-child { color: #fcd34d; }
.drawer-avatar {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-3));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 16px;
}
.drawer-nome {
  font-weight: 600;
  font-size: 15px;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-drawer-close {
  margin-left: auto;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
}
.admin-drawer-close:hover { background: rgba(255, 255, 255, .16); }

.drawer-body, .admin-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex; flex-direction: column;
  gap: 4px;
}
.drawer-footer, .admin-drawer-footer {
  padding: 12px;
  border-top: 1px solid var(--c-divider);
}
.admin-drawer-footer { border-top: 1px solid rgba(255, 255, 255, .08); }

.drawer-item, .admin-drawer-item {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: var(--c-text-2);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: background .15s ease, color .15s ease;
  cursor: pointer;
}
.drawer-item:hover { background: var(--c-surface-3); color: var(--c-text); }

.admin-drawer-item {
  color: #cbd5e1;
}
/* Rótulos do menu admin sempre em MAIÚSCULAS */
.admin-drawer-item > span:not(.admin-drawer-badge) {
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 13px;
}
.admin-drawer-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.admin-drawer-item.active {
  background: rgba(245, 165, 36, .25);
  color: #fff;
  font-weight: 600;
}
.admin-drawer-item.active svg { color: #fcd34d; }

/* =============================================================
   ADMIN — Conteúdo principal
   ============================================================= */
#telaAdmin { background: var(--c-bg); min-height: 100vh; min-height: 100dvh; }
.admin-content { padding: 20px 18px 40px; max-width: 1200px; margin: 0 auto; }

.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeIn .25s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   CARDS
   ============================================================= */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}
.card-titulo {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-divider);
}
.card-titulo svg { color: var(--c-primary); }

/* =============================================================
   FORMS — Floating Label (fl-*)
   ============================================================= */
.fl-input-wrap {
  position: relative;
  margin-bottom: 12px;
}
.fl-input-wrap .fl-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-muted);
  pointer-events: none;
  z-index: 2;
  display: grid; place-items: center;
}
.fl-input {
  width: 100%;
  padding: 16px 14px 16px 44px;
  border: 1.5px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-surface-2);
  font-size: 15px;
  color: var(--c-text);
  outline: 0;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.fl-input:hover { border-color: var(--c-border-strong); }
.fl-input:focus {
  border-color: var(--c-primary-2);
  background: var(--c-surface);
  box-shadow: 0 0 0 4px var(--c-primary-ring);
}
.fl-input::placeholder { color: transparent; }

.fl-label {
  position: absolute;
  left: 44px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--c-text-3);
  background: var(--c-surface-2);
  padding: 0 6px;
  pointer-events: none;
  transition: all .18s ease;
  white-space: nowrap;
  max-width: calc(100% - 60px);
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}

.fl-input:focus + .fl-label,
.fl-input:not(:placeholder-shown) + .fl-label {
  top: 0;
  left: 14px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-primary);
  background: var(--c-surface);
}
.fl-input-wrap.is-error .fl-input {
  border-color: var(--c-danger);
  background: var(--c-surface);
}
.fl-input-wrap.is-error .fl-input:focus {
  box-shadow: 0 0 0 4px rgba(220, 38, 38, .15);
}
.fl-input-wrap.is-error .fl-label { color: var(--c-danger); }
.fl-input-wrap.is-ok .fl-input { border-color: var(--c-success-2); }
.fl-input-wrap.is-ok .fl-label { color: var(--c-success); }

/* Para campos <select>, mantém label sempre flutuando */
.fl-label-select {
  top: 0 !important;
  left: 14px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  background: var(--c-surface) !important;
  color: var(--c-primary) !important;
}
select.fl-input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

textarea.fl-input {
  min-height: 96px;
  resize: vertical;
}

.field-error {
  margin: 4px 0 0;
  padding: 0 4px;
  font-size: 12px;
  color: var(--c-danger);
  min-height: 16px;
}
.field-success {
  margin: 4px 0 0;
  padding: 0 4px;
  font-size: 12px;
  color: var(--c-success);
  min-height: 16px;
}

/* Toggle senha (botão olho dentro do input) */
.fl-toggle-senha {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--c-muted);
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 3;
}
.fl-toggle-senha:hover { background: var(--c-surface-3); color: var(--c-text); }
.fl-toggle-senha.ativo { color: var(--c-primary); }

/* Idade chip (ao lado do nascimento) */
.idade-chip {
  align-self: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  display: none;
}
.idade-chip.visivel { display: block; }

/* =============================================================
   BOTÕES
   ============================================================= */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(245, 165, 36, .55);
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 12px 24px -10px rgba(245, 165, 36, .65);
}
.btn-primary:active { transform: translateY(1px); }
.btn-primary[disabled] { opacity: .65; cursor: not-allowed; filter: none; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border: 1.5px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn-secondary:hover { background: var(--c-surface-3); border-color: var(--c-border-strong); }

.btn-icon {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border: 0;
  border-radius: 10px;
  background: var(--c-surface-3);
  color: var(--c-text-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn-icon:hover { background: var(--c-border); color: var(--c-text); }
.btn-icon.danger { color: var(--c-danger); }
.btn-icon.danger:hover { background: var(--c-danger-bg); }

/* =============================================================
   BADGES (status) e TAGS
   ============================================================= */
.badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}
.badge-yellow { background: var(--c-warn-bg);    color: #b45309; border: 1px solid var(--c-warn-bd); }
.badge-blue   { background: var(--c-info-bg);    color: #1d4ed8; border: 1px solid var(--c-info-bd); }
.badge-green  { background: var(--c-success-bg); color: #047857; border: 1px solid var(--c-success-bd); }
.badge-red    { background: var(--c-danger-bg);  color: #b91c1c; border: 1px solid var(--c-danger-bd); }
/* Laranja — status "Precisa Credenciar" (estado inicial de todo cadastro). */
.badge-orange { background: #ffedd5;             color: #9a3412; border: 1px solid #fed7aa; }

.tag-tudo-certo {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  font-size: 11px;
  font-weight: 700;
}
.tag-obs {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  font-size: 11px;
  font-weight: 700;
}
.tag-ligacao {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* =============================================================
   FILTROS (chips)
   ============================================================= */
.mc-filtro-btn {
  padding: 7px 14px;
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-2);
  cursor: pointer;
  transition: all .15s ease;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.mc-filtro-btn:hover { border-color: var(--c-border-strong); }
.mc-filtro-btn.ativo {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  font-weight: 600;
}
.mc-filtro-btn.ativo-yellow {
  background: #f59e0b; border-color: #f59e0b; color: #fff; font-weight: 600;
}
.mc-filtro-btn.ativo-orange {
  background: #ea580c; border-color: #ea580c; color: #fff; font-weight: 600;
}
.mc-filtro-btn.ativo-blue {
  background: var(--c-info, #3b82f6); border-color: var(--c-info, #3b82f6); color: #fff; font-weight: 600;
}
.mc-filtro-btn.ativo-green {
  background: var(--c-success-2); border-color: var(--c-success-2); color: #fff; font-weight: 600;
}
.mc-filtro-btn.ativo-red {
  background: var(--c-danger); border-color: var(--c-danger); color: #fff; font-weight: 600;
}
.mc-filtro-btn.ativo-pendente {
  background: #6366f1; border-color: #6366f1; color: #fff; font-weight: 600;
}

/* Filtro de dono (meus / outros / todos) */
.mc-dono-btn {
  background: var(--c-bg-1);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 12.5px;
  cursor: pointer;
  transition: all .15s ease;
}
.mc-dono-btn:hover { border-color: var(--c-border-strong); }
.mc-dono-btn.ativo {
  background: #0ea5e9;
  border-color: #0ea5e9;
  color: #fff;
  font-weight: 600;
}

/* Tag de autor exibida no card */
.mc-tag-dono {
  display: inline-flex; align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: .01em;
  max-width: 240px;
}
.mc-tag-dono svg { width: 13px; height: 13px; flex: none; opacity: .95; }
.mc-tag-dono-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-tag-meu   { background: rgba(16,185,129,.12); color: #059669; border: 1px solid rgba(16,185,129,.25); }
.mc-tag-outro { background: rgba(245,158,11,.12); color: #b45309; border: 1px solid rgba(245,158,11,.25); }

/* Card de cadastro de OUTRO usuário ganha uma faixa lateral âmbar */
.mc-card-outro {
  position: relative;
}
.mc-card-outro::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #f59e0b, #f97316);
  border-radius: 12px 0 0 12px;
}

/* =============================================================
   LISTAS (usuários, etc)
   ============================================================= */
.list-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  margin-bottom: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.list-item:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-sm); }
.list-item-avatar {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-3));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 14px;
}
.list-item-info { flex: 1 1 auto; min-width: 0; }
.list-item-info h4 {
  margin: 0 0 2px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list-item-info p {
  margin: 0;
  font-size: 12.5px;
  color: var(--c-text-3);
}
.list-item-actions {
  display: flex; align-items: center; gap: 8px;
  flex: none;
}

/* =============================================================
   CADASTROS ADMIN (cads-card)
   ============================================================= */
.cads-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cads-card:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-sm); }
.cads-card-top { display: flex; align-items: flex-start; gap: 12px; }
.cads-card-avatar {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-3));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 13.5px;
}
.cads-card-info { flex: 1 1 auto; min-width: 0; }
.cads-card-name {
  margin: 0 0 3px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cads-card-meta {
  margin: 0;
  font-size: 12px;
  color: var(--c-text-3);
}
.cads-card-btns { display: flex; gap: 6px; flex: none; }
.cads-card-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--c-divider);
}

/* Card de "Meus Cadastros" (usuário comum) reaproveita o visual do admin
   (.cads-card), porém o card inteiro é clicável para abrir o cadastro. */
.cads-card.mc-card-link { cursor: pointer; }
.cads-card.mc-card-link:active { transform: scale(.998); }

/* Linha do nome + badge de autoria (admin e usuário comum) */
.cads-card-nameline {
  display: flex; align-items: center; gap: 9px;
  flex-wrap: wrap; min-width: 0;
}
.cads-card-nameline .cads-card-name { margin: 0; max-width: 100%; }

/* Badge bonito de "quem cadastrou" — pílula âmbar com ícone */
.autor-chip {
  display: inline-flex; align-items: center; gap: 5px;
  flex: none; max-width: 240px;
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
  padding: 4px 11px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(245,165,36,.26), rgba(217,119,6,.18));
  color: #fcd34d;
  border: 1px solid rgba(245,165,36,.5);
  box-shadow: 0 2px 8px -3px rgba(245,165,36,.55);
}
.autor-chip svg { width: 13px; height: 13px; flex: none; color: #fcd34d; opacity: .95; }
.autor-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =============================================================
   "MEUS CADASTROS" (usuário) — mc-card
   ============================================================= */
.mc-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.mc-card:hover {
  border-color: var(--c-primary-2);
  box-shadow: var(--shadow-sm);
}
.mc-card:active { transform: scale(.99); }
.mc-card-avatar {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-3));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 14px;
}
.mc-card-info { flex: 1 1 auto; min-width: 0; }
.mc-card-info h4 {
  margin: 0 0 2px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.mc-card-info h4 .mc-nome-txt {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.mc-card-info h4 .mc-tag-dono { flex: none; }
.mc-card-info p {
  margin: 0;
  font-size: 12.5px;
  color: var(--c-text-3);
}
.mc-card-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.mc-card-arrow {
  flex: none;
  color: var(--c-muted);
}

/* =============================================================
   EMPTY STATE / LOADING
   ============================================================= */
.empty-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--c-text-4);
}
.empty-state svg {
  margin: 0 auto 10px;
  color: var(--c-border-strong);
}
.empty-state p { margin: 0; font-size: 14px; }

.drawer-loading {
  padding: 24px;
  text-align: center;
  color: var(--c-text-3);
  font-size: 14px;
}

/* =============================================================
   STEPPER (mobile)
   ============================================================= */
.stepper {
  display: none;
  align-items: center;
  margin-bottom: 18px;
}
.stepper-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.stepper-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-surface-3);
  border: 2px solid var(--c-border);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-text-3);
}
.stepper-step.active .stepper-dot { color: #fff; }
/* No estado concluído mostramos o "check" (::after), então escondemos o número. */
.stepper-step.done .stepper-dot { color: transparent; }
.stepper-step.active .stepper-dot {
  background: var(--c-primary);
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px var(--c-primary-ring);
}
.stepper-step.done .stepper-dot {
  background: var(--c-success-2);
  border-color: var(--c-success-2);
}
.stepper-step.done .stepper-dot::after {
  content: "";
  position: absolute;
  left: 7px; top: 4px;
  width: 5px; height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.stepper-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--c-text-3);
}
.stepper-step.active .stepper-label { color: var(--c-primary); }
.stepper-line {
  flex: 1 1 auto;
  height: 2px;
  background: var(--c-border);
  margin: 0 4px;
  margin-bottom: 18px;
}
.stepper-line.done { background: var(--c-success-2); }

/* GATE de CNPJ — pedido antes do formulário */
.nc-cnpj-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto 18px;
}
.nc-gate-ico {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--c-primary-ring, rgba(59,130,246,.15));
  color: var(--c-primary);
}
.nc-gate-title { font-size: 18px; font-weight: 700; color: var(--c-text-1); margin: 0; }
.nc-gate-desc  { font-size: 13.5px; color: var(--c-text-3); margin: 0; line-height: 1.45; }
.nc-cnpj-gate .fl-input-wrap { width: 100%; text-align: left; margin-top: 4px; }
.nc-gate-btn { width: 100%; justify-content: center; }
.nc-gate-feedback {
  font-size: 13px; line-height: 1.4; margin: 0; min-height: 1px; width: 100%;
}
.nc-gate-feedback.is-loading { color: var(--c-text-3); }
.nc-gate-feedback.is-erro {
  color: var(--c-danger);
  background: var(--c-danger-bg, rgba(239,68,68,.10));
  border: 1px solid var(--c-danger-border, rgba(239,68,68,.30));
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
}

.form-step {
  display: block;
}
.form-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--c-divider);
}
.form-section-title svg { color: var(--c-primary); }

.step-nav {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--c-divider);
}
.step-nav .btn-primary,
.step-nav .btn-secondary { flex: 1; max-width: 50%; }

/* =============================================================
   STATUS opções (radio cards)
   ============================================================= */
.status-opcoes {
  display: grid;
  gap: 10px;
}
.status-opcao {
  position: relative;
  display: block;
  cursor: pointer;
}
.status-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.status-opcao-label {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 16px;
  border: 2px solid var(--c-border);
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  transition: all .15s ease;
}
.status-opcao input:checked + .status-opcao-label.badge-yellow {
  background: var(--c-warn-bg);  color: #b45309; border-color: var(--c-warn);
}
.status-opcao input:checked + .status-opcao-label.badge-blue {
  background: var(--c-info-bg);  color: #1d4ed8; border-color: var(--c-info);
}
.status-opcao input:checked + .status-opcao-label.badge-green {
  background: var(--c-success-bg); color: #047857; border-color: var(--c-success-2);
}
.status-opcao input:checked + .status-opcao-label.badge-red {
  background: var(--c-danger-bg); color: #b91c1c; border-color: var(--c-danger);
}

/* =============================================================
   UPLOAD (foto/PDF)
   ============================================================= */
.upload-campo { margin-bottom: 14px; }
.upload-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-2);
  margin-bottom: 8px;
}
.upload-input { display: none; }
.upload-area {
  position: relative;
  border: 2px dashed var(--c-border-strong);
  border-radius: var(--radius);
  background: var(--c-surface-2);
  padding: 22px 16px;
  min-height: 110px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.upload-area:hover { border-color: var(--c-primary-2); background: var(--c-surface); }
.upload-area.tem-arquivo { border-style: solid; border-color: var(--c-success-2); background: var(--c-surface); }
.upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.upload-placeholder svg { color: var(--c-muted); }
.upload-placeholder span {
  font-size: 13px;
  color: var(--c-text-3);
}
.upload-preview { display: none; max-width: 100%; }
.upload-preview img {
  max-width: 100%; max-height: 200px;
  border-radius: 10px;
  display: block; margin: 0 auto;
}
.upload-preview.pdf-preview {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--c-danger-bg);
  border-radius: 10px;
  font-size: 13px;
  color: var(--c-danger);
}
.upload-remove {
  display: none;
  margin-top: 8px;
  padding: 6px 12px;
  background: var(--c-danger-bg);
  color: var(--c-danger);
  border: 1px solid var(--c-danger-bd);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* =============================================================
   ÁREA SENHA DOIS (colapsável)
   ============================================================= */
.area-senha-dois {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.area-senha-dois.aberta {
  max-height: 400px;
}

/* =============================================================
   TELA USUÁRIO — main-content / form cadastro
   ============================================================= */
#telaUsuario { background: var(--c-bg); min-height: 100vh; min-height: 100dvh; }
.main-content {
  padding: 20px 18px 40px;
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .stepper { display: flex; }
  .form-step { display: none; }
  .form-step.step-ativo { display: block; animation: fadeIn .2s ease; }
}

/* =============================================================
   COFRE DE CARTÕES (usuário + admin)
   ============================================================= */
#telaCofreCartoes { background: var(--c-bg); min-height: 100vh; min-height: 100dvh; }

.cofre-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  margin-bottom: 10px;
}
.cofre-card-info { flex: 1 1 auto; min-width: 0; }
.cofre-card-final {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 4px;
}
.cofre-card-final svg { color: var(--c-primary); }
.cofre-card-meta {
  font-size: 12.5px;
  color: var(--c-text-3);
}
.cofre-label { color: var(--c-text-3); font-size: 12.5px; }
.cofre-senha-visivel {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600;
  color: var(--c-text);
  background: var(--c-surface-3);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 13px;
}
.cofre-dono {
  margin-left: 8px;
  font-size: 12px;
  color: var(--c-text-3);
}
.cofre-valor { font-weight: 600; color: var(--c-text); }
.cofre-final { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

.btn-cofre-excluir {
  flex: none;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 10px;
  background: var(--c-danger-bg);
  color: var(--c-danger);
  display: grid; place-items: center;
  cursor: pointer;
}
.btn-cofre-excluir:hover { background: #fee2e2; }

.cofre-card-resultado {
  background: var(--c-primary-soft);
  border: 1px solid #c7d2fe;
  border-radius: var(--radius);
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}
.cofre-card-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px;
  gap: 8px;
}
.cofre-erro {
  background: var(--c-danger-bg);
  color: var(--c-danger);
  border: 1px solid var(--c-danger-bd);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13.5px;
  margin: 0;
}
.cofre-nao-encontrado {
  background: var(--c-warn-bg);
  color: #92400e;
  border: 1px solid var(--c-warn-bd);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13.5px;
  margin: 0;
}

/* =============================================================
   COFRE - Resultado da busca (versao rica, prefixo .cofre-r-*)
   Mini cartao visual + senha em destaque + acoes + timer
   ============================================================= */
.cofre-r-painel {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, var(--c-primary-soft) 100%);
  border: 1px solid #c7d2fe;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 8px 28px -10px rgba(245, 165, 36, .28);
  animation: cofreRSlide .28s cubic-bezier(.2, .8, .2, 1);
}
@keyframes cofreRSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.cofre-r-fechar {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 10px;
  background: rgba(245, 165, 36, .12);
  color: var(--c-primary);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s ease, transform .1s ease;
  z-index: 2;
}
.cofre-r-fechar:hover { background: rgba(245, 165, 36, .22); }
.cofre-r-fechar:active { transform: scale(.94); }

/* Mini cartao visual */
.cofre-r-cartao {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 55%, #7c3aed 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  box-shadow: 0 10px 24px -10px rgba(245, 165, 36, .45);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.cofre-r-cartao::after {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 70%; height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 60%);
  pointer-events: none;
}
.cofre-r-cartao-top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.cofre-r-cartao-chip {
  width: 36px; height: 26px;
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  border-radius: 5px;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .15);
}
.cofre-r-cartao-chip::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(180, 110, 0, .45);
  border-radius: 3px;
}
.cofre-r-cartao-chip::after {
  content: '';
  position: absolute;
  inset: 7px 4px;
  border-top:    1px solid rgba(180, 110, 0, .35);
  border-bottom: 1px solid rgba(180, 110, 0, .35);
}
.cofre-r-cartao-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .9;
}
.cofre-r-cartao-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .08em;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

/* Bloco da senha (destaque maximo) */
.cofre-r-senha-bloco {
  background: var(--c-surface);
  border-radius: var(--radius);
  padding: 16px 18px;
  border: 1px solid var(--c-border);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cofre-r-senha-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-text-3);
  margin-bottom: 8px;
}
.cofre-r-senha-valor {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 28px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: .04em;
  padding: 6px 0 10px;
  min-height: 44px;
  word-break: break-all;
  transition: color .15s ease;
}
.cofre-r-senha-valor.is-visible { color: var(--c-primary); }

.cofre-r-acoes {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 8px;
  margin-top: 4px;
}
.cofre-r-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  min-height: 48px;
  white-space: nowrap;
}
.cofre-r-btn:active { transform: scale(.97); }
.cofre-r-btn-toggle {
  background: var(--c-surface-3);
  color: var(--c-text-2);
  border: 1.5px solid var(--c-border);
}
.cofre-r-btn-toggle:hover { background: var(--c-border); }
.cofre-r-btn-copiar {
  background: var(--c-primary);
  color: #fff;
  border: 0;
  box-shadow: 0 6px 14px -6px rgba(245, 165, 36, .55);
}
.cofre-r-btn-copiar:hover { background: var(--c-primary-2); box-shadow: 0 8px 18px -6px rgba(245, 165, 36, .65); }
.cofre-r-btn-copiar.is-copied {
  background: var(--c-success);
  box-shadow: 0 6px 14px -6px rgba(22, 163, 74, .55);
}

/* Timer 15s (animacao CSS pura) */
.cofre-r-timer {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  width: 100%;
  background: var(--c-primary);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
@keyframes cofreRTimerShrink {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
.cofre-r-timer.is-running {
  animation: cofreRTimerShrink 15s linear forwards;
}

/* Meta info (criado por / data) */
.cofre-r-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--c-divider);
  font-size: 12.5px;
  color: var(--c-text-3);
}
.cofre-r-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cofre-r-meta-item svg { color: var(--c-primary); opacity: .8; }
.cofre-r-meta-item strong { color: var(--c-text-2); font-weight: 600; }

/* Mobile: empilha botoes e diminui senha */
@media (max-width: 640px) {
  .cofre-r-painel { padding: 16px 14px; }
  .cofre-r-fechar { top: 10px; right: 10px; }
  .cofre-r-cartao { padding: 14px 14px 16px; }
  .cofre-r-cartao-num { font-size: 18.5px; letter-spacing: .06em; }
  .cofre-r-senha-bloco { padding: 14px; }
  .cofre-r-senha-valor { font-size: 26px; }
  .cofre-r-acoes { grid-template-columns: 1fr; }
  .cofre-r-meta { gap: 12px 16px; }
}

/* =============================================================
   EMISSORES  --  design moderno  (prefixo .em-*)
   ============================================================= */

/* Banner "você está editando X" */
.em-editing-banner {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  font-size: 13px;
  color: #92400e;
  animation: emFade .2s ease;
}
.em-editing-banner.is-active { display: flex; }
.em-editing-banner > svg { color: #f59e0b; flex: none; width: 16px; height: 16px; }
.em-editing-banner > span { flex: 1; min-width: 0; }
.em-editing-banner > span b { color: var(--c-text); }
.em-editing-banner-btn {
  border: 0;
  background: rgba(245,158,11,.18);
  color: #92400e;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: background .15s;
}
.em-editing-banner-btn:hover { background: rgba(245,158,11,.32); }
.em-editing-banner-btn svg  { width: 12px; height: 12px; }

@keyframes emFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Seções do formulário */
.em-form-section {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 14px 16px 4px;
  margin-bottom: 14px;
}
.em-form-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-text-3);
  margin-bottom: 12px;
}
.em-form-section-title svg { color: var(--c-primary); width: 13px; height: 13px; }

/* Grid 2 colunas recolhe em mobile */
.em-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .em-grid-2 { grid-template-columns: 1fr; }
}

/* Área de endereço (SOLICITADO) */
.em-area-solicitado {
  display: none;
  border: 1px solid #c7d2fe;
  border-radius: var(--radius);
  padding: 14px 16px 4px;
  margin-bottom: 12px;
  background: var(--c-primary-soft);
  animation: emFade .2s ease;
}
.em-area-solicitado-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-primary);
  margin-bottom: 12px;
}
.em-area-solicitado-title svg { width: 13px; height: 13px; }
.em-grid-rua { display: grid; grid-template-columns: 1fr 110px; gap: 12px; }
@media (max-width: 600px) { .em-grid-rua { grid-template-columns: 1fr; } }

/* Cabeçalho da lista */
.em-lista-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.em-lista-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-2);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.em-count {
  font-size: 11px;
  font-weight: 700;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Busca inline */
.em-search {
  position: relative;
  flex: 1;
  max-width: 300px;
  min-width: 160px;
}
.em-search input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  font-size: 13.5px;
  background: var(--c-surface);
  color: var(--c-text);
  outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
.em-search input:focus {
  border-color: var(--c-primary-2);
  box-shadow: 0 0 0 3px var(--c-primary-ring);
}
.em-search-ic {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--c-text-3);
  pointer-events: none;
}

/* ── Card do emissor ───────────────────────────────── */
.em-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, border-color .18s ease;
  animation: emFade .2s ease;
}
.em-card:last-child { margin-bottom: 0; }
.em-card:hover { box-shadow: var(--shadow); border-color: var(--c-border-strong); }

.em-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.em-avatar {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 4px 10px -3px rgba(79,70,229,.4);
  letter-spacing: -.02em;
}
.em-headinfo { flex: 1; min-width: 0; }
.em-nome {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.em-email {
  font-size: 12.5px;
  color: var(--c-text-3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* badge status */
.em-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.em-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.em-status.is-disp { background: var(--c-success-bg); color: var(--c-success); }
.em-status.is-disp .em-status-dot { background: var(--c-success); }
.em-status.is-sol  { background: var(--c-warn-bg); color: #92400e; }
.em-status.is-sol  .em-status-dot { background: var(--c-warn); }

.em-card-actions {
  display: flex;
  gap: 6px;
  flex: none;
  align-self: flex-start;
}
.em-iconbtn {
  width: 34px; height: 34px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: 9px;
  color: var(--c-text-2);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all .15s ease;
  flex: none;
}
.em-iconbtn:hover { background: var(--c-surface-3); border-color: var(--c-border-strong); }
.em-iconbtn:active { transform: scale(.94); }
.em-iconbtn.is-danger {
  color: var(--c-danger);
  border-color: var(--c-danger-bd);
  background: var(--c-danger-bg);
}
.em-iconbtn.is-danger:hover { background: #fee2e2; }
.em-iconbtn svg { width: 15px; height: 15px; }

/* Divisor */
.em-divider {
  height: 1px;
  background: var(--c-divider);
  margin: 12px 0;
}

/* Campos chave-valor com copiar */
.em-fields { display: grid; gap: 6px; }
.em-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--c-surface-2);
  border-radius: 9px;
  min-width: 0;
}
.em-field-ic {
  flex: none;
  width: 14px; height: 14px;
  color: var(--c-primary);
  opacity: .7;
}
.em-field-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-text-3);
  flex: none;
  width: 42px;
}
.em-field-val {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.em-field-val.mono {
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: 13px;
}
.em-field-val.masked { letter-spacing: .08em; }
.em-field-btn {
  flex: none;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--c-text-3);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.em-field-btn:hover { background: var(--c-border); color: var(--c-text); }
.em-field-btn.is-copied { background: var(--c-success-bg); color: var(--c-success); }
.em-field-btn svg { width: 13px; height: 13px; }

/* Rodapé do card */
.em-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--c-divider);
  font-size: 12px;
  color: var(--c-text-3);
}
.em-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.em-stat svg { width: 12px; height: 12px; color: var(--c-primary); opacity: .8; }
.em-stat strong { color: var(--c-text-2); font-weight: 600; }

/* Endereço de entrega (SOLICITADO) */
.em-endereco {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--c-primary-soft);
  border: 1px dashed #c7d2fe;
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--c-text-2);
}
.em-endereco-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-primary);
  margin-bottom: 7px;
}
.em-endereco-title svg { width: 11px; height: 11px; }
.em-endereco-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.em-endereco-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-text-3);
}
.em-endereco-val { font-weight: 500; color: var(--c-text); }

/* Mobile ajustes */
@media (max-width: 640px) {
  .em-lista-header { flex-direction: column; align-items: stretch; }
  .em-search { max-width: 100%; }
  .em-card { padding: 14px 12px; }
  .em-card-footer { flex-direction: column; align-items: flex-start; }
}



/* ==== Emissores v2 - card clicavel + modal de detalhes ==== */
.em-card[role="button"] {
  cursor: pointer;
  outline: 0;
}
.em-card[role="button"]:focus-visible {
  box-shadow: 0 0 0 3px var(--c-primary-ring), var(--shadow);
  border-color: var(--c-primary-2);
}
.em-card[role="button"]:active {
  transform: scale(.998);
}

.em-iconbtn.is-view {
  color: var(--c-primary);
  border-color: var(--c-primary-soft);
  background: var(--c-primary-soft);
}
.em-iconbtn.is-view:hover {
  background: #e0e7ff;
  border-color: var(--c-primary-2);
}

.em-stat-hint {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--c-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .75;
}
.em-stat-hint svg { color: var(--c-primary); }

.em-card:hover .em-stat-hint {
  opacity: 1;
}

@media (max-width: 640px) {
  .em-stat-hint { margin-left: 0; }
}

/* Bloco de senha dentro do modal de emissor */
.em-senha-box {
  margin-top: 14px;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border: 1px solid #c7d2fe;
  position: relative;
  overflow: hidden;
}
.em-senha-box::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(99,102,241,.15), transparent 70%);
  pointer-events: none;
}
.em-senha-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-primary);
  margin-bottom: 12px;
}
.em-senha-label svg { width: 12px; height: 12px; }

.em-senha-display {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 28px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: .12em;
  padding: 16px 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  text-align: center;
  user-select: all;
  word-break: break-all;
  margin-bottom: 14px;
  transition: all .2s;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.04);
}
.em-senha-display.is-revealed {
  color: var(--c-primary);
  background: var(--c-surface);
  border-color: var(--c-primary-2);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.04), 0 0 0 3px var(--c-primary-ring);
}

.em-senha-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.em-senha-btn {
  flex: 1;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border-strong);
  transition: all .15s;
}
.em-senha-btn:hover {
  background: var(--c-surface-3);
  border-color: var(--c-text-3);
}
.em-senha-btn:active { transform: scale(.97); }
.em-senha-btn svg { width: 14px; height: 14px; }
.em-senha-btn.is-primary {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}
.em-senha-btn.is-primary:hover {
  background: var(--c-primary-2);
  border-color: var(--c-primary-2);
}

.em-senha-hint {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  color: var(--c-text-3);
  line-height: 1.4;
}
.em-senha-hint svg {
  width: 12px; height: 12px;
  flex: none;
  margin-top: 2px;
  color: var(--c-primary);
  opacity: .7;
}

@media (max-width: 600px) {
  .em-senha-display { font-size: 22px; padding: 14px; }
  .em-senha-btn { min-width: 0; }
}


/* Alertas inline (form cofre) */
.alerta {
  display: none;
  align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 10px;
}
.alerta-sucesso {
  background: var(--c-success-bg);
  color: var(--c-success);
  border: 1px solid var(--c-success-bd);
}
.alerta-erro {
  background: var(--c-danger-bg);
  color: var(--c-danger);
  border: 1px solid var(--c-danger-bd);
}

/* =============================================================
   MEUS CADASTROS — usuário
   ============================================================= */
#telaMeusCadastros { background: var(--c-bg); min-height: 100vh; min-height: 100dvh; }

/* Wrapper principal: substitui o antigo .card para ter controle fino mobile */
#telaMeusCadastros .mc-main {
  padding: 16px;
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
}

/* Toolbar (busca + filtros) — agrupada como um cartão único */
.mc-toolbar {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.mc-toolbar .mc-busca-wrap { margin-bottom: 12px; }

/* Toggle "Ver como administrador" (oculta meus + separação Meus/Outros) */
.mc-modo-admin {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 12px;
}
.mc-modo-admin .perm-toggle-lbl { font-size: 13px; font-weight: 600; color: var(--c-text-2); }

/* Segmented control — Todos / Meus / Outros */
.mc-dono-seg {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  background: var(--c-surface-3);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 12px;
}
.mc-dono-seg .mc-dono-btn {
  background: transparent;
  border: 0;
  padding: 9px 6px;
  font-size: 13px;
  color: var(--c-text-3);
  border-radius: 9px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.mc-dono-seg .mc-dono-btn:hover { color: var(--c-text-2); border-color: transparent; }
.mc-dono-seg .mc-dono-btn.ativo {
  background: var(--c-surface);
  color: var(--c-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  border-color: transparent;
}
.mc-dono-seg .mc-dono-btn svg {
  flex: none;
  opacity: .9;
}

/* Chips de status com scroll horizontal (mobile) */
.mc-chips-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin: 0 -14px;
  padding-left: 14px;
  padding-right: 14px;
  scroll-snap-type: x proximity;
}
.mc-chips-row::-webkit-scrollbar { display: none; }
.mc-chips-row .mc-filtro-btn {
  flex: none;
  scroll-snap-align: start;
}

/* Resumo (3 contadores) */
.mc-resumo {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.mc-resumo-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mc-resumo-item:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-sm);
}
.mc-resumo-item-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.mc-resumo-item-lbl {
  font-size: 10.5px;
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}

/* Contagem de resultados (acima da lista) */
.mc-count {
  font-size: 12.5px;
  color: var(--c-text-3);
  margin: 0 4px 10px;
}

.mc-lista { margin: 0; }

/* =============================================================
   MEUS CADASTROS — Ajustes mobile (≤640px)
   ============================================================= */
@media (max-width: 640px) {
  #telaMeusCadastros .mc-main {
    padding: 12px 12px calc(20px + env(safe-area-inset-bottom));
  }

  /* Toolbar fica colada e com sombra discreta */
  .mc-toolbar {
    padding: 12px;
    border-radius: 14px;
    margin-bottom: 12px;
  }
  .mc-toolbar .mc-busca-wrap { margin-bottom: 10px; }

  /* Segmented control: mais respiração de toque */
  .mc-dono-seg {
    padding: 4px;
    gap: 4px;
    margin-bottom: 10px;
  }
  .mc-dono-seg .mc-dono-btn {
    padding: 10px 4px;
    font-size: 12.5px;
    min-height: 38px;
  }
  .mc-dono-seg .mc-dono-btn svg { width: 13px; height: 13px; }

  /* Chips de status: um pouco menores */
  .mc-chips-row { gap: 6px; padding-left: 12px; padding-right: 12px; margin: 0 -12px; }
  .mc-chips-row .mc-filtro-btn {
    padding: 7px 12px;
    font-size: 12.5px;
  }

  /* Resumo: cards levemente menores */
  .mc-resumo { gap: 6px; margin-bottom: 12px; }
  .mc-resumo-item { padding: 10px 4px; border-radius: 10px; }
  .mc-resumo-item-val { font-size: 19px; }
  .mc-resumo-item-lbl { font-size: 10px; }

  .mc-count { margin: 0 2px 8px; font-size: 12px; }

  /* Card de cadastro — layout mobile */
  .mc-card {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    grid-template-areas:
      "av  hd  ar"
      "av  cpf ar"
      "mt  mt  mt";
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 14px;
    border-radius: 14px;
    margin-bottom: 10px;
    border-color: var(--c-border);
  }
  .mc-card-avatar {
    grid-area: av;
    width: 46px;
    height: 46px;
    font-size: 15px;
    align-self: center;
  }
  .mc-card-info {
    display: contents;
  }
  .mc-card-info h4 {
    grid-area: hd;
    margin: 0;
    font-size: 15px;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .mc-card-info h4 .mc-nome-txt {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mc-card-info p {
    grid-area: cpf;
    margin: 0;
    font-size: 12.5px;
    color: var(--c-text-3);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mc-card-meta {
    grid-area: mt;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--c-divider);
    gap: 8px;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .mc-card-meta .badge {
    padding: 4px 10px;
    font-size: 11.5px;
  }
  .mc-card-meta .mc-card-data {
    font-size: 11.5px;
    color: var(--c-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mc-card-arrow {
    grid-area: ar;
    width: 18px;
    height: 18px;
    align-self: center;
    opacity: .55;
  }

  /* Tag de dono compacta dentro do nome */
  .mc-card .mc-tag-dono {
    margin-left: 0;
    flex: none;
    font-size: 10px;
    padding: 2px 7px;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Faixa lateral âmbar (cadastros de outros) */
  .mc-card-outro::before {
    width: 3px;
    border-radius: 14px 0 0 14px;
  }
}

/* Desktop / tablet ≥641px: layout mais espaçoso da toolbar em linha */
@media (min-width: 720px) {
  .mc-dono-seg {
    grid-template-columns: repeat(3, minmax(140px, max-content));
    justify-content: start;
  }
  .mc-dono-seg .mc-dono-btn { padding: 10px 16px; font-size: 13.5px; }
  .mc-chips-row {
    flex-wrap: wrap;
    overflow-x: visible;
    margin: 0;
    padding: 0;
  }
}

/* =============================================================
   TELA DE SUCESSO (overlay com imagem)
   ============================================================= */
.tela-sucesso-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, .92);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .35s ease;
}
.tela-sucesso-overlay.visivel {
  display: flex;
  opacity: 1;
}
.tela-sucesso-overlay.saindo { opacity: 0; }
.tela-sucesso-conteudo {
  text-align: center;
  padding: 20px;
  max-width: 90vw;
  animation: sucessoIn .5s cubic-bezier(.34, 1.56, .64, 1);
}
.tela-sucesso-img {
  max-width: 480px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .5));
}
@keyframes sucessoIn {
  from { opacity: 0; transform: scale(.85); }
  to { opacity: 1; transform: scale(1); }
}

/* =============================================================
   TOAST de status (SSE)
   ============================================================= */
.status-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 9000;
  transform: translate(-50%, 140%);
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease;
  max-width: 340px;
}
.status-toast.visivel {
  transform: translate(-50%, 0);
  opacity: 1;
}
.status-toast-icone {
  font-size: 22px;
  flex: none;
}
.status-toast-texto { display: flex; flex-direction: column; gap: 2px; }
.status-toast-texto strong { font-size: 13px; color: var(--c-text); font-weight: 600; }
.status-toast-texto span { font-size: 12.5px; color: var(--c-text-3); }

/* =============================================================
   MODAL — VER CADASTRO (mrc-*)
   ============================================================= */
/* =============================================================
   MODAL — VER CADASTRO  (prefixo vc-*)
   Layout: header sticky + tabs sticky + scroll content + actionbar
   ============================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 23, 42, .68);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  animation: vcFade .18s ease;
}
@keyframes vcFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes vcSlide { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.modal-card {
  background: var(--c-surface);
  width: 100%;
  max-width: 960px;
  max-height: 92vh;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: vcSlide .22s cubic-bezier(.2, .8, .2, 1);
}
.modal-header { display: none; }
.modal-conteudo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

/* ── Root do modal nova versão ─────────────────────────── */
.vc-root {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  position: relative;
}

/* Barra de progresso indeterminada mostrada enquanto /basico não respondeu */
.vc-loading-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  overflow: hidden;
  background: rgba(245, 165, 36, .12);
  z-index: 10;
  pointer-events: none;
}
.vc-loading-bar-fill {
  position: absolute;
  inset: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, var(--c-primary, #6366f1), transparent);
  animation: vc-loading-slide 1.1s infinite linear;
}
@keyframes vc-loading-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
.vc-root:not(.is-loading) .vc-loading-bar { display: none; }

/* Spinner do lazy-load dos anexos */
.vc-skeleton-ring {
  width: 36px; height: 36px;
  border: 3px solid rgba(99,102,241,.18);
  border-top-color: var(--c-primary, #6366f1);
  border-radius: 50%;
  margin: 0 auto;
  animation: vc-spin 0.8s linear infinite;
}
@keyframes vc-spin { to { transform: rotate(360deg); } }

/* ── HEADER (sticky no topo) ───────────────────────────── */
.vc-header {
  position: relative;
  flex: none;
  padding: 20px 20px 16px;
  background: linear-gradient(135deg, #232b36 0%, #181c23 60%, #1e242d 100%);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}
/* Fio de luz âmbar no topo do cabeçalho */
.vc-header::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-3) 50%, var(--c-primary) 100%);
}
.vc-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary-2), var(--c-primary));
  border: 2px solid rgba(245, 165, 36, .45);
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.02em;
  color: var(--c-on-primary);
  box-shadow: 0 6px 18px -4px rgba(245, 165, 36, .45);
}
.vc-headline { min-width: 0; }
.vc-headline-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vc-headline-sub {
  margin-top: 5px;
  font-size: 12.5px;
  opacity: 1;
  color: var(--c-text-2);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.vc-headline-sub strong { color: var(--c-primary-3); font-weight: 700; }
.vc-headline-sub .vc-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--c-text-4);
}
.vc-badges {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.vc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.vc-badge svg { width: 11px; height: 11px; }
.vc-badge.is-green  { background: rgba(16, 185, 129, .85); border-color: rgba(16, 185, 129, .9); }
.vc-badge.is-yellow { background: rgba(245, 158, 11, .92); border-color: rgba(245, 158, 11, .95); }
.vc-badge.is-orange { background: rgba(234, 88, 12, .92);  border-color: rgba(234, 88, 12, .95); }
.vc-badge.is-red    { background: rgba(239, 68, 68, .92);  border-color: rgba(239, 68, 68, .95); }
.vc-badge.is-blue   { background: rgba(59, 130, 246, .92); border-color: rgba(59, 130, 246, .95); }
.vc-close {
  width: 36px; height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s ease;
  align-self: start;
}
.vc-close:hover { background: rgba(255, 255, 255, .3); }

/* ── TABS (sticky, scroll horizontal em mobile) ───────── */
.vc-tabs {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 0 8px;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.vc-tabs::-webkit-scrollbar { display: none; }
.vc-tab {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px 11px;
  border: 0;
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.vc-tab svg { width: 15px; height: 15px; }
.vc-tab:hover { color: var(--c-text); }
.vc-tab.is-active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}
.vc-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-size: 10.5px;
  font-weight: 700;
}

/* ── CONTENT (rola) ────────────────────────────────────── */
.vc-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  background: var(--c-surface-2);
}
.vc-pane { display: none; animation: vcFade .18s ease; }
.vc-pane.is-active { display: block; }

.vc-section {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.vc-section:last-child { margin-bottom: 0; }
.vc-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-text-3);
  margin: 0 0 12px;
}
.vc-section-title svg {
  width: 14px; height: 14px;
  color: var(--c-primary);
}

.vc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.vc-grid-3 { grid-template-columns: 2fr 1fr 1fr; }
.vc-grid-1 { grid-template-columns: 1fr; }
@media (max-width: 640px) {
  .vc-grid, .vc-grid-3 { grid-template-columns: 1fr; }
}

/* ── Campo (com botão copiar) ──────────────────────────── */
.vc-field {
  position: relative;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--c-surface-2);
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
  min-width: 0;
}
.vc-field:hover { background: var(--c-surface-3); border-color: var(--c-border); }
.vc-field-full { grid-column: 1 / -1; }
.vc-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-text-3);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.vc-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  word-break: break-word;
  line-height: 1.4;
  padding-right: 36px;
}
.vc-value.is-empty { color: var(--c-text-4); font-weight: 400; font-style: italic; }
.vc-value.is-mono  { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: -.01em; }

.vc-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  vertical-align: middle;
}

.vc-copy {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border: 0;
  border-radius: 8px;
  background: var(--c-surface);
  color: var(--c-text-3);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: all .15s ease;
  box-shadow: var(--shadow-sm);
}
.vc-copy svg { width: 14px; height: 14px; }
.vc-field:hover .vc-copy { opacity: 1; }
.vc-copy:hover { background: var(--c-primary-soft); color: var(--c-primary); }
.vc-copy.is-copied { background: var(--c-success-bg); color: var(--c-success); opacity: 1; }
@media (max-width: 768px) {
  .vc-copy { opacity: 1; }
}

/* ── Anexos ────────────────────────────────────────────── */
.vc-anexos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.vc-anexo-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.vc-anexo-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #0f172a;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.vc-anexo-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform .2s ease;
}
.vc-anexo-img:hover img { transform: scale(1.02); }
.vc-anexo-img-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 8px 12px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  pointer-events: none;
}
.vc-anexo-img-overlay svg { width: 13px; height: 13px; }
.vc-anexo-body {
  padding: 10px 12px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.vc-anexo-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text-2);
  min-width: 0;
  flex: 1;
}
.vc-anexo-pdf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.vc-anexo-pdf-icon {
  width: 48px; height: 48px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  display: grid; place-items: center;
}
.vc-anexo-pdf-icon svg { width: 22px; height: 22px; }
.vc-anexo-pdf-info { flex: 1; min-width: 0; }
.vc-anexo-pdf-info b { display: block; font-size: 14px; color: var(--c-text); }
.vc-anexo-pdf-info span { font-size: 12px; color: var(--c-text-3); }

.vc-btn-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--c-primary);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
  white-space: nowrap;
}
.vc-btn-download svg { width: 14px; height: 14px; }
.vc-btn-download:hover { background: var(--c-primary-2); }

/* ── Observação ────────────────────────────────────────── */
.vc-obs-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-surface-2);
  font: inherit;
  font-size: 14px;
  color: var(--c-text);
  resize: vertical;
  min-height: 110px;
  outline: 0;
  transition: all .15s ease;
}
.vc-obs-textarea:focus {
  border-color: var(--c-primary-2);
  background: var(--c-surface);
  box-shadow: 0 0 0 4px var(--c-primary-ring);
}
.vc-obs-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.vc-obs-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--c-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.vc-obs-save svg { width: 14px; height: 14px; }
.vc-obs-save:hover { background: var(--c-primary-2); }
.vc-obs-save:disabled { opacity: .65; cursor: not-allowed; }

/* ── ACTIONBAR (sticky base, admin) ────────────────────── */

/* === Botoes da actionbar do modal verEmissor (padrao .vc-btn) === */
.vc-actions-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text);
  white-space: nowrap;
  transition: all .15s ease;
  line-height: 1;
}
.vc-btn svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.vc-btn:hover {
  background: var(--c-surface-3);
  border-color: var(--c-text-3);
}
.vc-btn:active { transform: scale(.97); }
.vc-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-primary-ring);
}

.vc-btn-ghost {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-text-2);
}
.vc-btn-ghost:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
}

.vc-btn-primary {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}
.vc-btn-primary:hover {
  background: var(--c-primary-2);
  border-color: var(--c-primary-2);
}

.vc-btn-danger {
  background: var(--c-surface);
  color: var(--c-danger);
  border-color: var(--c-danger-bd);
}
.vc-btn-danger:hover {
  background: var(--c-danger-bg);
  border-color: var(--c-danger);
}

/* Mobile: botoes ocupam linha cheia */
@media (max-width: 600px) {
  .vc-actions-right {
    width: 100%;
    flex-direction: column-reverse;
    gap: 6px;
  }
  .vc-btn {
    width: 100%;
    height: 44px;
    font-size: 14px;
  }
}

/* Garantia anti-svg-gigante em qualquer botao do modal de verEmissor */
.vc-actionbar .vc-btn svg,
.vc-actionbar button > svg {
  width: 14px !important;
  height: 14px !important;
  flex: none;
}


.vc-actionbar {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -4px 16px -8px rgba(0, 0, 0, .35);
}
/* Cada linha: rótulo + conjunto de pills/botões (+ ações à direita) */
.vc-action-row {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
}
.vc-action-row + .vc-action-row {
  padding-top: 10px;
  border-top: 1px solid var(--c-divider);
}
.vc-action-set {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  flex: 1 1 auto;
}
.vc-action-cta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}
/* compat: grupo antigo (emissores etc) */
.vc-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.vc-action-divider {
  width: 1px;
  height: 22px;
  background: var(--c-divider);
  margin: 0 2px;
}
.vc-action-label {
  flex: none;
  width: 92px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-text-3);
}

.vc-status-pill {
  padding: 7px 12px;
  border: 1.5px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-2);
  cursor: pointer;
  transition: all .15s ease;
  text-transform: uppercase;
}
.vc-status-pill:hover { border-color: var(--c-border-strong); }
.vc-status-pill[data-color="yellow"].is-active { background: var(--c-warn);      color: #fff; border-color: var(--c-warn); }
.vc-status-pill[data-color="blue"].is-active   { background: var(--c-info);      color: #fff; border-color: var(--c-info); }
.vc-status-pill[data-color="green"].is-active  { background: var(--c-success-2); color: #fff; border-color: var(--c-success-2); }
.vc-status-pill[data-color="red"].is-active    { background: var(--c-danger);    color: #fff; border-color: var(--c-danger); }
.vc-status-pill[data-color="orange"].is-active { background: #ea580c;            color: #fff; border-color: #ea580c; }
.vc-status-pill.is-loading { opacity: .55; pointer-events: none; }

.vc-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  text-transform: uppercase;
}
.vc-action-btn svg { width: 14px; height: 14px; }
.vc-action-btn:hover { background: var(--c-surface-3); border-color: var(--c-border-strong); }
.vc-action-btn.is-active-tudo {
  background: var(--c-success-bg);
  color: var(--c-success);
  border-color: var(--c-success-bd);
}
.vc-action-btn.is-active-obs {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}
.vc-action-btn.is-active-ligacao {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.vc-action-btn.btn-lig {
  color: var(--c-primary);
  border-color: #c7d2fe;
  background: var(--c-primary-soft);
}
.vc-action-btn.btn-lig:hover { background: #e0e7ff; }
.vc-action-btn.btn-lig.is-copied {
  background: var(--c-success-bg);
  color: var(--c-success);
  border-color: var(--c-success-bd);
}
.vc-action-btn.btn-edit {
  color: var(--c-on-primary);
  border-color: var(--c-primary);
  background: var(--c-primary);
  font-weight: 700;
}
.vc-action-btn.btn-edit:hover { background: var(--c-primary-2); border-color: var(--c-primary-2); }

/* =============================================================
   MODAL "Ver Cadastro" — MAIOR E ORGANIZADO (somente desktop)
   Amplia a janela, dá mais respiro ao cabeçalho/abas/conteúdo e
   distribui os campos para preencher a largura (auto-fit). Não
   afeta mobile/tablet (onde o modal vira bottom-sheet).
   ============================================================= */
@media (min-width: 1024px) {
  /* Janela maior e mais alta */
  .modal-overlay { padding: 32px; }
  .modal-card    { max-width: 1180px; max-height: 90vh; }

  /* Cabeçalho com mais presença */
  .vc-header        { padding: 24px 28px 20px; gap: 18px; }
  .vc-avatar        { width: 64px; height: 64px; font-size: 23px; }
  .vc-headline-name { font-size: 21px; }
  .vc-headline-sub  { font-size: 13px; gap: 10px; margin-top: 7px; }
  .vc-close         { width: 40px; height: 40px; }

  /* Abas um pouco maiores */
  .vc-tab     { padding: 15px 20px 13px; font-size: 14px; }
  .vc-tab svg { width: 16px; height: 16px; }

  /* Conteúdo com mais respiro */
  .vc-content       { padding: 22px 26px; }
  .vc-section       { padding: 20px 22px 22px; margin-bottom: 16px; }
  .vc-section-title { font-size: 12.5px; margin-bottom: 16px; }

  /* Campos: distribuem-se preenchendo a largura disponível.
     Linhas com menos campos esticam para ocupar todo o espaço, e os
     campos "full" (Nome, E-mail, etc.) continuam em linha cheia. */
  .vc-grid,
  .vc-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
  }
  .vc-grid-1 { grid-template-columns: 1fr; }
  .vc-field  { padding: 12px 14px; }
  .vc-label  { font-size: 11px; }
  .vc-value  { font-size: 15px; }

  /* Anexos: cartões maiores, mais por linha */
  .vc-anexos-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

  /* Rodapé (status / marcadores) mais confortável */
  .vc-actionbar    { padding: 16px 26px; gap: 12px; }
  .vc-status-pill  { padding: 8px 14px; font-size: 12.5px; }
  .vc-action-btn   { padding: 9px 14px; font-size: 13px; }
}

/* ── Toast de copiado ──────────────────────────────────── */
.vc-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 18px;
  background: rgba(15, 23, 42, .95);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: var(--shadow-lg);
}
.vc-toast svg { width: 16px; height: 16px; }
.vc-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Lightbox de imagens ───────────────────────────────── */
.vc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, .92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: vcFade .15s ease;
}
.vc-lightbox.is-open { display: flex; }
.vc-lightbox img {
  max-width: 100%;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.vc-lightbox-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s ease;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.vc-lightbox-close:hover { background: rgba(255, 255, 255, .28); }
.vc-lightbox-close svg { width: 22px; height: 22px; }

/* ── Mobile topbar: oculta no desktop ──────────────────── */
.vc-mobile-topbar { display: none; }

/* ── Mobile: modal vira FULL SCREEN com top bar fixa ───── */
@media (max-width: 640px) {
  /* Overlay sem padding, modal ocupa a tela toda */
  .modal-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  /* Modal full screen: usa fallback 100vh primeiro, e 100dvh
     sobrescreve em browsers modernos (iOS 15.4+, Chrome 108+).
     A ordem importa: a 2ª declaração só é aplicada se reconhecida. */
  .modal-card {
    max-width: 100%;
    width: 100%;
    max-height: 100vh;
    height: 100vh;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }

  /* ▶ TOP BAR mobile: barra branca fixa com botão FECHAR
     Não tem como sumir — fundo sólido contrastante, alvo touch
     enorme (44px+), padding-top respeita notch/Dynamic Island. */
  .vc-mobile-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 10px 14px;
    padding-top:  calc(10px + env(safe-area-inset-top, 0px));
    padding-left: calc(14px + env(safe-area-inset-left, 0px));
    padding-right:calc(14px + env(safe-area-inset-right, 0px));
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
    position: relative;
    z-index: 5;
  }
  .vc-mobile-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px 10px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--c-surface-3);
    color: var(--c-text);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    flex: none;
    min-height: 44px;
    transition: background .15s ease, transform .1s ease;
  }
  .vc-mobile-back svg {
    width: 18px; height: 18px;
    color: var(--c-text);
  }
  .vc-mobile-back:hover { background: var(--c-border); }
  .vc-mobile-back:active { background: var(--c-border-strong); transform: scale(.97); }

  .vc-mobile-title {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* compensa a largura do botão "Fechar" pra centralizar visualmente */
    padding-right: 88px;
  }

  /* ▶ Header gradient (mobile): layout vertical "perfil"
     avatar grande centralizado + nome + sub + badges.
     Visual de cartão de contato, não de formulário. */
  .vc-header {
    padding: 20px 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    grid-template-columns: none;
  }
  /* Esconde o X original do header em mobile (a topbar tem o Fechar) */
  .vc-close { display: none; }
  /* Sem handle (não é mais bottom sheet) */
  .vc-header::before { display: none; }

  .vc-avatar {
    width: 76px;
    height: 76px;
    font-size: 26px;
    border-width: 2px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  }
  .vc-headline {
    width: 100%;
    text-align: center;
  }
  .vc-headline-name {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
    padding: 0 8px;
  }
  .vc-headline-sub {
    font-size: 12.5px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
    opacity: 1;
  }
  .vc-headline-sub > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .vc-headline-sub .vc-dot {
    width: 3px;
    height: 3px;
    opacity: .7;
  }

  /* Badges em pill centralizadas, com scroll caso transbordem */
  .vc-badges {
    margin-top: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 4px;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
  }
  .vc-badges::-webkit-scrollbar { display: none; }
  /* trick: centraliza badges quando cabem, mas permite scroll quando não */
  .vc-badges::before, .vc-badges::after {
    content: '';
    flex: 1 1 auto;
    min-width: 0;
  }
  .vc-badge {
    font-size: 11.5px;
    padding: 5px 11px;
    flex: none;
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: .02em;
  }

  /* ▶ TABS estilo "segmented control" em pílulas */
  .vc-tabs {
    padding: 8px 12px;
    gap: 6px;
    background: var(--c-surface-2);
  }
  .vc-tab {
    padding: 8px 14px;
    font-size: 12.5px;
    border-radius: 999px;
    border-bottom: 0;
    margin-bottom: 0;
    background: transparent;
    color: var(--c-text-3);
  }
  .vc-tab svg { width: 14px; height: 14px; }
  .vc-tab.is-active {
    background: var(--c-surface);
    color: var(--c-primary);
    border-bottom-color: transparent;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
  }
  .vc-tab-count {
    background: var(--c-primary);
    color: #fff;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
  }
  .vc-tab.is-active .vc-tab-count {
    background: var(--c-primary);
    color: #fff;
  }

  /* ▶ CONTENT: padding levemente menor */
  .vc-content { padding: 12px 12px 16px; }

  /* ▶ SECTIONS: cartão branco com título mais sutil */
  .vc-section {
    padding: 4px 0;
    border-radius: 14px;
    border: 1px solid var(--c-border);
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
  }
  .vc-section-title {
    padding: 12px 16px 6px;
    margin: 0;
    font-size: 11px;
    color: var(--c-text-3);
    background: transparent;
  }
  .vc-section-title svg { width: 12px; height: 12px; }

  /* ▶ GRID vira "lista iOS" — campos como linhas com divisor entre si */
  .vc-grid,
  .vc-grid-3 {
    display: block;
    grid-template-columns: none;
    gap: 0;
  }

  /* ▶ FIELDS estilo iOS Contacts: label esq, valor dir, copy à direita */
  .vc-field {
    display: grid;
    grid-template-columns: minmax(90px, auto) 1fr auto;
    align-items: center;
    column-gap: 12px;
    padding: 12px 16px;
    background: var(--c-surface);
    border: 0;
    border-radius: 0;
    border-top: 1px solid var(--c-divider);
    min-height: 48px;
  }
  .vc-field:hover { background: var(--c-surface); border-color: transparent; border-top-color: var(--c-divider); }
  .vc-field:first-child { border-top: 0; }
  .vc-field.vc-field-full {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 2px;
  }
  .vc-field.vc-field-full .vc-label { grid-column: 1 / -1; }
  .vc-field.vc-field-full .vc-value { grid-column: 1 / 2; padding-right: 0; }
  .vc-field.vc-field-full .vc-copy {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    position: static;
    transform: none;
  }
  .vc-label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-text-3);
  }
  .vc-label svg { width: 14px; height: 14px; opacity: .7; }
  .vc-value {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--c-text);
    text-align: right;
    padding-right: 0;
    word-break: break-word;
    line-height: 1.3;
  }
  .vc-value.is-mono { font-size: 14px; }
  .vc-value.is-empty {
    color: var(--c-text-4);
    font-weight: 400;
  }
  .vc-pill {
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 10.5px;
  }

  /* Copy button: sempre visível em mobile, sutil */
  .vc-copy {
    position: static;
    transform: none;
    width: 32px;
    height: 32px;
    opacity: 1;
    background: var(--c-surface-3);
    color: var(--c-text-3);
    border-radius: 8px;
    box-shadow: none;
    flex: none;
  }
  .vc-copy svg { width: 14px; height: 14px; }
  .vc-copy:active { background: var(--c-border); }
  .vc-copy.is-copied {
    background: var(--c-success-bg);
    color: var(--c-success);
  }

  /* ▶ ANEXOS: cards com mais respiração */
  .vc-anexos-grid { grid-template-columns: 1fr; gap: 12px; }
  .vc-anexo-card {
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
  }
  .vc-anexo-img { aspect-ratio: 4 / 3; }
  .vc-anexo-body { padding: 12px 14px 14px; }
  .vc-anexo-label { font-size: 13px; }
  .vc-anexo-pdf {
    border-radius: 14px;
    padding: 14px;
    box-shadow: var(--shadow-sm);
  }

  /* ▶ ACTIONBAR (admin): 2 linhas, cada uma com scroll horizontal limpo */
  .vc-actionbar {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }
  .vc-action-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 6px;
  }
  .vc-action-row::-webkit-scrollbar { display: none; }
  .vc-action-row + .vc-action-row { padding-top: 8px; }
  .vc-action-set { flex-wrap: nowrap; flex: 0 0 auto; }
  .vc-action-cta { margin-left: 8px; }
  .vc-action-group { flex-wrap: nowrap; }
  .vc-action-label {
    display: inline-block;
    width: auto;
    align-self: center;
    flex: none;
    color: var(--c-text-4);
  }
  .vc-action-divider { display: none; }
  .vc-status-pill, .vc-action-btn { white-space: nowrap; }

  /* Observação: textarea um pouco maior em mobile */
  .vc-obs-textarea { font-size: 15px; min-height: 130px; }
}

/* =============================================================
   MODAL — EDITAR CADASTRO (med-*)
   ============================================================= */
.med-overlay {
  position: fixed; inset: 0;
  z-index: 250;
  background: rgba(15, 23, 42, .65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  animation: fadeIn .2s ease;
}
.med-card {
  background: var(--c-surface);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.med-handle { display: none; }
.med-header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--c-border);
  flex: none;
}
.med-header-icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  display: grid; place-items: center;
}
.med-header-info { flex: 1 1 auto; min-width: 0; }
.med-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--c-text); }
.med-subtitle {
  display: block;
  font-size: 12.5px;
  color: var(--c-text-3);
  margin-top: 2px;
}
.med-close {
  flex: none;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 8px;
  background: var(--c-surface-3);
  color: var(--c-text-2);
  display: grid; place-items: center;
  cursor: pointer;
}
.med-close:hover { background: var(--c-border); color: var(--c-text); }

.med-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px;
}
.med-section-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-text-3);
  margin: 18px 0 10px;
}
.med-section-title:first-child { margin-top: 0; }
.med-section-title svg { color: var(--c-primary); }

.med-divider {
  border-bottom: 1px solid var(--c-divider);
  margin: 4px 0;
}

.med-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 600px) {
  .med-grid { grid-template-columns: 1fr; }
}
.med-field { display: flex; flex-direction: column; gap: 4px; }
.med-field-full { grid-column: 1 / -1; }
.med-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.med-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface-2);
  font: inherit;
  font-size: 14px;
  color: var(--c-text);
  outline: 0;
  transition: all .15s ease;
}
.med-input:focus {
  border-color: var(--c-primary-2);
  background: var(--c-surface);
  box-shadow: 0 0 0 4px var(--c-primary-ring);
}

.med-feedback {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  display: none;
  align-items: center;
  gap: 6px;
}
.med-feedback.erro {
  display: flex;
  background: var(--c-danger-bg);
  color: var(--c-danger);
  border: 1px solid var(--c-danger-bd);
}
.med-feedback.sucesso {
  display: flex;
  background: var(--c-success-bg);
  color: var(--c-success);
  border: 1px solid var(--c-success-bd);
}

.med-footer {
  display: flex; gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--c-border);
  flex: none;
}
.med-btn-salvar, .med-btn-cancelar {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1;
  padding: 11px 16px;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.med-btn-salvar {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(245, 165, 36, .5);
}
.med-btn-salvar:hover { filter: brightness(1.05); }
.med-btn-salvar:disabled { opacity: .7; cursor: not-allowed; }
.med-btn-cancelar {
  background: var(--c-surface-3);
  color: var(--c-text-2);
  border: 1.5px solid var(--c-border);
}
.med-btn-cancelar:hover { background: var(--c-border); }

/* =============================================================
   MODAL — SENHA DE USUÁRIO (msu-*)
   ============================================================= */
.msu-overlay {
  position: fixed; inset: 0;
  z-index: 260;
  background: rgba(15, 23, 42, .65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  animation: fadeIn .2s ease;
}
.msu-card {
  background: var(--c-surface);
  width: 100%;
  max-width: 460px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.msu-handle { display: none; }
.msu-header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--c-border);
}
.msu-header-icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  display: grid; place-items: center;
}
.msu-header-info { flex: 1 1 auto; }
.msu-title { margin: 0; font-size: 16px; font-weight: 600; }
.msu-subtitle {
  display: block;
  font-size: 12.5px;
  color: var(--c-text-3);
  margin-top: 2px;
}
.msu-close {
  flex: none;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 8px;
  background: var(--c-surface-3);
  color: var(--c-text-2);
  display: grid; place-items: center;
  cursor: pointer;
}
.msu-close:hover { background: var(--c-border); color: var(--c-text); }

.msu-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.msu-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.msu-senha-box {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 10px;
}
.msu-senha-value {
  flex: 1 1 auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  color: var(--c-text);
  font-weight: 600;
}
.msu-btn-icon {
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--c-text-3);
  cursor: pointer;
  display: grid; place-items: center;
}
.msu-btn-icon:hover { background: var(--c-surface-3); color: var(--c-text); }
.msu-btn-copy {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--c-primary);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.msu-btn-copy:hover { background: var(--c-primary-2); }
.msu-btn-copy.copiado { background: var(--c-success); }

.msu-divider {
  position: relative;
  text-align: center;
  margin: 4px 0;
}
.msu-divider::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--c-divider);
}
.msu-divider span {
  position: relative;
  background: var(--c-surface);
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.msu-aviso {
  display: flex; gap: 10px;
  padding: 12px;
  background: var(--c-warn-bg);
  border: 1px solid var(--c-warn-bd);
  border-radius: 10px;
}
.msu-aviso-icon {
  flex: none;
  color: var(--c-warn);
}
.msu-aviso-text strong {
  display: block;
  font-size: 13.5px;
  color: #92400e;
  margin-bottom: 2px;
}
.msu-aviso-text p { margin: 0; font-size: 12.5px; color: #92400e; }

.msu-input-group { display: flex; flex-direction: column; gap: 10px; }
.msu-input-wrap { position: relative; }
.msu-input {
  width: 100%;
  padding: 11px 44px 11px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface-2);
  font: inherit;
  font-size: 14px;
  outline: 0;
}
.msu-input:focus {
  border-color: var(--c-primary-2);
  background: var(--c-surface);
  box-shadow: 0 0 0 4px var(--c-primary-ring);
}
.msu-input-toggle {
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--c-text-3);
  cursor: pointer;
  display: grid; place-items: center;
}
.msu-input-toggle:hover { background: var(--c-surface-3); }
.msu-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.msu-btn-primary:disabled { opacity: .7; cursor: not-allowed; }

.msu-feedback {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
}
.msu-feedback.erro { display: flex; background: var(--c-danger-bg); color: var(--c-danger); border: 1px solid var(--c-danger-bd); }
.msu-feedback.sucesso { display: flex; background: var(--c-success-bg); color: var(--c-success); border: 1px solid var(--c-success-bd); }

/* =============================================================
   MODAL — CONFIRMAR EXCLUSÃO (mcd-*)
   ============================================================= */
.mcd-overlay {
  position: fixed; inset: 0;
  z-index: 270;
  background: rgba(15, 23, 42, .65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  animation: fadeIn .2s ease;
}
.mcd-card {
  background: var(--c-surface);
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mcd-handle { display: none; }
.mcd-header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px 16px;
}
.mcd-header-icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--c-danger-bg);
  color: var(--c-danger);
  display: grid; place-items: center;
}
.mcd-header-info { flex: 1 1 auto; }
.mcd-header-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--c-text); }
.mcd-close {
  flex: none;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 8px;
  background: var(--c-surface-3);
  color: var(--c-text-2);
  display: grid; place-items: center;
  cursor: pointer;
}
.mcd-close:hover { background: var(--c-border); color: var(--c-text); }

.mcd-body { padding: 0 20px 16px; }
.mcd-desc { margin: 0 0 14px; font-size: 14px; color: var(--c-text-2); }
.mcd-alvo {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  margin-bottom: 12px;
}
.mcd-alvo-avatar {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-3));
  color: #fff;
  font-weight: 700;
  display: grid; place-items: center;
  font-size: 13px;
}
.mcd-alvo-info { min-width: 0; }
.mcd-alvo-nome { margin: 0; font-size: 14px; font-weight: 600; color: var(--c-text); }
.mcd-alvo-login { margin: 2px 0 0; font-size: 12.5px; color: var(--c-text-3); }

.mcd-aviso {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  background: var(--c-danger-bg);
  border: 1px solid var(--c-danger-bd);
  border-radius: 10px;
  color: var(--c-danger);
}
.mcd-aviso svg { flex: none; margin-top: 1px; }
.mcd-aviso p { margin: 0; font-size: 12.5px; }
.mcd-aviso strong { font-weight: 700; }

.mcd-erro {
  display: none;
  align-items: center; gap: 6px;
  margin: 0 20px 14px;
  padding: 10px;
  background: var(--c-danger-bg);
  color: var(--c-danger);
  border-radius: 8px;
  font-size: 13px;
}

.mcd-footer {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 20px 20px;
}
.mcd-btn-confirmar, .mcd-btn-cancelar {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 16px;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mcd-btn-confirmar {
  background: var(--c-danger);
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(220, 38, 38, .5);
}
.mcd-btn-confirmar:hover { background: #b91c1c; }
.mcd-btn-cancelar {
  background: var(--c-surface-3);
  color: var(--c-text-2);
  border: 1.5px solid var(--c-border);
}
.mcd-btn-cancelar:hover { background: var(--c-border); }

/* =============================================================
   admin_calc.html (utilitário)
   ============================================================= */
.login-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--c-bg);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.row { display: flex; align-items: center; }
.gap-8 { gap: 8px; }
.input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface-2);
  font: inherit;
  outline: 0;
}
.input:focus { border-color: var(--c-primary); background: var(--c-surface); box-shadow: 0 0 0 4px var(--c-primary-ring); }
.btn {
  padding: 9px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--c-primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { background: var(--c-primary-2); }
.msg { color: var(--c-text-2); font-size: 14px; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 640px) {
  .admin-content { padding: 14px 12px 30px; }
  .main-content { padding: 14px 12px 30px; }
  .card { padding: 16px 14px; border-radius: var(--radius); }
  .card-titulo { font-size: 15px; }
  .h2 { font-size: 19px; }
  .modal-overlay, .med-overlay, .msu-overlay, .mcd-overlay { padding: 0; align-items: flex-end; }
  .modal-card {
    max-height: 96vh;
    border-radius: 20px 20px 0 0;
  }
  .med-card, .msu-card, .mcd-card {
    border-radius: 20px 20px 0 0;
    max-height: 95vh;
  }
  .med-handle, .msu-handle, .mcd-handle {
    display: block;
    width: 40px; height: 4px;
    background: var(--c-border-strong);
    border-radius: 2px;
    margin: 8px auto 0;
  }
  .stepper-label { font-size: 9.5px; }
  .step-nav .btn-primary, .step-nav .btn-secondary { font-size: 13.5px; padding: 11px 14px; gap: 4px; }
}


/* =============================================================
   UI Confirm / Alert  (modal customizado, prefixo .ui-confirm-*)
   ============================================================= */
.ui-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: uiConfirmFadeBg .18s ease;
}
.ui-confirm-overlay.is-visible { display: flex; }

@keyframes uiConfirmFadeBg {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes uiConfirmPop {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.ui-confirm-card {
  background: var(--c-surface);
  border-radius: 18px;
  width: 100%;
  max-width: 440px;
  padding: 22px 22px 18px;
  box-shadow:
    0 20px 50px -10px rgba(15, 23, 42, .35),
    0 8px 20px -8px rgba(15, 23, 42, .2);
  animation: uiConfirmPop .22s cubic-bezier(.2,.9,.3,1.2);
  border: 1px solid var(--c-border);
}

.ui-confirm-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.ui-confirm-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.ui-confirm-icon svg { width: 22px; height: 22px; }

.ui-confirm-card.is-danger .ui-confirm-icon {
  background: var(--c-danger-bg);
  color: var(--c-danger);
}

.ui-confirm-text { flex: 1; min-width: 0; }

.ui-confirm-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text);
  margin: 0 0 6px;
  line-height: 1.25;
}

.ui-confirm-msg {
  font-size: 14px;
  color: var(--c-text-2);
  margin: 0;
  line-height: 1.5;
}
.ui-confirm-msg b {
  color: var(--c-text);
  font-weight: 600;
}

.ui-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.ui-confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 18px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text);
  transition: all .15s ease;
  line-height: 1;
  min-width: 96px;
}
.ui-confirm-btn:hover {
  background: var(--c-surface-3);
  border-color: var(--c-text-3);
}
.ui-confirm-btn:active { transform: scale(.97); }
.ui-confirm-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-primary-ring);
}

.ui-confirm-btn-cancel { /* mantem padrao */ }
.ui-confirm-btn-cancel:empty { display: none; }

.ui-confirm-btn-ok {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}
.ui-confirm-btn-ok:hover {
  background: var(--c-primary-2);
  border-color: var(--c-primary-2);
}

.ui-confirm-btn-ok.is-danger {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: #fff;
}
.ui-confirm-btn-ok.is-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}
.ui-confirm-btn-ok.is-danger:focus-visible {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .35);
}

@media (max-width: 500px) {
  .ui-confirm-overlay { padding: 14px; }
  .ui-confirm-card { padding: 18px 16px 14px; border-radius: 16px; }
  .ui-confirm-actions { flex-direction: column-reverse; }
  .ui-confirm-btn { width: 100%; height: 46px; }
}



/* =============================================================
   NOVO CADASTRO (USUARIO) - prefixo .nc-*
   Mantem compatibilidade com classes legadas:
   .form-step / .step-ativo / .fl-input-wrap / .stepper-step / etc.
   ============================================================= */

/* ESCOPO base do shell - SOMENTE quando a tela esta ativa */
.tela.nc-app {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
  min-height: 100dvh;
  flex-direction: column;
}
.tela.nc-app.ativa {
  display: flex;
}

/* Garantia: quando #telaUsuario NAO esta ativa, esconder TUDO dentro,
   inclusive elementos position:fixed (nc-bottombar, nc-topbar, drawer-overlay).
   Sem isto, a bottombar fica flutuando na tela de login. */
#telaUsuario:not(.ativa) .nc-bottombar,
#telaUsuario:not(.ativa) .nc-topbar,
#telaUsuario:not(.ativa) .drawer,
#telaUsuario:not(.ativa) .drawer-overlay,
#telaUsuario:not(.ativa) .tela-sucesso-overlay {
  display: none !important;
}

/* === Layout principal: sidebar + main === */
.nc-shell {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 0;
}

/* === SIDEBAR === */
.nc-sidebar {
  background: var(--c-surface);
  border-right: 1px solid var(--c-divider);
  padding: 24px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
}
.nc-sidebar::-webkit-scrollbar { width: 6px; }
.nc-sidebar::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }

.nc-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-divider);
}
.nc-brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 16px -6px rgba(79,70,229,.5);
}
.nc-brand-text { display: flex; flex-direction: column; }
.nc-brand-title { font-size: 15px; font-weight: 700; color: var(--c-text); line-height: 1; }
.nc-brand-subtitle { font-size: 11px; color: var(--c-text-3); margin-top: 3px; text-transform: uppercase; letter-spacing: .06em; }

.nc-sidebar-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all .15s;
}
.nc-sidebar-action:hover { background: var(--c-surface-3); color: var(--c-text); border-color: var(--c-border-strong); }
.nc-sidebar-action svg { color: var(--c-primary); }

/* Progress card */
.nc-progress-card {
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border: 1px solid #ddd6fe;
  border-radius: 14px;
  padding: 14px 14px 12px;
}
.nc-progress-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-primary);
  margin-bottom: 8px;
}
.nc-progress-bar {
  height: 7px;
  background: var(--c-surface);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
.nc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-primary), var(--c-primary-2));
  border-radius: 999px;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.nc-progress-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--c-text-3);
  text-align: center;
}

/* Vertical stepper */
.nc-vstepper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  padding-left: 4px;
}
.nc-vstep {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background .15s;
  position: relative;
}
.nc-vstep::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 100%;
  width: 2px;
  height: 8px;
  background: var(--c-border);
  transition: background .2s;
}
.nc-vstep:last-child::before { display: none; }
.nc-vstep:hover { background: var(--c-surface-2); }
.nc-vstep-num {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--c-surface-3);
  color: var(--c-text-3);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid transparent;
  transition: all .2s;
}
.nc-vstep-num svg { width: 16px; height: 16px; }
.nc-vstep-text { flex: 1; min-width: 0; }
.nc-vstep-lbl {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text-2);
}
.nc-vstep-sub {
  font-size: 11.5px;
  color: var(--c-text-3);
  margin-top: 2px;
}
.nc-vstep.is-active .nc-vstep-num {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary-soft);
  box-shadow: 0 6px 12px -4px rgba(79,70,229,.5);
}
.nc-vstep.is-active .nc-vstep-lbl { color: var(--c-primary); font-weight: 700; }
.nc-vstep.is-done .nc-vstep-num {
  background: var(--c-success-bg);
  color: var(--c-success);
}
.nc-vstep.is-done .nc-vstep-lbl { color: var(--c-text); }
.nc-vstep.is-done::before { background: var(--c-success); }

.nc-sidebar-logout {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface);
  color: var(--c-danger);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all .15s;
}
.nc-sidebar-logout:hover { background: var(--c-danger-bg); border-color: var(--c-danger-bd); }

/* === MAIN === */
.nc-main {
  padding: 28px 32px 60px;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* HERO */
.nc-hero {
  background: linear-gradient(135deg, #f5a524 0%, #d97706 55%, #b45309 100%);
  color: #1a1206;
  border-radius: 18px;
  padding: 24px 26px;
  box-shadow: 0 14px 30px -10px rgba(245,165,36,.45);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.nc-hero::before {
  content: '';
  position: absolute;
  inset: auto -40px -50px auto;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
  pointer-events: none;
}
.nc-hero-body { flex: 1; min-width: 0; }
.nc-hero-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.nc-hero-sub {
  margin: 0;
  font-size: 14px;
  opacity: .88;
}
.nc-hero-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.nc-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}
.nc-hero-chip svg { opacity: .9; }

/* Mobile-only stepper horizontal */
.nc-hstepper { display: none; }

/* === STEP CARD === */
.nc-step {
  background: var(--c-surface);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 24px -12px rgba(15,23,42,.1);
  border: 1px solid var(--c-divider);
  margin-bottom: 0;
}
.nc-step-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px;
  background: linear-gradient(180deg, var(--c-primary-soft) 0%, transparent 100%);
  border-bottom: 1px solid var(--c-divider);
}
.nc-step-ico {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--c-primary);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 16px -6px rgba(79,70,229,.5);
}
.nc-step-headtxt { flex: 1; min-width: 0; }
.nc-step-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-primary);
  margin-bottom: 4px;
}
.nc-step-title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.01em;
}
.nc-step-desc {
  margin: 0;
  font-size: 13.5px;
  color: var(--c-text-3);
  line-height: 1.45;
}

/* === FIELDS === */
.nc-fields {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.nc-full { width: 100%; }

/* Idade chip novo */
.nc-idade-chip {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  border-radius: 999px;
  pointer-events: none;
  display: none;
}
.nc-idade-chip:not(:empty) { display: inline-block; }

/* === Toggle (checkbox estilizado) === */
.nc-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 12px;
  transition: all .15s;
}
.nc-toggle:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }
.nc-toggle input { display: none; }
.nc-toggle-switch {
  flex: none;
  width: 40px;
  height: 22px;
  background: var(--c-border-strong);
  border-radius: 999px;
  position: relative;
  transition: background .25s;
  margin-top: 2px;
}
.nc-toggle-switch::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  background: var(--c-surface);
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.nc-toggle input:checked + .nc-toggle-switch { background: var(--c-primary); }
.nc-toggle input:checked + .nc-toggle-switch::after { transform: translateX(18px); }
.nc-toggle-text { flex: 1; min-width: 0; }
.nc-toggle-title { display: block; font-size: 14px; font-weight: 600; color: var(--c-text); }
.nc-toggle-sub { display: block; font-size: 12px; color: var(--c-text-3); margin-top: 2px; }

.nc-area-senha-dois {
  border-left: 3px solid var(--c-primary);
  background: var(--c-primary-soft);
  padding: 14px;
  border-radius: 0 12px 12px 0;
  margin-top: 4px;
  display: none;
}

/* === STATUS GRID === */
.nc-status-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 22px 24px 6px;
}
.nc-status-opcao {
  display: block;
  cursor: pointer;
}
.nc-status-opcao input { display: none; }
.nc-status-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 2px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-surface);
  transition: all .18s ease;
  position: relative;
}
.nc-status-card:hover {
  border-color: var(--c-border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.nc-status-ico {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.nc-status-yellow .nc-status-ico { background: var(--c-warn-bg); color: var(--c-warn); }
.nc-status-green  .nc-status-ico { background: var(--c-success-bg); color: var(--c-success); }
.nc-status-red    .nc-status-ico { background: var(--c-danger-bg); color: var(--c-danger); }
.nc-status-info { flex: 1; min-width: 0; }
.nc-status-lbl { font-size: 15px; font-weight: 600; color: var(--c-text); }
.nc-status-sub { font-size: 12.5px; color: var(--c-text-3); margin-top: 2px; }
.nc-status-check {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--c-border);
  display: grid;
  place-items: center;
  color: transparent;
  transition: all .18s;
}
.nc-status-opcao input:checked + .nc-status-card {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
  box-shadow: 0 0 0 4px var(--c-primary-ring);
}
.nc-status-opcao input:checked + .nc-status-yellow { border-color: var(--c-warn); background: var(--c-warn-bg); box-shadow: 0 0 0 4px rgba(245,158,11,.15); }
.nc-status-opcao input:checked + .nc-status-green  { border-color: var(--c-success); background: var(--c-success-bg); box-shadow: 0 0 0 4px rgba(16,185,129,.15); }
.nc-status-opcao input:checked + .nc-status-red    { border-color: var(--c-danger); background: var(--c-danger-bg); box-shadow: 0 0 0 4px rgba(239,68,68,.15); }
.nc-status-opcao input:checked + .nc-status-card .nc-status-check {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.nc-status-opcao input:checked + .nc-status-yellow .nc-status-check { background: var(--c-warn); border-color: var(--c-warn); color: #fff; }
.nc-status-opcao input:checked + .nc-status-green  .nc-status-check { background: var(--c-success); border-color: var(--c-success); color: #fff; }
.nc-status-opcao input:checked + .nc-status-red    .nc-status-check { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }

/* === UPLOADS === */
.nc-uploads-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 22px 24px 6px;
}
.nc-upload { display: flex; flex-direction: column; gap: 0; margin: 0; }
.nc-upload-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text-2);
  margin-bottom: 8px;
}
.nc-upload-label svg { color: var(--c-primary); }
.nc-upload-required {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-danger);
  background: var(--c-danger-bg);
  padding: 2px 7px;
  border-radius: 999px;
}
.nc-upload-area {
  display: block;
  position: relative;
  height: 160px;
  border: 2px dashed var(--c-border-strong);
  border-radius: 14px;
  background: var(--c-surface-2);
  cursor: pointer;
  overflow: hidden;
  transition: all .18s;
}
.nc-upload-area:hover {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
}
.nc-upload-area.is-pdf:hover { border-color: var(--c-danger); }
.nc-upload-placeholder {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--c-text-3);
  text-align: center;
  padding: 16px;
  pointer-events: none;
}
.nc-upload-placeholder svg { color: var(--c-primary); margin-bottom: 6px; opacity: .7; }
.nc-upload-title { font-size: 13px; font-weight: 600; color: var(--c-text-2); }
.nc-upload-hint { font-size: 11px; color: var(--c-text-3); }
.nc-upload-preview {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
}
.nc-upload-pdf-preview {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--c-danger-bg);
  color: var(--c-danger);
  padding: 16px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  word-break: break-all;
}
.nc-upload-pdf-preview svg { color: var(--c-danger); }
.nc-upload-remove {
  align-self: flex-start;
  margin-top: 8px;
  background: transparent;
  color: var(--c-danger);
  border: 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  display: none;
  align-items: center;
  gap: 4px;
}
.nc-upload-remove.visible { display: inline-flex; }
.nc-upload-remove:hover { text-decoration: underline; }

/* === BUTTONS === */
.nc-step-nav {
  padding: 18px 24px 22px;
  border-top: 1px solid var(--c-divider);
  background: var(--c-surface);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.nc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  padding: 0 22px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  line-height: 1;
}
.nc-btn:active { transform: scale(.97); }
.nc-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-primary-ring); }
.nc-btn svg { flex: none; }
.nc-btn-primary {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}
.nc-btn-primary:hover { background: var(--c-primary-2); border-color: var(--c-primary-2); }
.nc-btn-ghost {
  background: transparent;
  color: var(--c-text-2);
  border-color: var(--c-border-strong);
}
.nc-btn-ghost:hover { background: var(--c-surface-2); color: var(--c-text); }
.nc-btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border-color: #059669;
  box-shadow: 0 8px 16px -6px rgba(16,185,129,.5);
}
.nc-btn-success:hover { background: linear-gradient(135deg, #059669, #047857); }

/* === TOPBAR mobile === */
.nc-topbar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-divider);
  position: sticky;
  top: 0;
  z-index: 30;
}
.nc-topbar-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0;
  background: var(--c-surface-2);
  color: var(--c-text-2);
  border-radius: 10px;
  cursor: pointer;
}
.nc-topbar-btn:hover { background: var(--c-surface-3); }
.nc-topbar-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Marca da topbar (só desktop — escondida no mobile) */
.nc-topbar-brand-d { display: none; align-items: center; gap: 10px; flex: 1; min-width: 0; font-weight: 800; font-size: 15px; color: var(--c-text); }
.nc-topbar-brand-logo {
  width: 34px; height: 34px; flex: none;
  border-radius: 9px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
}
.nc-topbar-step {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-primary);
}
.nc-topbar-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nc-topbar-user {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  flex: none;
}

/* === BOTTOM BAR mobile === */
.nc-bottombar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(18, 21, 27, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-border);
  align-items: center;
  gap: 10px;
}
.nc-bottombar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.nc-bottombar-btn:disabled { opacity: .4; pointer-events: none; }
.nc-bottombar-back {
  background: var(--c-surface-2);
  color: var(--c-text-2);
}
.nc-bottombar-back:hover { background: var(--c-surface-3); }
.nc-bottombar-next {
  background: var(--c-primary);
  color: #fff;
  margin-left: auto;
}
.nc-bottombar-next:hover { background: var(--c-primary-2); }
.nc-bottombar-next.is-final {
  background: linear-gradient(135deg, #10b981, #059669);
}
.nc-bottombar-dots {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
}
.nc-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-border-strong);
  transition: all .2s;
}
.nc-dot.is-active {
  background: var(--c-primary);
  width: 22px;
  border-radius: 999px;
}
.nc-dot.is-done {
  background: var(--c-success);
}

/* =============================================================
   RESPONSIVO  -- < 1000px : colapsa sidebar, ativa topbar/bottombar
   ============================================================= */
@media (max-width: 999px) {
  .nc-sidebar { display: none; }
  /* minmax(0,1fr) evita que conteúdo com nowrap (badges) estoure a
     largura do grid e cause rolagem horizontal no mobile. */
  .nc-shell { grid-template-columns: minmax(0, 1fr); }
  .nc-main { min-width: 0; }
  .nc-topbar { display: flex; }
  .nc-bottombar { display: flex; }
  .nc-hero { display: none; }
  .nc-hstepper { display: flex; }

  .nc-main {
    /* folga inferior generosa para o conteúdo NÃO ficar escondido atrás da
       bottombar fixa (antes 90px era insuficiente em telas com área segura,
       impedindo o usuário de ver/rolar até o fim na etapa de Documentos). */
    padding: 14px 14px calc(118px + env(safe-area-inset-bottom, 0px));
    gap: 12px;
  }

  /* Mobile: 1 step por vez (mantem mecanica original) */
  .nc-step:not(.step-ativo) { display: none; }

  .nc-step { border-radius: 14px; }
  .nc-step-head { padding: 18px; }
  .nc-step-title { font-size: 17px; }
  .nc-fields { padding: 18px; }
  .nc-row { grid-template-columns: 1fr; gap: 0; }
  .nc-uploads-grid { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
  .nc-status-grid { padding: 18px; }
  .nc-step-nav { display: none; } /* footer interno do step desaparece - usa bottombar */
  .nc-upload-area { height: 140px; }

  /* Hstepper compacto */
  .stepper.nc-hstepper {
    background: transparent;
    padding: 6px 4px;
    margin-bottom: 0;
  }
  .nc-hstepper .stepper-step {
    font-size: 10px;
  }
  .nc-hstepper .stepper-dot {
    width: 22px; height: 22px;
    font-size: 11px;
    font-weight: 700;
  }
}

@media (min-width: 1000px) {
  /* Desktop: UMA etapa por vez (igual ao mobile). O usuário só vê a próxima
     etapa depois de preencher/validar a atual e clicar em "Próximo". */
  .nc-step:not(.step-ativo) { display: none; }
  .nc-step.step-ativo { display: block; }

  /* A navegação acontece pela bottombar (Voltar / dots / Próximo). O footer
     interno de cada etapa some para não duplicar os botões. */
  .nc-step-nav { display: none; }
  .nc-hstepper { display: flex; }

  /* MENU EM HAMBÚRGUER (igual ao mobile): a topbar com o botão de menu
     fica visível e abre o drawer com Início/Cadastrar/Meus Cadastros/
     Pagamentos/Cofre. A sidebar fixa some. */
  .nc-topbar { display: flex !important; }
  .nc-sidebar { display: none !important; }
  .nc-topbar .nc-topbar-title { display: none; }
  .nc-topbar .nc-topbar-brand-d { display: flex; }

  /* BLINDAGEM DA ROLAGEM (desktop) — coluna fixa: topbar (topo) +
     conteúdo rolável (.nc-shell, único container que rola) + bottombar
     (rodapé fixo no fluxo). Funciona para qualquer altura de formulário. */
  #telaUsuario.nc-app { height: 100dvh; overflow: hidden; }
  .nc-topbar { position: static; }
  .nc-shell {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nc-main {
    max-width: 1080px;
    margin: 0 auto;
    min-width: 0;
    padding: 28px 32px 32px;
  }

  /* Barra de navegação do cadastro fica visível e ancorada no rodapé da app
     (faz parte do fluxo flex, não sobrepõe o conteúdo). O JS controla quando
     ela aparece — só durante o fluxo do formulário. */
  .nc-bottombar {
    display: flex;
    position: static;
    flex: 0 0 auto;
  }
}

@media (max-width: 500px) {
  .nc-step-head { padding: 16px; gap: 12px; }
  .nc-step-ico { width: 40px; height: 40px; }
  .nc-step-ico svg { width: 18px; height: 18px; }
  .nc-step-title { font-size: 16px; }
  .nc-step-desc { font-size: 12.5px; }
  .nc-step-eyebrow { font-size: 10px; }
  .nc-fields { padding: 14px; }
  .nc-uploads-grid { padding: 14px; }
  .nc-status-grid { padding: 14px; }
  .nc-bottombar-btn { padding: 0 14px; font-size: 13px; }
  .nc-bottombar-btn span { display: inline; }
  .nc-bottombar-dots { display: none; } /* deixa mais espaco em telas pequenas */
}


.nc-area-senha-dois.aberta, .area-senha-dois.nc-area-senha-dois.aberta { display: block; }


/* =============================================================
   Adicoes NC v2: banco fixo, status fixo, tela sucesso 2 fases
   ============================================================= */

/* --- Banco fixo (Mercado Pago) --- */
.nc-bank-fixed {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 14px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.nc-bank-fixed::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(59,130,246,.15), transparent 70%);
  pointer-events: none;
}
.nc-bank-fixed-logo {
  flex: none;
  width: 50px;
  background: linear-gradient(135deg, #009ee3 0%, #00b4ed 100%);
  color: #fff;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.02em;
  box-shadow: 0 6px 14px -4px rgba(0,158,227,.5);
}
.nc-bank-fixed-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.nc-bank-fixed-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}
.nc-bank-fixed-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #1e40af;
  width: 56px;
  flex: none;
}
.nc-bank-fixed-val {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nc-bank-fixed-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #1e40af;
  background: rgba(255,255,255,.7);
  padding: 3px 8px;
  border-radius: 999px;
}
.nc-bank-fixed-lock svg { opacity: .7; }

@media (max-width: 500px) {
  .nc-bank-fixed { padding: 12px; }
  .nc-bank-fixed-logo { width: 44px; font-size: 16px; }
  .nc-bank-fixed-val { font-size: 13px; }
  .nc-bank-fixed-lock { display: none; } /* economiza espaco */
}

/* --- Status fixo (usuario comum: sempre Em Credenciamento) --- */
.nc-status-fixed {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: linear-gradient(135deg, var(--c-warn-bg) 0%, #fef3c7 100%);
  border: 1px solid #fcd34d;
  border-radius: 14px;
  position: relative;
}
.nc-status-fixed-ico {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: #f59e0b;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 14px -4px rgba(245,158,11,.5);
}
.nc-status-fixed-body { flex: 1; min-width: 0; }
.nc-status-fixed-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #92400e;
  margin-bottom: 4px;
}
.nc-status-fixed-title {
  font-size: 17px;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 6px;
}
.nc-status-fixed-desc {
  margin: 0;
  font-size: 13px;
  color: #78350f;
  opacity: .85;
  line-height: 1.45;
}
.nc-status-fixed-check {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  display: grid;
  place-items: center;
}
.nc-status-radio-hidden { display: none; }

/* --- Tela de sucesso: card de mensagem (fase 2) --- */
.nc-sucesso-msg {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
  animation: ncSucessoFadeIn .35s ease;
  overflow-y: auto;
}
.nc-sucesso-msg.is-visible { display: flex; }

@keyframes ncSucessoFadeIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}

.nc-sucesso-card {
  max-width: 460px;
  width: 100%;
  background: var(--c-surface);
  border-radius: 24px;
  padding: 36px 32px 28px;
  text-align: center;
  box-shadow: 0 24px 60px -20px rgba(16,185,129,.35);
  border: 1px solid #d1fae5;
}

.nc-sucesso-check {
  width: 80px;
  height: 80px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
}
.nc-sucesso-check-circle {
  stroke: #10b981;
  stroke-width: 3;
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  animation: ncCheckCircle .55s cubic-bezier(.65,0,.45,1) .1s forwards;
}
.nc-sucesso-check-tick {
  stroke: #10b981;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: ncCheckTick .35s cubic-bezier(.65,0,.45,1) .55s forwards;
}
@keyframes ncCheckCircle { to { stroke-dashoffset: 0; } }
@keyframes ncCheckTick   { to { stroke-dashoffset: 0; } }

.nc-sucesso-titulo {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: #064e3b;
  letter-spacing: -.01em;
}
.nc-sucesso-proto {
  display: inline-block;
  margin: 0 auto 14px;
  padding: 5px 14px;
  border-radius: 999px;
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  color: #047857;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
}
.nc-sucesso-proto strong { font-weight: 800; letter-spacing: .06em; }
.nc-sucesso-sub {
  margin: 0 0 20px;
  font-size: 14px;
  color: #065f46;
  line-height: 1.55;
  opacity: .85;
}

/* Próximos passos (mini-timeline) */
.nc-sucesso-passos {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  position: relative;
}
.nc-sucesso-passos::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16%;
  right: 16%;
  height: 2px;
  background: #d1fae5;
  z-index: 0;
}
.nc-passo {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.nc-passo-ico {
  width: 33px; height: 33px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-surface);
  border: 2px solid #d1fae5;
  color: #9ca3af;
  transition: all .2s ease;
}
.nc-passo-txt {
  font-size: 11.5px;
  font-weight: 600;
  color: #9ca3af;
  line-height: 1.25;
  text-align: center;
  max-width: 92px;
}
.nc-passo.is-done .nc-passo-ico {
  background: #10b981; border-color: #10b981; color: #fff;
}
.nc-passo.is-done .nc-passo-txt { color: #047857; }
.nc-passo.is-now .nc-passo-ico {
  background: var(--c-surface); border-color: #10b981; color: #10b981;
  box-shadow: 0 0 0 4px rgba(16,185,129,.15);
  animation: ncPassoPulse 1.8s ease-in-out infinite;
}
.nc-passo.is-now .nc-passo-txt { color: #065f46; }
@keyframes ncPassoPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(16,185,129,.15); }
  50%      { box-shadow: 0 0 0 7px rgba(16,185,129,.07); }
}
.nc-sucesso-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.nc-sucesso-actions .nc-btn { min-width: 0; flex: 1; max-width: 230px; }

/* --- Bloco "Pagamentos gerados" no card de sucesso (espelha o bot) --- */
.nc-sucesso-pgtos {
  text-align: left;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 20px;
}
.nc-sucesso-pgtos-titulo {
  font-size: 14px;
  font-weight: 700;
  color: #065f46;
  margin-bottom: 10px;
}
.nc-sucesso-pgtos-lista {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.nc-sucesso-pgtos-lista li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: #065f46;
}
.nc-sucesso-pgtos-lista li strong { white-space: nowrap; }
.nc-sucesso-pgtos-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed #6ee7b7;
  padding-top: 9px;
  font-size: 14.5px;
  font-weight: 700;
  color: #047857;
}
.nc-sucesso-pgtos-obs {
  margin: 9px 0 0;
  font-size: 12px;
  color: #059669;
  opacity: .85;
}

@media (max-width: 500px) {
  .nc-sucesso-card { padding: 28px 22px 22px; border-radius: 20px; }
  .nc-sucesso-titulo { font-size: 19px; }
  .nc-sucesso-actions { flex-direction: column-reverse; align-items: stretch; }
  .nc-sucesso-actions .nc-btn { max-width: 100%; width: 100%; }
}

/* --- Esconde a fase imagem quando ja estamos na mensagem --- */
.tela-sucesso-overlay.is-mensagem .tela-sucesso-conteudo { display: none; }
.tela-sucesso-overlay.is-mensagem .nc-sucesso-msg { display: flex; }

/* ============================================================
   CARD "Cadastro só pelo WhatsApp"
   Substitui o formulário do site na tela do usuário comum.
   ============================================================ */
.nc-only-bot {
  background: var(--c-surface);
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 40px 36px 32px;
  text-align: center;
  box-shadow: 0 12px 40px -12px rgba(15, 23, 42, .12);
  max-width: 720px;
  margin: 24px auto 80px;
  position: relative;
  overflow: hidden;
}
.nc-only-bot::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, #25D366 0%, #128C7E 100%);
}
.nc-only-bot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #ecfdf5;
  margin: 8px auto 20px;
  box-shadow: 0 8px 24px -8px rgba(37, 211, 102, .35);
}
.nc-only-bot-title {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.nc-only-bot-text {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: #475569;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.nc-only-bot-text strong { color: #0f172a; font-weight: 700; }

.nc-btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #25D366;
  color: #ffffff;
  padding: 16px 32px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 10px 24px -6px rgba(37, 211, 102, .45);
  margin: 8px 0 20px;
  border: 0;
  cursor: pointer;
}
.nc-btn-whatsapp:hover {
  background: #128C7E;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -6px rgba(18, 140, 126, .55);
}
.nc-btn-whatsapp:active { transform: translateY(0); }
.nc-btn-whatsapp svg { flex-shrink: 0; }

.nc-only-bot-num {
  font-size: 14px;
  color: #475569;
  margin-bottom: 28px;
}
.nc-only-bot-num strong {
  color: #0f172a;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .02em;
}

.nc-only-bot-passos {
  list-style: none;
  padding: 0;
  margin: 0 auto 24px;
  text-align: left;
  max-width: 480px;
  display: grid;
  gap: 10px;
}
.nc-only-bot-passos li {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  color: #334155;
  line-height: 1.5;
}
.nc-only-bot-passos li strong { color: #0f172a; font-weight: 700; }

.nc-only-bot-foot {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}
.nc-only-bot-foot a {
  color: #0ea5e9;
  text-decoration: none;
  font-weight: 600;
}
.nc-only-bot-foot a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .nc-only-bot {
    padding: 32px 22px 26px;
    border-radius: 20px;
    margin: 12px 12px 60px;
  }
  .nc-only-bot-title { font-size: 22px; }
  .nc-only-bot-text { font-size: 14px; }
  .nc-only-bot-icon { width: 80px; height: 80px; }
  .nc-only-bot-icon svg { width: 52px; height: 52px; }
  .nc-btn-whatsapp { width: 100%; padding: 14px 22px; }
}

/* =============================================================
   PATCH — TEMA DARK GRAFITE + ÂMBAR (ajustes finais de contraste)
   ============================================================= */
:root { --c-bg-1: var(--c-surface-2); }
html { color-scheme: dark; }

/* Scrollbars no tema escuro */
* { scrollbar-color: var(--c-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--c-text-4); border-radius: 999px; }

/* Texto escuro sobre o âmbar (alto contraste) */
.btn-primary { color: var(--c-on-primary); }
.mc-filtro-btn.ativo { color: var(--c-on-primary); }
.mc-filtro-btn.ativo-pendente { color: #fff; }

/* Segmented control (Todos/Meus/Outros) no escuro */
.mc-dono-seg { background: var(--c-surface-2); border: 1px solid var(--c-border); }
.mc-dono-seg .mc-dono-btn.ativo {
  background: var(--c-surface-3);
  color: var(--c-primary-2);
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* Inputs/menus nativos com aparência escura */
input, select, textarea { color-scheme: dark; }
select.fl-input option { background: var(--c-surface); color: var(--c-text); }

/* =============================================================
   FILTROS DE CADASTROS (Admin) — toolbar responsiva
   Desktop: busca + chips que quebram em grade, tudo visível.
   Mobile : busca em cima + chips em rolagem horizontal (sticky).
   ============================================================= */
.cads-toolbar {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.cads-toolbar .cads-busca-wrap { margin-bottom: 12px; }

/* Linha de chips reutilizável (admin) */
.filtro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filtro-chips .mc-filtro-btn { flex: none; }

/* Estado ativo dos chips com cor por categoria (mantém semântica) */
.mc-filtro-btn.ativo { background: var(--c-primary); border-color: var(--c-primary); }

/* ---- Mobile: chips em carrossel horizontal + toolbar sticky ---- */
@media (max-width: 640px) {
  #tabCadastros .cads-toolbar {
    position: sticky;
    top: var(--topbar-h, 60px);
    z-index: 5;
    padding: 12px;
    border-radius: 14px;
  }
  .cads-toolbar .filtro-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    margin: 0 -12px;
    padding: 2px 12px 4px;
  }
  .cads-toolbar .filtro-chips::-webkit-scrollbar { display: none; }
  .cads-toolbar .filtro-chips .mc-filtro-btn {
    scroll-snap-align: start;
    padding: 8px 13px;
    font-size: 12.5px;
  }
}

/* ---- Desktop: chips maiores, bem distribuídos ---- */
@media (min-width: 641px) {
  .cads-toolbar .filtro-chips .mc-filtro-btn { padding: 8px 15px; font-size: 13px; }
}

/* =============================================================
   ADMIN — Painel "Cadastros" AMPLIADO (somente desktop)
   Deixa o painel mais largo, com mais respiro e elementos maiores
   ("zoom"). Não afeta mobile nem as outras abas.
   ============================================================= */
@media (min-width: 1024px) {
  /* Container mais largo, mas só quando a aba Cadastros está ativa */
  .admin-content:has(#tabCadastros.active) { max-width: 1640px; }

  /* Card principal com mais respiro */
  #tabCadastros .card { padding: 32px 38px; }
  #tabCadastros .card-titulo {
    font-size: 20px;
    margin-bottom: 24px;
    padding-bottom: 20px;
  }
  #tabCadastros #cadsCount { font-size: .92rem !important; }

  /* Toolbar de busca + filtros maior */
  #tabCadastros .cads-toolbar {
    padding: 22px 24px;
    margin-bottom: 24px;
    border-radius: 18px;
  }
  #tabCadastros .cads-toolbar .cads-busca-wrap { margin-bottom: 18px; }
  #tabCadastros .cads-busca-wrap .fl-input {
    padding: 20px 16px 20px 50px;
    font-size: 16.5px;
  }
  #tabCadastros .cads-busca-wrap .fl-icon { left: 18px; }
  #tabCadastros .cads-busca-wrap .fl-label { left: 50px; font-size: 15px; }
  #tabCadastros .cads-busca-wrap .fl-input:focus + .fl-label,
  #tabCadastros .cads-busca-wrap .fl-input:not(:placeholder-shown) + .fl-label {
    left: 16px;
    font-size: 12.5px;
  }

  /* Chips de filtro maiores e mais espaçados */
  #tabCadastros .cads-toolbar .filtro-chips { gap: 11px; }
  #tabCadastros .cads-toolbar .filtro-chips .mc-filtro-btn {
    padding: 12px 22px;
    font-size: 14.5px;
    border-radius: 13px;
  }

  /* Cards de cadastro maiores ("zoom") */
  #tabCadastros .cads-card {
    padding: 22px 26px;
    margin-bottom: 14px;
    border-radius: 16px;
  }
  #tabCadastros .cads-card-top { gap: 18px; }
  #tabCadastros .cads-card-avatar {
    width: 52px; height: 52px;
    font-size: 17px;
  }
  #tabCadastros .cads-card-name {
    font-size: 17.5px;
    margin-bottom: 5px;
  }
  #tabCadastros .cads-card-meta { font-size: 14px; }
  #tabCadastros .cads-card-tags {
    margin-top: 16px;
    padding-top: 16px;
    gap: 9px;
  }
  #tabCadastros .cads-card-btns { gap: 9px; }
  #tabCadastros .cads-card-btns .btn-icon {
    width: 42px; height: 42px;
  }
}

/* =============================================================
   DESKTOP — TODAS AS TELAS AMPLIADAS ("zoom")
   Estende a ampliação do painel "Cadastros" para as DEMAIS abas do
   admin e para TODAS as telas do usuário comum (Recepção, Formulário
   de cadastro, Meus Cadastros e Cofre de Cartões): container mais
   largo + elementos maiores. Não afeta mobile/tablet (< 1024px).
   ============================================================= */
@media (min-width: 1024px) {
  /* ADMIN — container largo em todas as abas (antes só Cadastros) */
  .admin-content { max-width: 1640px; }

  /* "Zoom" nas demais abas (Cadastros mantém o bloco dedicado acima) */
  .admin-content .tab-pane:not(#tabCadastros) { zoom: 1.1; }

  /* USUÁRIO COMUM — telas mais largas + "zoom" uniforme.
     OBS: o formulário de cadastro (#telaUsuario .nc-main) NÃO usa zoom:
     o `zoom` num item dentro do flex/grid (.nc-app > .nc-shell) quebra o
     cálculo da altura de rolagem no desktop e o usuário não consegue rolar
     a página. Mantemos só o container mais largo nessa tela. */
  #telaUsuario       .nc-main      { max-width: 1080px; }
  #telaMeusCadastros .mc-main      { max-width: 1080px; zoom: 1.1; }
  #telaCofreCartoes  .main-content { max-width: 1000px; zoom: 1.1; }
  #telaPagamentos    .pg-main      { max-width: 1080px; zoom: 1.1; }
}

/* =============================================================
   BADGES / TAGS / BOTÕES DE STATUS — legibilidade no dark
   (fundos translúcidos + texto claro da mesma matiz)
   ============================================================= */
.badge-yellow { color: #fcd34d; }
.badge-blue   { color: #93c5fd; }
.badge-green  { color: #6ee7b7; }
.badge-red    { color: #fca5a5; }
.badge-orange { background: rgba(249,115,22,.16); color: #fdba74; border-color: rgba(249,115,22,.40); }

.tag-tudo-certo { background: rgba(16,185,129,.16); color: #6ee7b7; border-color: rgba(16,185,129,.42); }
.tag-obs        { background: rgba(245,158,11,.16); color: #fcd34d; border-color: rgba(245,158,11,.42); }
.tag-ligacao    { background: rgba(59,130,246,.16); color: #93c5fd; border-color: rgba(59,130,246,.42); }

.vc-action-btn.is-active-obs     { background: rgba(245,158,11,.16); color: #fcd34d; border-color: rgba(245,158,11,.42); }
.vc-action-btn.is-active-ligacao { background: rgba(59,130,246,.16); color: #93c5fd; border-color: rgba(59,130,246,.42); }
.vc-action-btn.btn-lig           { border-color: var(--c-primary-ring); }
.vc-action-btn.btn-lig:hover     { background: var(--c-primary-soft); }

/* Botão Bloquear/Desbloquear CPF (admin) */
.vc-action-btn.btn-bloq          { border-color: rgba(239,68,68,.45); color: #fca5a5; }
.vc-action-btn.btn-bloq:hover    { background: rgba(239,68,68,.12); }
.vc-action-btn.btn-bloq.is-bloqueado {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-color: #ef4444; color: #fff;
}
.vc-action-btn.btn-bloq.is-bloqueado svg { color: #fff; }

/* Hovers/realces que eram claros viram tons translúcidos coerentes */
.em-iconbtn.is-danger:hover,
.btn-cofre-excluir:hover { background: var(--c-danger-bg); }
.em-iconbtn.is-view:hover { background: var(--c-primary-soft); }

/* =============================================================
   CREDENCIAMENTO (Pluxee) — seção no modal + formulário
   ============================================================= */
.vc-cred-edit {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--c-primary-ring);
  background: var(--c-primary-soft); color: var(--c-primary-3);
  cursor: pointer; text-transform: none;
}
.vc-cred-edit svg { width: 13px; height: 13px; }
.vc-cred-edit:hover { background: rgba(245, 165, 36, .20); }

.vc-cred-print {
  margin-top: 12px; border: 1px solid var(--c-border); border-radius: 12px;
  overflow: hidden; cursor: zoom-in; background: var(--c-surface-2);
}
.vc-cred-print img { width: 100%; max-height: 320px; object-fit: contain; display: block; background: #0a0d11; }
.vc-cred-print-cap { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 12px; color: var(--c-text-3); }
.vc-cred-print-cap svg { width: 14px; height: 14px; color: var(--c-primary); }

/* Overlay do formulário de credenciamento */
.cred-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0, 0, 0, .68);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.cred-modal {
  width: 100%; max-width: 720px; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: 20px;
  box-shadow: 0 30px 80px -24px rgba(0,0,0,.7); display: flex; flex-direction: column; max-height: 92vh;
  animation: cred-pop .22s cubic-bezier(.2,.8,.3,1.1);
}
@keyframes cred-pop { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.cred-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 22px; border-bottom: 1px solid var(--c-border);
  background: linear-gradient(135deg, var(--c-primary-soft, rgba(245,158,11,.10)), transparent 70%);
  border-radius: 20px 20px 0 0;
}
.cred-head-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cred-head-icon {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 13px;
  display: grid; place-items: center;
  color: #1a1205; background: var(--c-primary, #f59e0b);
  box-shadow: 0 6px 16px -6px var(--c-primary, #f59e0b);
}
.cred-head-txt { min-width: 0; }
.cred-head-txt h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--c-text); letter-spacing: .01em; }
.cred-head-txt p { margin: 3px 0 0; font-size: 12.5px; color: var(--c-text-3); }
.cred-close { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text-3); cursor: pointer; display: grid; place-items: center; transition: all .15s ease; }
.cred-close:hover { color: var(--c-text); border-color: var(--c-border-strong); background: var(--c-surface); }
.cred-modal-body { padding: 20px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.cred-section {
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-radius: 14px; padding: 16px 18px 18px;
}
.cred-section-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-primary-3, #fbbf24); margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px dashed var(--c-border);
}
.cred-section-head svg { color: var(--c-primary, #f59e0b); }
.cred-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cred-grid .cred-col-2 { grid-column: 1 / -1; }
.cred-req { color: var(--c-danger); margin-left: 2px; }
.cred-erro { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); color: #fca5a5; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.cred-field { display: flex; flex-direction: column; gap: 6px; }
.cred-field > span { font-size: 11.5px; font-weight: 600; color: var(--c-text-2); text-transform: uppercase; letter-spacing: .4px; }
.cred-field input, .cred-field textarea {
  width: 100%; background: var(--c-surface); border: 1.5px solid var(--c-border);
  border-radius: 10px; padding: 12px 13px; color: var(--c-text); font-size: 15px; outline: none;
  font-family: inherit; resize: vertical; transition: border-color .15s ease, box-shadow .15s ease;
}
.cred-field input::placeholder { color: var(--c-text-3); }
.cred-field input:focus, .cred-field textarea:focus { border-color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-ring); }
/* Upload customizado (dropzone) */
.cred-file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cred-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-align: center; cursor: pointer;
  padding: 22px 16px; border: 2px dashed var(--c-border-strong, var(--c-border));
  border-radius: 12px; background: var(--c-surface);
  color: var(--c-text-3); transition: all .15s ease;
}
.cred-dropzone:hover { border-color: var(--c-primary); color: var(--c-text-2); background: var(--c-primary-soft, rgba(245,158,11,.06)); }
.cred-dropzone.is-selected { border-style: solid; border-color: var(--c-primary); background: var(--c-primary-soft, rgba(245,158,11,.08)); }
.cred-dropzone.is-selected .cred-dropzone-title { color: var(--c-primary-3, #fbbf24); }
.cred-dropzone svg { color: var(--c-primary, #f59e0b); margin-bottom: 4px; }
.cred-dropzone-title { font-size: 14px; font-weight: 700; color: var(--c-text); }
.cred-dropzone-hint { font-size: 12px; color: var(--c-text-3); }
.cred-print-preview:not(:empty) { margin-top: 12px; }
.cred-print-preview img { max-width: 100%; max-height: 260px; border-radius: 12px; border: 1px solid var(--c-border); display: block; margin: 0 auto; }
.cred-print-hint { font-size: 12.5px; color: var(--c-text-3); }
.cred-modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 22px; border-top: 1px solid var(--c-border); }
@media (max-width: 560px) {
  .cred-grid { grid-template-columns: 1fr; }
  .cred-modal-head { padding: 16px; }
  .cred-modal-body { padding: 16px; }
  .cred-modal-foot { padding: 14px 16px; }
}

/* ===== Escolha de cópia para Ligação (padrão x Pluxee) ===== */
.lig-escolha-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.66);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.lig-escolha-card {
  width: 100%; max-width: 440px; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: 18px;
  padding: 22px; box-shadow: 0 28px 70px -22px rgba(0,0,0,.7);
  display: flex; flex-direction: column; gap: 12px;
  animation: cred-pop .2s cubic-bezier(.2,.8,.3,1.1);
}
.lig-escolha-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 4px; }
.lig-escolha-icon {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px;
  display: grid; place-items: center; color: #1a1205;
  background: var(--c-primary, #f59e0b);
  box-shadow: 0 6px 16px -6px var(--c-primary, #f59e0b);
}
.lig-escolha-htxt h3 { margin: 0; font-size: 16.5px; font-weight: 800; color: var(--c-text); }
.lig-escolha-htxt p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--c-text-3); }
.lig-opcao {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 14px; border: 1.5px solid var(--c-border); border-radius: 13px;
  background: var(--c-surface-2); color: var(--c-text); cursor: pointer;
  transition: all .15s ease;
}
.lig-opcao:hover { border-color: var(--c-primary); background: var(--c-primary-soft, rgba(245,158,11,.07)); transform: translateY(-1px); }
.lig-opcao-ic {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px;
  display: grid; place-items: center; color: var(--c-primary, #f59e0b);
  background: var(--c-surface); border: 1px solid var(--c-border);
}
.lig-opcao-pluxee .lig-opcao-ic { color: #1a1205; background: var(--c-primary, #f59e0b); border-color: transparent; }
.lig-opcao-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.lig-opcao-txt strong { font-size: 14.5px; font-weight: 700; }
.lig-opcao-txt span { font-size: 12px; color: var(--c-text-3); }
.lig-opcao-arrow { color: var(--c-text-3); flex: 0 0 auto; }
.lig-opcao:hover .lig-opcao-arrow { color: var(--c-primary, #f59e0b); }
.lig-escolha-cancel {
  margin-top: 2px; padding: 11px; border: none; border-radius: 11px;
  background: transparent; color: var(--c-text-3); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.lig-escolha-cancel:hover { color: var(--c-text); background: var(--c-surface-2); }

/* ===== Modal LOGADA — segmented Sim/Não + sub-bloco e-mail antigo ===== */
.log-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.log-seg-btn {
  padding: 13px; border: 1.5px solid var(--c-border); border-radius: 11px;
  background: var(--c-surface); color: var(--c-text-2);
  font-size: 14.5px; font-weight: 700; cursor: pointer; transition: all .15s ease;
  text-transform: uppercase; letter-spacing: .03em;
}
.log-seg-btn:hover { border-color: var(--c-border-strong); }
.log-seg-btn.is-active {
  background: var(--c-primary, #f59e0b); border-color: var(--c-primary, #f59e0b);
  color: #1a1205; box-shadow: 0 4px 14px -5px var(--c-primary, #f59e0b);
}
.log-antigo-wrap {
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--c-border);
  animation: cred-pop .2s ease;
}
.cred-section-head.log-subhead { border: none; padding: 0; margin-bottom: 10px; }

/* ===== Pagamentos no modal do cadastro ===== */
.vc-pg-list { display: flex; flex-direction: column; gap: 8px; }
.vc-pg-item {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-border-strong);
  border-radius: 10px; padding: 10px 12px;
}
.vc-pg-item.is-pago { border-left-color: var(--c-success); }
.vc-pg-item.is-pend { border-left-color: var(--c-warn); }
.vc-pg-item.is-off  { opacity: .7; }
.vc-pg-tag { font-weight: 700; font-size: 13px; color: var(--c-text); }
.vc-pg-val { font-weight: 700; font-size: 13px; color: var(--c-primary-3); margin-left: auto; }
.vc-pg-st  { font-size: 12px; color: var(--c-text-2); flex-basis: 100%; }

/* =============================================================
   v3 — FORMATAÇÃO DO MODAL "VER CADASTRO" + PALETA DE TAGS
   (este bloco fica no fim do arquivo de propósito: vence a cascata)
   ============================================================= */

/* 1) Tudo que o usuário preencheu aparece em MAIÚSCULAS no modal.
      A cópia (botão "copiar") continua usando o valor original. */
.vc-value        { text-transform: uppercase; }
.vc-headline-name{ text-transform: uppercase; }
/* exceções: campos que NÃO devem virar caixa-alta visualmente */
.vc-value.is-keepcase { text-transform: none; }

/* 2) Chip do AUTOR (quem cadastrou) — avatar + nome, com destaque */
.vc-autor-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 13px 4px 4px;
  border-radius: 999px;
  background: rgba(245, 165, 36, .14);
  border: 1px solid rgba(245, 165, 36, .42);
  box-shadow: 0 2px 8px -4px rgba(245, 165, 36, .5);
}
.vc-autor-ava {
  width: 23px; height: 23px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  color: #1a1205;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
  text-transform: uppercase;
  box-shadow: 0 1px 4px -1px rgba(245, 165, 36, .6);
}
.vc-autor-txt { font-size: 12.5px; color: var(--c-text-2); }
.vc-autor-txt strong { color: var(--c-primary-3); font-weight: 800; }

/* Linha "Editado em ..." — banner discreto, porém visível */
.vc-editado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  padding: 6px 12px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.3;
  color: #fcd34d;
  background: rgba(245, 158, 11, .15);
  border: 1px solid rgba(245, 158, 11, .38);
}
.vc-editado svg { color: var(--c-primary-3); flex: none; }
.vc-editado strong { color: #fff; font-weight: 700; }

/* 3) Tag de autoria nos cards (Meu / de Outro) — mais legível e única */
.mc-tag-meu   { background: rgba(16,185,129,.18);  color: #6ee7b7; border: 1px solid rgba(16,185,129,.45); }
.mc-tag-outro {
  background: linear-gradient(135deg, rgba(168,85,247,.30), rgba(139,92,246,.22));
  color: #e9d5ff;
  border: 1px solid rgba(168,85,247,.6);
  box-shadow: 0 2px 8px -3px rgba(168,85,247,.6);
}
.mc-tag-outro svg { color: #c4b5fd; }

/* =============================================================
   PALETA — cada marcador com sua cor exclusiva e vibrante
     Tudo Certo  → Esmeralda   (#10b981)
     OBS         → Âmbar       (#f59e0b)
     EM LIGAÇÃO  → Azul-céu    (#3b82f6)
     LOGADA      → Violeta     (#a855f7)
   ============================================================= */

/* 4) Badges do header do modal (gradiente + leve brilho colorido) */
.vc-badge.is-green  { background: linear-gradient(135deg,#10b981,#059669); border-color: rgba(16,185,129,.65);  color:#fff;     box-shadow:0 3px 10px -3px rgba(16,185,129,.6); }
.vc-badge.is-yellow { background: linear-gradient(135deg,#f59e0b,#d97706); border-color: rgba(245,158,11,.65);  color:#2a1a00;  box-shadow:0 3px 10px -3px rgba(245,158,11,.6); }
.vc-badge.is-blue   { background: linear-gradient(135deg,#3b82f6,#2563eb); border-color: rgba(59,130,246,.65);  color:#fff;     box-shadow:0 3px 10px -3px rgba(59,130,246,.6); }
.vc-badge.is-orange { background: linear-gradient(135deg,#fb923c,#ea580c); border-color: rgba(234,88,12,.65);   color:#fff;     box-shadow:0 3px 10px -3px rgba(234,88,12,.6); }
.vc-badge.is-red    { background: linear-gradient(135deg,#f87171,#dc2626); border-color: rgba(220,38,38,.65);   color:#fff;     box-shadow:0 3px 10px -3px rgba(220,38,38,.6); }
.vc-badge.is-logada { background: linear-gradient(135deg,#c084fc,#7c3aed); border-color: rgba(168,85,247,.65);  color:#fff;     box-shadow:0 3px 10px -3px rgba(168,85,247,.6); }
.vc-badge.is-aut    { background: linear-gradient(135deg,#2dd4bf,#0d9488); border-color: rgba(13,148,136,.65);   color:#04201d;  box-shadow:0 3px 10px -3px rgba(13,148,136,.6); }

/* 5) Tags nos cards de lista (fundo translúcido + texto da mesma matiz) */
.tag-tudo-certo,
.tag-obs,
.tag-ligacao,
.tag-logada,
.tag-aut,
.tag-ultimo-visto {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid transparent;
}
.tag-tudo-certo svg,
.tag-ultimo-visto svg { width: 12px; height: 12px; }
.tag-tudo-certo { background: rgba(16,185,129,.16); color:#6ee7b7; border-color: rgba(16,185,129,.42); }
.tag-obs        { background: rgba(245,158,11,.16); color:#fcd34d; border-color: rgba(245,158,11,.42); }
.tag-ligacao    { background: rgba(59,130,246,.16); color:#93c5fd; border-color: rgba(59,130,246,.42); }
.tag-logada     { background: rgba(168,85,247,.16); color:#d8b4fe; border-color: rgba(168,85,247,.42); }
.tag-aut        { background: rgba(13,148,136,.18); color:#5eead4; border-color: rgba(13,148,136,.45); }
/* "Último visto" — ciano, cor exclusiva; card ganha um realce sutil */
.tag-ultimo-visto { background: rgba(34,211,238,.16); color:#67e8f9; border-color: rgba(34,211,238,.45); }
.cads-card.is-ultimo-visto,
.mc-card.is-ultimo-visto {
  border-color: rgba(34,211,238,.55);
  box-shadow: 0 0 0 1px rgba(34,211,238,.25), 0 4px 16px -6px rgba(34,211,238,.35);
}

/* 6) Botões "Marcadores" no actionbar (estado ativo) */
.vc-action-btn.is-active-tudo    { background: rgba(16,185,129,.16); color:#6ee7b7; border-color: rgba(16,185,129,.5); }
.vc-action-btn.is-active-obs     { background: rgba(245,158,11,.16); color:#fcd34d; border-color: rgba(245,158,11,.5); }
.vc-action-btn.is-active-ligacao { background: rgba(59,130,246,.16); color:#93c5fd; border-color: rgba(59,130,246,.5); }
.vc-action-btn.is-active-logada  { background: rgba(168,85,247,.16); color:#d8b4fe; border-color: rgba(168,85,247,.5); }
.vc-action-btn.is-active-aut     { background: rgba(13,148,136,.18); color:#5eead4; border-color: rgba(13,148,136,.5); }

/* 7) Chips de filtro ativos — gradiente vibrante + brilho colorido.
      Cada categoria com sua identidade. */
.mc-filtro-btn.ativo         { background: linear-gradient(135deg,var(--c-primary),var(--c-primary-2)); border-color: var(--c-primary); color: var(--c-on-primary); box-shadow:0 3px 12px -3px rgba(245,165,36,.55); }
.mc-filtro-btn.ativo-orange  { background: linear-gradient(135deg,#fb923c,#ea580c); border-color:#ea580c; color:#fff;    box-shadow:0 3px 12px -3px rgba(234,88,12,.6); }
.mc-filtro-btn.ativo-yellow  { background: linear-gradient(135deg,#fbbf24,#d97706); border-color:#d97706; color:#2a1a00; box-shadow:0 3px 12px -3px rgba(245,158,11,.6); }
.mc-filtro-btn.ativo-blue    { background: linear-gradient(135deg,#3b82f6,#2563eb); border-color:#2563eb; color:#fff;    box-shadow:0 3px 12px -3px rgba(59,130,246,.6); }
.mc-filtro-btn.ativo-green   { background: linear-gradient(135deg,#10b981,#059669); border-color:#059669; color:#fff;    box-shadow:0 3px 12px -3px rgba(16,185,129,.6); }
.mc-filtro-btn.ativo-red     { background: linear-gradient(135deg,#f87171,#dc2626); border-color:#dc2626; color:#fff;    box-shadow:0 3px 12px -3px rgba(220,38,38,.6); }
.mc-filtro-btn.ativo-logada  { background: linear-gradient(135deg,#c084fc,#7c3aed); border-color:#7c3aed; color:#fff;    box-shadow:0 3px 12px -3px rgba(168,85,247,.6); }
.mc-filtro-btn.ativo-pendente{ background: linear-gradient(135deg,#818cf8,#4f46e5); border-color:#4f46e5; color:#fff;    box-shadow:0 3px 12px -3px rgba(99,102,241,.6); }

/* 8) Pills de STATUS no actionbar (estado ativo) — cada um sua cor */
.vc-status-pill[data-color="orange"].is-active { background: linear-gradient(135deg,#fb923c,#ea580c); border-color:#ea580c; color:#fff; box-shadow:0 3px 10px -3px rgba(234,88,12,.6); }
.vc-status-pill[data-color="yellow"].is-active { background: linear-gradient(135deg,#fbbf24,#d97706); border-color:#d97706; color:#2a1a00; box-shadow:0 3px 10px -3px rgba(245,158,11,.6); }
.vc-status-pill[data-color="blue"].is-active   { background: linear-gradient(135deg,#3b82f6,#2563eb); border-color:#2563eb; color:#fff; box-shadow:0 3px 10px -3px rgba(59,130,246,.6); }
.vc-status-pill[data-color="green"].is-active  { background: linear-gradient(135deg,#10b981,#059669); border-color:#059669; color:#fff; box-shadow:0 3px 10px -3px rgba(16,185,129,.6); }
.vc-status-pill[data-color="red"].is-active    { background: linear-gradient(135deg,#f87171,#dc2626); border-color:#dc2626; color:#fff; box-shadow:0 3px 10px -3px rgba(220,38,38,.6); }

/* ===== Acesso Rápido ===== */
.ar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 16px;
}
.ar-field { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.ar-field-label { font-size: 12px; font-weight: 600; color: var(--c-text-3); padding-left: 2px; }
.ar-field .fl-input { min-width: 200px; }
.ar-selall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-2);
  cursor: pointer;
  user-select: none;
  padding: 10px 12px;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface-2);
}
.ar-selall input { width: 17px; height: 17px; accent-color: var(--c-primary); cursor: pointer; }
.ar-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.ar-copy-btn { white-space: nowrap; }

#arLista { display: flex; flex-direction: column; gap: 8px; }
.ar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-surface-2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ar-row:hover { border-color: var(--c-border-strong); }
.ar-row.is-sel { border-color: var(--c-primary-2); background: var(--c-primary-soft); }
.ar-row .ar-check { width: 18px; height: 18px; accent-color: var(--c-primary); cursor: pointer; flex: none; }
.ar-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ar-row-nome { font-size: 14px; font-weight: 600; color: var(--c-text); }
.ar-row-cnpj { font-size: 12.5px; color: var(--c-text-3); font-variant-numeric: tabular-nums; }
.ar-row-cnpj i { opacity: .7; }
.ar-row-tags { display: inline-flex; align-items: center; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.ar-row-autor {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 3px;
  border-radius: 999px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  font-size: 11.5px; color: var(--c-text-2);
  max-width: 220px;
}
.ar-row-autor-ava {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
  color: var(--c-on-primary);
  font-size: 9.5px; font-weight: 800; flex: none;
}
.ar-row-autor-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-row-autor-txt strong { color: var(--c-text); font-weight: 700; }
@media (max-width: 640px) {
  .ar-row-autor { max-width: 160px; }
}

@media (max-width: 640px) {
  .ar-toolbar { flex-direction: column; align-items: stretch; }
  .ar-field, .ar-field .fl-input { min-width: 0; width: 100%; }
  .ar-actions { margin-left: 0; }
  .ar-actions .ar-copy-btn { flex: 1; }
}

/* ===== Tela de Recepção (usuário comum) ===== */
#ncCadastroWrap { display: none; }   /* mostrado só ao clicar em "Cadastrar" */

.nc-recepcao {
  display: block;
  width: 100%;
  padding: 8px 0 32px;
}
.nc-rec-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  padding: 30px 22px 26px;
  text-align: center;
  box-shadow: 0 12px 40px -16px rgba(0,0,0,.5);
}
.nc-rec-avatar {
  width: 68px; height: 68px;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 26px; font-weight: 800; color: #1a1d23;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 60%, var(--c-primary-3) 100%);
  box-shadow: 0 8px 22px -8px var(--c-primary-ring);
  text-transform: uppercase;
}
.nc-rec-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--c-text);
  line-height: 1.2;
}
.nc-rec-title #ncRecNome { color: var(--c-primary-2); }
.nc-rec-sub {
  font-size: .95rem;
  color: var(--c-text-3);
  margin: 0 0 22px;
}
.nc-rec-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.nc-rec-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 16px;
  border: 1.5px solid var(--c-border);
  border-radius: 16px;
  background: var(--c-surface-2);
  color: var(--c-text);
  cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.nc-rec-btn:hover { border-color: var(--c-border-strong); background: var(--c-surface-3); }
.nc-rec-btn:active { transform: scale(.985); }
.nc-rec-btn-ico {
  flex: none;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: var(--c-surface-3);
  color: var(--c-text-2);
}
.nc-rec-btn-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nc-rec-btn-txt strong { font-size: 1.02rem; font-weight: 700; }
.nc-rec-btn-txt small { font-size: .82rem; color: var(--c-text-3); }
.nc-rec-btn-arrow { flex: none; color: var(--c-text-3); }

.nc-rec-btn.is-primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 60%, var(--c-primary-3) 100%);
  color: #1a1d23;
  box-shadow: 0 10px 26px -12px var(--c-primary-ring);
}
.nc-rec-btn.is-primary .nc-rec-btn-ico { background: rgba(0,0,0,.16); color: #1a1d23; }
.nc-rec-btn.is-primary .nc-rec-btn-txt small,
.nc-rec-btn.is-primary .nc-rec-btn-arrow { color: rgba(26,29,35,.72); }
.nc-rec-btn.is-primary:hover { filter: brightness(1.03); background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 60%, var(--c-primary-3) 100%); }

.nc-rec-hint {
  display: flex; align-items: center; justify-content: center;
  gap: 7px;
  margin: 22px 0 0;
  font-size: .8rem;
  color: var(--c-text-3);
}
.nc-rec-hint svg { opacity: .8; }

.nc-sidebar-action-primary {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
  color: #1a1d23;
  font-weight: 700;
  border-color: transparent;
}

@media (max-width: 640px) {
  .nc-rec-card { padding: 26px 16px 22px; border-radius: 18px; }
  .nc-rec-title { font-size: 1.35rem; }
}

/* ===== Aviso no modal de solicitar edição ===== */
.med-aviso {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(245,165,36,.12);
  border: 1px solid var(--c-primary-ring);
  color: var(--c-text-2);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 14px;
}
.med-aviso svg { flex: none; margin-top: 2px; color: var(--c-primary-2); }
.med-aviso strong { color: var(--c-text); }

/* ===== Cabeçalho de card com ação + toggle de bloqueio ===== */
.card-titulo-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.btn-sm {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; font-size: 13px; font-weight: 700;
  border-radius: 10px; cursor: pointer;
}
.perm-toggle-danger .perm-toggle-lbl { color: var(--c-danger, #dc2626); }
.perm-toggle-danger input:checked + .perm-toggle-track { background: var(--c-danger, #dc2626); }

/* ===== Modal de confirmação: solicitação de edição enviada ===== */
.masol-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 4000;
  padding: 20px;
  animation: masolFade .18s ease;
}
@keyframes masolFade { from { opacity: 0; } to { opacity: 1; } }
.masol-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  width: 100%; max-width: 380px;
  padding: 26px 24px 22px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  animation: masolPop .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes masolPop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.masol-icon {
  width: 60px; height: 60px; margin: 0 auto 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 8px 20px rgba(34,197,94,.4);
}
.masol-title { font-size: 19px; font-weight: 800; color: var(--c-text); margin: 0 0 8px; }
.masol-text { font-size: 14px; line-height: 1.5; color: var(--c-text-2); margin: 0 0 20px; }
.masol-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px;
  border: none; border-radius: 12px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
  color: #fff; font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.masol-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.masol-btn:active { transform: translateY(0); }

/* ===== Campos fixos e fotos no modal de edição ===== */
.med-input-fixo {
  background: var(--c-surface-3) !important;
  color: var(--c-text-3) !important;
  cursor: not-allowed;
}
.med-fotos-hint { color: var(--c-text-3); font-size: 12.5px; margin: -2px 0 10px; }
.med-fotos { display: flex; flex-direction: column; gap: 10px; }
.med-foto {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--c-surface-2);
}
.med-foto-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.med-foto-label { font-size: 13.5px; font-weight: 600; color: var(--c-text-2); }
.med-foto-status { font-size: 11.5px; color: var(--c-text-3); }
.med-foto-status.is-novo { color: var(--c-success, #34d399); font-weight: 700; }
.med-foto-prev { flex: none; }
.med-foto-prev img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--c-border); }
.med-foto-pdf { font-size: 11px; color: var(--c-primary-2); font-weight: 700; }
.med-foto-btn {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.med-foto-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* ===== Badge no menu do admin ===== */
.admin-drawer-badge {
  margin-left: auto;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg,#f87171,#dc2626);
  color: #fff; font-size: 11px; font-weight: 800;
  box-shadow: 0 2px 8px -2px rgba(220,38,38,.6);
}

/* ===== Solicitações de edição (admin) ===== */
#solicLista { display: flex; flex-direction: column; gap: 12px; }
.solic-card {
  border: 1.5px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-surface-2);
  padding: 14px;
}
.solic-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.solic-card-ava {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 800; color: #1a1d23;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
}
.solic-card-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.solic-card-info strong { font-size: 14.5px; color: var(--c-text); }
.solic-card-info small { font-size: 12px; color: var(--c-text-3); }
.solic-card-badge {
  flex: none; align-self: flex-start;
  font-size: 11.5px; font-weight: 700; color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-primary) 35%, transparent);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.solic-diffs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.solic-diff {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 10px 12px;
}
.solic-diff-campo {
  font-weight: 800; color: var(--c-text); font-size: 12px;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px;
}
.solic-diff-vals {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch; gap: 8px;
}
.solic-diff-col {
  display: flex; flex-direction: column; gap: 4px;
  border-radius: 10px; padding: 8px 10px; min-width: 0;
}
.solic-diff-col.is-antes {
  background: color-mix(in srgb, #ef4444 9%, transparent);
  border: 1px solid color-mix(in srgb, #ef4444 28%, transparent);
}
.solic-diff-col.is-depois {
  background: color-mix(in srgb, #34d399 11%, transparent);
  border: 1px solid color-mix(in srgb, #34d399 32%, transparent);
}
.solic-diff-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.solic-diff-col.is-antes .solic-diff-tag { color: #f87171; }
.solic-diff-col.is-depois .solic-diff-tag { color: #34d399; }
.solic-diff-old { color: var(--c-text-3); text-decoration: line-through; word-break: break-word; font-size: 13.5px; }
.solic-diff-new { color: var(--c-text); font-weight: 700; word-break: break-word; font-size: 13.5px; }
.solic-diff-sep { display: flex; align-items: center; justify-content: center; color: var(--c-text-3); flex: none; }
.solic-arq { display: inline-flex; align-items: center; gap: 5px; color: var(--c-text-3); }
.solic-arq.is-novo { color: #34d399; font-weight: 700; }
.solic-vazio {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--c-text-3);
  background: var(--c-surface); border: 1px dashed var(--c-border);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
}
.solic-card-actions { display: flex; gap: 10px; justify-content: flex-end; }
.solic-btn-apr, .solic-btn-rej { padding: 9px 16px; }

@media (max-width: 640px) {
  .solic-diff-vals { grid-template-columns: 1fr; gap: 6px; }
  .solic-diff-sep { transform: rotate(90deg); }
  .solic-card-actions .btn-primary, .solic-card-actions .btn-secondary { flex: 1; justify-content: center; }
}

/* ===== Toggles de permissão (lista de usuários) ===== */
.list-item-stack { flex-direction: column; align-items: stretch; gap: 10px; }
.list-item-main { display: flex; align-items: center; gap: 12px; }
.list-item-perms {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-top: 10px; border-top: 1px dashed var(--c-border);
}
.perm-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.perm-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.perm-toggle-track {
  position: relative; width: 40px; height: 22px; flex: none;
  background: var(--c-surface-3); border: 1px solid var(--c-border-strong);
  border-radius: 999px; transition: background .15s, border-color .15s;
}
.perm-toggle-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #cbd2dc; transition: transform .15s, background .15s;
}
.perm-toggle input:checked + .perm-toggle-track {
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
  border-color: transparent;
}
.perm-toggle input:checked + .perm-toggle-track::after { transform: translateX(18px); background: #1a1d23; }
.perm-toggle-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--c-text-2); }
.perm-toggle-lbl svg { color: var(--c-text-3); }

/* =============================================================
   USUÁRIO (não-admin) — TELAS AMPLIADAS NO MOBILE
   Aumenta textos, espaçamentos e botões nas telas do usuário
   comum (Recepção, Formulário de cadastro, Meus Cadastros e
   Cofre). Escopado por container (#telaUsuario / #telaMeusCadastros
   / #telaCofreCartoes) para NÃO afetar o admin nem o desktop.
   ============================================================= */
@media (max-width: 640px) {

  /* ---------- Topbars (Meus Cadastros / Cofre) ---------- */
  #telaMeusCadastros .topbar,
  #telaCofreCartoes  .topbar { height: 68px; padding: 0 18px; }
  #telaMeusCadastros .topbar-brand,
  #telaCofreCartoes  .topbar-brand { font-size: 17px; }
  #telaMeusCadastros .topbar-hamburger,
  #telaCofreCartoes  .topbar-hamburger { width: 46px; height: 46px; }

  /* ---------- Topbar do fluxo de cadastro ---------- */
  #telaUsuario .nc-topbar { padding: 14px 16px; }
  #telaUsuario .nc-topbar-btn { width: 46px; height: 46px; }
  #telaUsuario .nc-topbar-step { font-size: 11px; }
  #telaUsuario .nc-topbar-name { font-size: 17px; }
  #telaUsuario .nc-topbar-user { width: 42px; height: 42px; font-size: 15px; }

  /* ---------- Tela de recepção (início) ---------- */
  #telaUsuario .nc-rec-card { padding: 34px 20px 30px; border-radius: 22px; }
  #telaUsuario .nc-rec-avatar { width: 78px; height: 78px; font-size: 30px; margin-bottom: 18px; }
  #telaUsuario .nc-rec-title { font-size: 1.7rem; }
  #telaUsuario .nc-rec-sub { font-size: 1.05rem; margin-bottom: 24px; }
  #telaUsuario .nc-rec-actions { gap: 14px; }
  #telaUsuario .nc-rec-btn { padding: 18px; gap: 16px; border-radius: 18px; }
  #telaUsuario .nc-rec-btn-ico { width: 54px; height: 54px; border-radius: 15px; }
  #telaUsuario .nc-rec-btn-ico svg { width: 26px; height: 26px; }
  #telaUsuario .nc-rec-btn-txt strong { font-size: 1.15rem; }
  #telaUsuario .nc-rec-btn-txt small { font-size: .92rem; }
  #telaUsuario .nc-rec-btn-arrow { width: 22px; height: 22px; }
  #telaUsuario .nc-rec-hint { font-size: .9rem; margin-top: 24px; }

  /* ---------- Gate de CNPJ ---------- */
  #telaUsuario .nc-gate-ico { width: 60px; height: 60px; }
  #telaUsuario .nc-gate-title { font-size: 21px; }
  #telaUsuario .nc-gate-desc { font-size: 15px; }

  /* ---------- Formulário em etapas ---------- */
  #telaUsuario .nc-main {
    gap: 14px;
    padding: 14px 16px calc(128px + env(safe-area-inset-bottom, 0px));
  }
  #telaUsuario .nc-step-head { padding: 20px; gap: 14px; }
  #telaUsuario .nc-step-ico { width: 48px; height: 48px; }
  #telaUsuario .nc-step-ico svg { width: 22px; height: 22px; }
  #telaUsuario .nc-step-eyebrow { font-size: 11.5px; }
  #telaUsuario .nc-step-title { font-size: 20px; }
  #telaUsuario .nc-step-desc { font-size: 14.5px; }
  #telaUsuario .nc-fields { padding: 20px; gap: 6px; }

  /* Upload de documentos maior */
  #telaUsuario .nc-uploads-grid { padding: 20px; gap: 14px; }
  #telaUsuario .nc-upload-area { height: 160px; }
  #telaUsuario .nc-upload-title { font-size: 14.5px; }
  #telaUsuario .nc-upload-hint { font-size: 12px; }

  /* Banco fixo (Mercado Pago) */
  #telaUsuario .nc-bank-fixed-logo { width: 52px; font-size: 18px; }
  #telaUsuario .nc-bank-fixed-val { font-size: 15px; }

  /* Barra inferior (navegação do cadastro) */
  #telaUsuario .nc-bottombar-btn { height: 52px; font-size: 15.5px; padding: 0 20px; }
  #telaUsuario .nc-bottombar-btn span { display: inline; }

  /* Etapas no topo (hstepper) */
  #telaUsuario .nc-hstepper .stepper-dot { width: 26px; height: 26px; font-size: 13px; }
  #telaUsuario .nc-hstepper .stepper-label { font-size: 11.5px; }

  /* ---------- Inputs (formulário + gate) ---------- */
  #telaUsuario .fl-input { padding: 18px 14px 18px 44px; font-size: 16.5px; }
  #telaUsuario .fl-label { font-size: 15px; }
  #telaUsuario .fl-input:focus + .fl-label,
  #telaUsuario .fl-input:not(:placeholder-shown) + .fl-label { font-size: 12.5px; }

  /* ---------- Meus Cadastros ---------- */
  #telaMeusCadastros .mc-main {
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  #telaMeusCadastros .mc-toolbar { padding: 16px; border-radius: 16px; }
  #telaMeusCadastros .fl-input { padding: 18px 14px 18px 44px; font-size: 16.5px; }
  #telaMeusCadastros .fl-label { font-size: 15px; }
  #telaMeusCadastros .fl-input:focus + .fl-label,
  #telaMeusCadastros .fl-input:not(:placeholder-shown) + .fl-label { font-size: 12.5px; }
  #telaMeusCadastros .mc-dono-seg .mc-dono-btn { padding: 13px 6px; font-size: 14px; min-height: 46px; }
  #telaMeusCadastros .mc-dono-seg .mc-dono-btn svg { width: 16px; height: 16px; }
  #telaMeusCadastros .mc-chips-row .mc-filtro-btn { padding: 10px 16px; font-size: 14px; }
  #telaMeusCadastros .mc-resumo-item { padding: 14px 6px; border-radius: 12px; }
  #telaMeusCadastros .mc-resumo-item-val { font-size: 24px; }
  #telaMeusCadastros .mc-resumo-item-lbl { font-size: 11px; }
  #telaMeusCadastros .mc-count { font-size: 14px; margin: 0 4px 10px; }
  #telaMeusCadastros .mc-card {
    grid-template-columns: 54px 1fr auto;
    padding: 18px; border-radius: 16px; column-gap: 14px;
  }
  #telaMeusCadastros .mc-card-avatar { width: 54px; height: 54px; font-size: 18px; }
  #telaMeusCadastros .mc-card-info h4 { font-size: 17px; }
  #telaMeusCadastros .mc-card-info p { font-size: 14px; }
  #telaMeusCadastros .mc-card-arrow svg { width: 22px; height: 22px; }

  /* ---------- Cofre de Cartões ---------- */
  #telaCofreCartoes .main-content { padding: 18px 16px 40px; }
  #telaCofreCartoes .card { padding: 22px 20px; border-radius: var(--radius-lg); }
  #telaCofreCartoes .card-titulo { font-size: 18px; }
  #telaCofreCartoes .fl-input { padding: 18px 14px 18px 44px; font-size: 16.5px; }
  #telaCofreCartoes .fl-label { font-size: 15px; }
  #telaCofreCartoes .fl-input:focus + .fl-label,
  #telaCofreCartoes .fl-input:not(:placeholder-shown) + .fl-label { font-size: 12.5px; }
  #telaCofreCartoes .btn-primary { font-size: 16px; min-height: 52px; }
}

/* ============================================================
   DASHBOARD (home) + PAGAMENTOS — ajustes para MOBILE
   Compacta cabeçalho, estatísticas, painéis e cards para que
   caibam bem na tela pequena (telas grandes não são afetadas).
   ============================================================ */
@media (max-width: 640px) {
  /* Remove o espaço extra reservado para a barra inferior do
     formulário (ela fica oculta na home), evitando rolagem vazia.
     Só vale quando a recepção está visível (display:block inline). */
  #telaUsuario .nc-main:has(#ncRecepcao[style*="block"]) { padding-bottom: 24px; }
  .nc-dashboard { padding: 4px 0 16px; }

  /* Cabeçalho */
  .dash-head { gap: 10px; margin-bottom: 14px; }
  .dash-head-left { gap: 10px; }
  .dash-head .nc-rec-avatar { width: 44px; height: 44px; font-size: 16px; border-radius: 12px; }
  .dash-title { font-size: 17px; }
  .dash-sub { font-size: 12px; }
  .dash-cta { padding: 9px 13px; font-size: 12.5px; border-radius: 10px; }
  .dash-cta svg { width: 15px; height: 15px; }

  /* Estatísticas: 2 colunas previsíveis; o card de pagamentos
     ocupa a linha inteira (ícone à esquerda, número alinhado). */
  .dash-stats { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
  .dash-stat { gap: 11px; padding: 13px 13px; border-radius: 14px; }
  .dash-stat:last-child { grid-column: 1 / -1; }
  .dash-stat-ico { width: 40px; height: 40px; border-radius: 11px; }
  .dash-stat-ico svg { width: 19px; height: 19px; }
  .dash-stat-val { font-size: 19px; }
  .dash-stat-lbl { font-size: 11px; margin-top: 3px; }

  /* Painéis (últimos cadastros / alterações) */
  .dash-grid, .dash-panel, .dash-list, .dash-item, .dash-item-info { min-width: 0; }
  .dash-item .badge { flex: 0 0 auto; white-space: nowrap; }
  .dash-grid { gap: 12px; }
  .dash-panel { border-radius: 14px; padding: 12px 12px 4px; }
  .dash-panel-head { margin-bottom: 4px; }
  .dash-panel-head h2 { font-size: 13.5px; }
  .dash-link { font-size: 12px; }
  .dash-item { padding: 10px 4px; gap: 10px; }
  .dash-item-avatar { width: 34px; height: 34px; font-size: 12px; border-radius: 9px; }
  .dash-item-nome { font-size: 13px; }
  .dash-item-sub { font-size: 11px; }
  .dash-item .badge { font-size: 10px; padding: 3px 7px; }

  /* ---------- Pagamentos ---------- */
  #telaPagamentos .main-content { padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .pg-resumo { gap: 8px; margin-bottom: 14px; }
  .pg-resumo-item { padding: 12px 8px; border-radius: 13px; }
  .pg-resumo-val { font-size: 15px; }
  .pg-resumo-lbl { font-size: 10.5px; }
  #telaPagamentos .mc-chips-row .mc-filtro-btn { padding: 10px 16px; font-size: 14px; }
  .pg-card { padding: 13px 14px; border-radius: 13px; }
  .pg-card-valor { font-size: 19px; }
  .pg-card-nome { font-size: 12.5px; }
  .pg-card-det { font-size: 12px; }
}

/* ============================================================
   Tag OBS — destaque MUITO chamativo / pulsante na lista
   ============================================================ */
@keyframes obs-pulse-strong {
  0% {
    transform: scale(1);
    background: #f59e0b;
    color: #1a1205;
    box-shadow: 0 0 0 0 rgba(245,158,11,.75), 0 0 8px 2px rgba(245,158,11,.6);
  }
  50% {
    transform: scale(1.18);
    background: #fde047;
    color: #1a1205;
    box-shadow: 0 0 0 9px rgba(245,158,11,0), 0 0 18px 5px rgba(253,224,71,.95);
  }
  100% {
    transform: scale(1);
    background: #f59e0b;
    color: #1a1205;
    box-shadow: 0 0 0 0 rgba(245,158,11,0), 0 0 8px 2px rgba(245,158,11,.6);
  }
}
@keyframes obs-dot-blink {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .25; transform: scale(1.4); }
}
.tag-obs {
  animation: obs-pulse-strong 1s ease-in-out infinite !important;
  background: #f59e0b !important;
  color: #1a1205 !important;
  border: 1px solid #fde047 !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  transform-origin: center !important;
  will-change: transform, box-shadow, background;
}
.tag-obs::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 6px 2px rgba(220,38,38,.9);
  animation: obs-dot-blink .7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tag-obs { animation: none !important; transform: none !important; }
  .tag-obs::before { animation: none; }
}

/* ============================================================
   Alerta de cadastros com OBS — lembrete (a cada 2h), blindado
   ============================================================ */
.obs-alerta-overlay {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 8, 2, .72);
  backdrop-filter: blur(3px);
  animation: obs-overlay-in .2s ease;
}
@keyframes obs-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.obs-alerta-card {
  width: 100%;
  max-width: 460px;
  background: var(--c-surface, #1b1b1f);
  border: 2px solid #f59e0b;
  border-radius: 18px;
  padding: 26px 24px 22px;
  text-align: center;
  box-shadow: 0 24px 70px -20px rgba(0,0,0,.7);
  animation: obs-card-pop .25s cubic-bezier(.2,.8,.3,1.2), obs-card-glow 1.6s ease-in-out infinite;
}
@keyframes obs-card-pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes obs-card-glow {
  0%, 100% { box-shadow: 0 24px 70px -20px rgba(0,0,0,.7), 0 0 0 0 rgba(245,158,11,.5); }
  50%      { box-shadow: 0 24px 70px -20px rgba(0,0,0,.7), 0 0 0 8px rgba(245,158,11,0); }
}
.obs-alerta-icone {
  width: 60px; height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #1a1205;
  background: #f59e0b;
  box-shadow: 0 0 0 6px rgba(245,158,11,.18);
  animation: obs-icone-pulse 1s ease-in-out infinite;
}
@keyframes obs-icone-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 6px rgba(245,158,11,.18); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(245,158,11,0); }
}
.obs-alerta-titulo {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 800;
  color: var(--c-text, #fff);
  letter-spacing: .02em;
}
.obs-alerta-sub {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--c-text-2, #b6b6bd);
}
.obs-alerta-sub strong { color: #fbbf24; }
.obs-alerta-lista {
  text-align: left;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.obs-alerta-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.35);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text, #fff);
}
.obs-alerta-item svg { color: #fbbf24; flex: 0 0 auto; }
.obs-alerta-quem { font-weight: 500; color: var(--c-text-2, #b6b6bd); font-size: 12px; }
.obs-alerta-check {
  display: flex; align-items: flex-start; gap: 9px;
  text-align: left;
  padding: 12px;
  border-radius: 10px;
  background: var(--c-surface-2, rgba(255,255,255,.04));
  border: 1px solid var(--c-border, rgba(255,255,255,.1));
  cursor: pointer;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--c-text, #fff);
}
.obs-alerta-check input { width: 18px; height: 18px; margin-top: 1px; cursor: pointer; accent-color: #f59e0b; flex: 0 0 auto; }
.obs-alerta-btn {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: #f59e0b;
  color: #1a1205;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: filter .15s ease, opacity .15s ease;
}
.obs-alerta-btn:hover:not(:disabled) { filter: brightness(1.08); }
.obs-alerta-btn:disabled { opacity: .45; cursor: not-allowed; }
.obs-alerta-rodape {
  margin: 12px 0 0;
  font-size: 11.5px;
  color: var(--c-text-3, #8a8a90);
}

/* =============================================================
   HOME / DASHBOARD do usuário
   ============================================================= */
.nc-dashboard { display: block; }
.dash-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.dash-head-left { display: flex; align-items: center; gap: 14px; }
.dash-head .nc-rec-avatar {
  width: 52px; height: 52px; margin: 0; border-radius: 14px; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 800; font-size: 19px;
  color: #1a1205;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
}
.dash-title { margin: 0; font-size: 22px; font-weight: 800; color: var(--c-text); }
.dash-sub   { margin: 2px 0 0; font-size: 13.5px; color: var(--c-text-3); }
.dash-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border: none; border-radius: 12px; cursor: pointer;
  font-size: 14px; font-weight: 700; color: #1a1205;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
  transition: filter .15s ease, transform .1s ease;
}
.dash-cta:hover { filter: brightness(1.06); }
.dash-cta:active { transform: scale(.98); }

.dash-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.dash-stat {
  display: flex; align-items: center; gap: 13px; min-width: 0;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 16px; padding: 15px 16px;
}
.dash-stat-ico {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center;
}
.dash-stat-ico svg { width: 21px; height: 21px; }
.dash-stat-ico.is-blue  { background: linear-gradient(135deg, rgba(59,130,246,.28), rgba(59,130,246,.14));  color: #93c5fd; }
.dash-stat-ico.is-amber { background: linear-gradient(135deg, rgba(245,165,36,.30), rgba(245,165,36,.14));  color: var(--c-primary-3); }
.dash-stat-ico.is-green { background: linear-gradient(135deg, rgba(34,197,94,.28), rgba(16,185,129,.14));    color: #6ee7b7; }
.dash-stat-txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.dash-stat-val { font-size: 22px; font-weight: 800; color: var(--c-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dash-stat-lbl { font-size: 12.5px; color: var(--c-text-3); margin-top: 4px; line-height: 1.25; }

.dash-grid {
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 880px) { .dash-grid { grid-template-columns: 1fr 1fr; } }
.dash-panel {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 16px; padding: 16px 16px 8px;
}
.dash-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.dash-panel-head h2 {
  margin: 0; font-size: 14.5px; font-weight: 700; color: var(--c-text);
  display: inline-flex; align-items: center; gap: 8px;
}
.dash-panel-head h2 svg { color: var(--c-primary); }
.dash-link {
  background: none; border: none; cursor: pointer;
  color: var(--c-primary); font-size: 12.5px; font-weight: 600;
}
.dash-list { display: flex; flex-direction: column; }
.dash-loading { padding: 18px 4px; color: var(--c-text-3); font-size: 13px; }
.dash-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 6px; cursor: pointer;
  border-bottom: 1px solid var(--c-border);
  transition: background .12s ease;
}
.dash-item:last-child { border-bottom: none; }
.dash-item:hover { background: var(--c-surface-2); border-radius: 10px; }
.dash-item-avatar {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: var(--c-surface-3); color: var(--c-text-2);
}
.dash-item-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dash-item-nome {
  font-size: 14px; font-weight: 600; color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-item-sub { font-size: 12px; color: var(--c-text-3); margin-top: 2px; }
.dash-item-arrow { color: var(--c-text-3); flex: 0 0 auto; }

/* =============================================================
   TELA — Pagamentos do usuário
   ============================================================= */
#telaPagamentos { background: var(--c-bg); min-height: 100vh; min-height: 100dvh; }
.pg-resumo {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.pg-resumo-item {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 14px; padding: 14px 12px; text-align: center;
}
.pg-resumo-val { display: block; font-size: 18px; font-weight: 800; color: var(--c-text); font-variant-numeric: tabular-nums; }
.pg-resumo-lbl { display: block; font-size: 11.5px; color: var(--c-text-3); margin-top: 4px; }

.pg-chips { margin-bottom: 14px; }

.pg-lista { display: flex; flex-direction: column; gap: 12px; }
.pg-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-border-strong);
  border-radius: 14px; padding: 14px 16px;
}
.pg-card.is-pendente  { border-left-color: var(--c-primary); }
.pg-card.is-pago      { border-left-color: var(--c-success); }
.pg-card.is-recusado  { border-left-color: var(--c-danger); }
.pg-card.is-cancelado { border-left-color: var(--c-text-3); }
.pg-card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.pg-card-tipo {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-text-3);
}
.pg-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .03em;
}
.pg-badge.is-pendente  { background: var(--c-primary-soft); color: var(--c-primary); }
.pg-badge.is-pago      { background: var(--c-success-bg);   color: var(--c-success); }
.pg-badge.is-recusado  { background: var(--c-danger-bg);    color: var(--c-danger); }
.pg-badge.is-cancelado { background: var(--c-surface-3);    color: var(--c-text-3); }
.pg-card-mid {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.pg-card-valor { font-size: 21px; font-weight: 800; color: var(--c-text); font-variant-numeric: tabular-nums; }
.pg-card-nome  { font-size: 13.5px; color: var(--c-text-2); }
.pg-card-det   { margin-top: 8px; font-size: 12.5px; color: var(--c-text-3); }

/* =============================================================
   Campos preenchidos automaticamente (somente leitura)
   ============================================================= */
.fl-input.is-readonly {
  background: var(--c-surface-3) !important;
  color: var(--c-text-2) !important;
  cursor: default;
  opacity: .92;
}
.fl-input.is-readonly:focus { box-shadow: none; }

/* =============================================================
   TELA DE SUCESSO — visual mais bonito (cartão + botões)
   ============================================================= */
.nc-sucesso-card {
  background: linear-gradient(180deg, #ffffff 0%, #f4fffb 100%);
  box-shadow: 0 30px 70px -24px rgba(16,185,129,.45), 0 2px 0 rgba(255,255,255,.6) inset;
}
/* Anel suave atrás do check */
.nc-sucesso-check {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(16,185,129,.18), rgba(16,185,129,0) 70%);
}
.nc-sucesso-check::after {
  content: "";
  position: absolute; inset: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(16,185,129,.05));
  z-index: 0;
}
.nc-sucesso-check svg { position: relative; z-index: 1; }
.nc-sucesso-titulo {
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(135deg, #047857 0%, #10b981 60%, #34d399 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #047857;
}

/* Botões de ação */
.nc-sucesso-actions { gap: 12px; margin-top: 4px; }
.nc-sucesso-actions .nc-btn {
  min-height: 52px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  gap: 9px;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.nc-sucesso-actions .nc-btn:active { transform: scale(.98); }
.nc-sucesso-actions .nc-btn-primary {
  border: none;
  color: #fff;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 14px 28px -10px rgba(16,185,129,.6);
}
.nc-sucesso-actions .nc-btn-primary:hover { filter: brightness(1.06); box-shadow: 0 18px 34px -10px rgba(16,185,129,.7); }
.nc-sucesso-actions .nc-btn-ghost {
  background: #ffffff;
  color: #047857;
  border: 1.5px solid #a7f3d0;
  box-shadow: 0 6px 16px -10px rgba(16,185,129,.4);
}
.nc-sucesso-actions .nc-btn-ghost:hover { background: #ecfdf5; border-color: #6ee7b7; }

/* =========================================================
   GERADOR DE E-MAIL (@7chaat.com)
   ========================================================= */
.ge-result {
  border: 1px solid rgba(16,185,129,.4);
  background: rgba(16,185,129,.1);
  border-radius: 12px;
  padding: 14px;
}
.ge-result-top {
  display: flex; align-items: center; gap: 8px;
  color: #34d399; font-weight: 700; font-size: 13px; margin-bottom: 8px;
}
.ge-result-email {
  font-size: 18px; font-weight: 800; letter-spacing: .3px;
  color: var(--c-text-1); word-break: break-all; margin-bottom: 12px;
  user-select: all;
}
.ge-result .btn-secondary { width: auto; }

.ge-item {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.ge-item-main { flex: 1; min-width: 0; }
.ge-item-email {
  font-size: 15px; font-weight: 700; color: var(--c-text-1);
  word-break: break-all; margin-bottom: 4px;
}
.ge-item-sub {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 12.5px; color: var(--c-text-2);
}
.ge-item-sub span { display: inline-flex; align-items: center; gap: 5px; }
.ge-item-sub svg { opacity: .7; }
.ge-item-meta { font-size: 11.5px; color: var(--c-text-3); margin-top: 4px; }
.ge-item-copy {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border);
  background: var(--c-surface-3);
  color: var(--c-text-2);
  border-radius: 10px; cursor: pointer;
  transition: all .15s;
}
.ge-item-copy:hover { color: var(--c-text-1); border-color: var(--c-border-strong); }