:root {
  --bg: #f4f7fb;
  --text: #101828;
  --muted: #667085;
  --line: #e4e7ec;
  --dark: #101828;
  --primary: #0f766e;
  --shadow: 0 24px 70px rgba(16, 24, 40, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 20% 5%, rgba(15, 118, 110, .12), transparent 32%),
    radial-gradient(circle at 90% 20%, rgba(109, 40, 217, .10), transparent 34%),
    var(--bg);
  color: var(--text);
}
button, input { font: inherit; }
.app-shell { display: grid; grid-template-columns: 330px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 24px; background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px); border-right: 1px solid var(--line); overflow-y: auto;
}
.brand { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.brand-icon {
  width:50px; height:50px; border-radius:18px; background: linear-gradient(135deg, var(--primary), #0f172a);
  color:#fff; display:grid; place-items:center; font-weight:900;
}
.brand strong { display:block; font-size:18px; }
.brand span { display:block; color:var(--muted); font-size:13px; margin-top:2px; }
.search-box { margin-bottom:18px; }
.search-box input {
  width:100%; border:1px solid var(--line); background:#fff; border-radius:18px; padding:14px 16px; outline:none;
}
.search-box input:focus { border-color: var(--primary); box-shadow: 0 0 0 5px rgba(15,118,110,.12); }
.module-menu { display:grid; gap:10px; }
.menu-item {
  border:1px solid var(--line); background:#fff; border-radius:18px; padding:14px; cursor:pointer; text-align:left; transition:.2s;
}
.menu-item:hover, .menu-item.active {
  transform: translateY(-2px); border-color: rgba(15,118,110,.35); box-shadow: 0 14px 34px rgba(16,24,40,.08);
}
.menu-item span { display:block; font-size:12px; color:var(--primary); font-weight:900; margin-bottom:4px; }
.menu-item strong { display:block; font-size:14px; }
.sidebar-note { margin-top:22px; padding:18px; border-radius:22px; background:#ecfdf3; border:1px solid #bbf7d0; }
.sidebar-note p { margin:8px 0 0; color:#166534; font-size:13px; line-height:1.45; }

.main { padding:34px; overflow:hidden; }
.hero {
  display:grid; grid-template-columns:1.35fr .65fr; gap:24px; align-items:stretch; margin-bottom:34px;
}
.hero-content, .hero-card, .section {
  border:1px solid rgba(228,231,236,.9); background: rgba(255,255,255,.86); backdrop-filter: blur(20px);
  border-radius:34px; box-shadow: var(--shadow);
}
.hero-content {
  padding:46px; color:#fff;
  background:
    linear-gradient(135deg, rgba(15,23,42,.96), rgba(15,118,110,.90)),
    url("data:image/svg+xml,%3Csvg width='220' height='220' viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='white' stroke-opacity='.12'%3E%3Cpath d='M0 40H220M0 90H220M0 140H220M0 190H220M40 0V220M90 0V220M140 0V220M190 0V220'/%3E%3C/g%3E%3C/svg%3E");
}
.eyebrow {
  display:inline-flex; padding:8px 13px; border-radius:99px; background: rgba(255,255,255,.14);
  font-size:13px; font-weight:900; margin-bottom:18px;
}
.hero h1 { margin:0; font-size: clamp(34px, 5vw, 64px); line-height:.98; letter-spacing:-.055em; }
.hero p { max-width:760px; color: rgba(255,255,255,.78); font-size:18px; line-height:1.65; margin:22px 0 0; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.btn {
  border:none; border-radius:16px; padding:13px 18px; cursor:pointer; font-weight:850; transition:.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn.primary { background:#fff; color:var(--dark); }
.btn.ghost { background: rgba(255,255,255,.13); color:#fff; border:1px solid rgba(255,255,255,.18); }

.hero-card { padding:30px; position:relative; overflow:hidden; }
.pulse-dot {
  width:14px; height:14px; border-radius:50%; background:var(--primary);
  box-shadow: 0 0 0 10px rgba(15,118,110,.12); margin-bottom:34px;
}
.hero-card h3 { margin:0; font-size:28px; line-height:1.05; letter-spacing:-.04em; }
.hero-card p { color:var(--muted); line-height:1.6; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:22px; }
.metrics div { border-radius:18px; background:#f8fafc; border:1px solid var(--line); padding:14px; }
.metrics strong { display:block; font-size:22px; }
.metrics span { font-size:12px; color:var(--muted); }

.section { padding:30px; margin-bottom:28px; }
.section-title { max-width:980px; margin-bottom:22px; }
.section-title span { color:var(--primary); font-weight:900; font-size:13px; text-transform:uppercase; letter-spacing:.09em; }
.section-title h2 { margin:8px 0 0; font-size: clamp(27px, 3vw, 42px); letter-spacing:-.045em; }
.section-title p { margin:10px 0 0; color:var(--muted); line-height:1.6; }

.premium-flow-section { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,250,252,.92)); }
.lane-box {
  border:1px solid var(--line); border-radius:28px; padding:22px; background:#fff;
  box-shadow: 0 18px 40px rgba(16,24,40,.06); margin-bottom:18px; position:relative; overflow:hidden;
}
.lane-box::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px; border-radius:12px;
}
.lane-box.commercial::before { background: linear-gradient(180deg, #f97316, #ea580c); }
.lane-box.operation::before { background: linear-gradient(180deg, #2563eb, #1d4ed8); }
.lane-box.management::before { background: linear-gradient(180deg, #059669, #0f766e); }

.lane-header { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.lane-badge {
  min-width:92px; text-align:center; padding:10px 12px; border-radius:999px;
  background:#f8fafc; border:1px solid var(--line); font-size:12px; font-weight:900; color:var(--dark);
}
.lane-header h3 { margin:0; font-size:24px; letter-spacing:-.04em; }
.lane-header p { margin:4px 0 0; color:var(--muted); line-height:1.5; }

.micro-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.micro-card {
  border: none;
  border-radius: 24px;
  padding: 18px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(16,24,40,.14);
  transition: .22s ease;
}
.micro-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 22px 42px rgba(16,24,40,.20);
}
.micro-no {
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:13px; background: rgba(255,255,255,.16); font-weight:900;
}
.micro-card strong, .micro-card small { display:block; }
.micro-card strong { margin-top:12px; font-size:20px; letter-spacing:-.03em; }
.micro-card small { margin-top:6px; color: rgba(255,255,255,.78); line-height:1.45; }

.micro-marketing { background: linear-gradient(135deg, #9a3412, #f97316); }
.micro-cadastro { background: linear-gradient(135deg, #0f172a, #334155); }
.micro-orcamento { background: linear-gradient(135deg, #164e63, #0891b2); }
.micro-convenio { background: linear-gradient(135deg, #064e3b, #059669); }
.micro-agenda { background: linear-gradient(135deg, #1e3a8a, #2563eb); }
.micro-prontuario { background: linear-gradient(135deg, #7f1d1d, #dc2626); }
.micro-documentos { background: linear-gradient(135deg, #312e81, #4f46e5); }
.micro-app { background: linear-gradient(135deg, #4c1d95, #7c3aed); }
.micro-financeiro { background: linear-gradient(135deg, #713f12, #ca8a04); }
.micro-comunicacao { background: linear-gradient(135deg, #831843, #db2777); }
.micro-relatorios { background: linear-gradient(135deg, #365314, #65a30d); }
.micro-seguranca { background: linear-gradient(135deg, #111827, #0f766e); }
.micro-dashboard { background: linear-gradient(135deg, #18181b, #52525b); }

.modules-grid { display:grid; grid-template-columns:1fr; gap:18px; max-width:1080px; }
.module-card {
  border-radius:30px; border:1px solid var(--line); background:#fff; overflow:hidden;
  box-shadow: 0 12px 38px rgba(16,24,40,.07); transition:.25s;
}
.module-card.highlight { outline: 5px solid rgba(15,118,110,.18); transform: scale(1.01); }
.module-head { padding:28px; color:#fff; cursor:pointer; min-height:168px; }
.grad-cadastros { background: linear-gradient(135deg, #0f172a, #334155); }
.grad-agendamento { background: linear-gradient(135deg, #1e3a8a, #2563eb); }
.grad-marketing { background: linear-gradient(135deg, #9a3412, #f97316); }
.grad-convenio { background: linear-gradient(135deg, #064e3b, #059669); }
.grad-app { background: linear-gradient(135deg, #4c1d95, #7c3aed); }
.grad-dashboard { background: linear-gradient(135deg, #18181b, #52525b); }
.grad-financeiro { background: linear-gradient(135deg, #713f12, #ca8a04); }
.grad-prontuario { background: linear-gradient(135deg, #7f1d1d, #dc2626); }
.grad-orcamentos { background: linear-gradient(135deg, #164e63, #0891b2); }
.grad-documentos { background: linear-gradient(135deg, #312e81, #4f46e5); }
.grad-comunicacao { background: linear-gradient(135deg, #831843, #db2777); }
.grad-relatorios { background: linear-gradient(135deg, #365314, #65a30d); }
.grad-seguranca { background: linear-gradient(135deg, #111827, #0f766e); }
.module-topline { display:flex; align-items:center; justify-content:space-between; }
.module-number {
  display:inline-grid; place-items:center; width:42px; height:42px; border-radius:15px; background: rgba(255,255,255,.16); font-weight:900;
}
.module-title { margin:26px 0 8px; font-size:24px; line-height:1.08; letter-spacing:-.035em; }
.module-subtitle { margin:0; color:rgba(255,255,255,.78); line-height:1.5; }
.module-body { display:none; padding:28px; border-top:1px solid var(--line); }
.module-card.open .module-body { display:block; animation:fadeIn .25s ease-out; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.tag { border-radius:99px; background:#f2f4f7; color:#475467; padding:7px 10px; font-size:12px; font-weight:750; }
.detail-block { margin-top:18px; }
.detail-block h4 { margin:0 0 10px; font-size:15px; }
.detail-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.detail-list li {
  border:1px solid var(--line); background:#f9fafb; padding:12px 13px; border-radius:16px; color:#344054; line-height:1.45;
}
.timeline { counter-reset: step; display:grid; gap:9px; }
.timeline-item { display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:center; }
.timeline-item::before {
  counter-increment: step; content: counter(step); display:grid; place-items:center;
  width:34px; height:34px; border-radius:13px; background:var(--dark); color:#fff; font-size:12px; font-weight:900;
}
.timeline-item span { border:1px solid var(--line); border-radius:16px; padding:11px 13px; background:#fff; color:#344054; }

.top-button {
  position:fixed; right:22px; bottom:22px; width:48px; height:48px; border-radius:18px;
  border:none; background:var(--dark); color:#fff; font-size:22px; cursor:pointer; box-shadow: var(--shadow); display:none;
}
.top-button.show { display:block; }

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

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .module-menu { grid-template-columns: repeat(2,1fr); }
  .hero { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .main, .sidebar { padding:16px; }
  .hero-content { padding:30px; }
  .module-menu { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .micro-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   VERSÃO 2 - MICROBOTÕES PREMIUM
   Ajuste visual solicitado: remover aparência padrão de botão,
   aplicar cores fortes, sombras, brilho e layout elegante.
   ========================================================= */

.lane-header {
  align-items: flex-start !important;
  padding-left: 8px;
  margin-bottom: 20px !important;
}

.lane-header h3 {
  font-size: 28px !important;
  font-weight: 950 !important;
  letter-spacing: -.05em !important;
  color: #101828 !important;
}

.lane-header p {
  font-size: 15px !important;
  color: #667085 !important;
  max-width: 850px;
}

.lane-badge {
  display: none !important;
}

.micro-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 16px !important;
}

.micro-card {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  outline: none !important;
  min-height: 138px !important;
  border-radius: 26px !important;
  padding: 20px !important;
  color: #ffffff !important;
  text-align: left !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 18px 42px rgba(16, 24, 40, .18) !important;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}

.micro-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)) !important;
  pointer-events: none !important;
}

.micro-card::after {
  content: "Abrir módulo" !important;
  position: absolute !important;
  right: 16px !important;
  top: 16px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

.micro-card:hover {
  transform: translateY(-6px) scale(1.015) !important;
  box-shadow: 0 28px 58px rgba(16, 24, 40, .26) !important;
  filter: saturate(1.08) contrast(1.02) !important;
}

.micro-card:active {
  transform: translateY(-2px) scale(.995) !important;
}

.micro-no {
  position: relative !important;
  z-index: 1 !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.micro-card strong {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  margin-top: 16px !important;
  color: #ffffff !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -.045em !important;
}

.micro-card small {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  margin-top: 8px !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

/* Cores reforçadas dos microbotões */
.micro-marketing { background: linear-gradient(135deg, #9a3412 0%, #ea580c 45%, #f97316 100%) !important; }
.micro-cadastro { background: linear-gradient(135deg, #020617 0%, #0f172a 45%, #334155 100%) !important; }
.micro-orcamento { background: linear-gradient(135deg, #164e63 0%, #0891b2 55%, #06b6d4 100%) !important; }
.micro-convenio { background: linear-gradient(135deg, #064e3b 0%, #047857 55%, #10b981 100%) !important; }
.micro-agenda { background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 55%, #2563eb 100%) !important; }
.micro-prontuario { background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 55%, #ef4444 100%) !important; }
.micro-documentos { background: linear-gradient(135deg, #312e81 0%, #4338ca 55%, #6366f1 100%) !important; }
.micro-app { background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 55%, #8b5cf6 100%) !important; }
.micro-financeiro { background: linear-gradient(135deg, #713f12 0%, #a16207 55%, #eab308 100%) !important; }
.micro-comunicacao { background: linear-gradient(135deg, #831843 0%, #be185d 55%, #ec4899 100%) !important; }
.micro-relatorios { background: linear-gradient(135deg, #365314 0%, #4d7c0f 55%, #84cc16 100%) !important; }
.micro-seguranca { background: linear-gradient(135deg, #111827 0%, #0f766e 55%, #14b8a6 100%) !important; }
.micro-dashboard { background: linear-gradient(135deg, #18181b 0%, #3f3f46 55%, #71717a 100%) !important; }

.lane-box {
  padding: 26px !important;
  border-radius: 32px !important;
}

.lane-box.commercial {
  background: linear-gradient(180deg, rgba(255,247,237,.9), rgba(255,255,255,.96)) !important;
}

.lane-box.operation {
  background: linear-gradient(180deg, rgba(239,246,255,.95), rgba(255,255,255,.96)) !important;
}

.lane-box.management {
  background: linear-gradient(180deg, rgba(236,253,245,.95), rgba(255,255,255,.96)) !important;
}

@media (max-width: 760px) {
  .micro-grid {
    grid-template-columns: 1fr !important;
  }

  .micro-card {
    min-height: 128px !important;
  }

  .micro-card::after {
    display: none !important;
  }
}


/* =========================================================
   PWA DEMONSTRATIVO
   ========================================================= */

.pwa-box {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 50;
  width: min(560px, calc(100% - 32px));
  border-radius: 24px;
  padding: 14px;
  background: rgba(15, 23, 42, .94);
  color: #ffffff;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
}

.pwa-box.show {
  display: flex;
}

.pwa-box strong {
  display: block;
  font-size: 15px;
}

.pwa-box span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: rgba(255,255,255,.72);
  line-height: 1.35;
}

.pwa-install-btn {
  border: 0;
  border-radius: 16px;
  padding: 12px 16px;
  background: #10b981;
  color: #052e16;
  font-weight: 950;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(16,185,129,.28);
}

.pwa-install-btn:hover {
  transform: translateY(-2px);
}

@media (max-width: 760px) {
  .pwa-box {
    left: 16px;
    right: 16px;
    bottom: 16px;
    transform: none;
    width: auto;
    align-items: flex-start;
    flex-direction: column;
  }

  .pwa-install-btn {
    width: 100%;
  }

  .top-button.show {
    bottom: 118px;
  }
}


/* =========================================================
   FLUXOGRAMA EXPANDIDO
   ========================================================= */

.top-tools {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.flowchart-launch-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 18px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #0f172a, #0f766e);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .18);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.flowchart-launch-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(15, 23, 42, .24);
  filter: saturate(1.05);
}

.flowchart-launch-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 8px rgba(52, 211, 153, .18);
}

.flowchart-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
}

.flowchart-modal.show {
  display: block;
}

.flowchart-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, .58);
  backdrop-filter: blur(8px);
}

.flowchart-dialog {
  position: absolute;
  inset: 28px;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(228, 231, 236, .9);
  border-radius: 30px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .30);
  overflow: hidden;
}

.flowchart-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 24px 24px 18px;
  border-bottom: 1px solid #e4e7ec;
  background: linear-gradient(180deg, rgba(248,250,252,1), rgba(255,255,255,1));
}

.flowchart-eyebrow {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #065f46;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.flowchart-header h3 {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -.05em;
  line-height: 1.02;
  color: #101828;
}

.flowchart-header p {
  margin: 8px 0 0;
  color: #667085;
  max-width: 760px;
  line-height: 1.55;
}

.flowchart-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.flowchart-mini-btn,
.flowchart-close-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  font-weight: 900;
}

.flowchart-mini-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #f2f4f7;
  color: #101828;
  font-size: 24px;
  line-height: 1;
}

.flowchart-close-btn {
  border-radius: 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #101828, #334155);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(16, 24, 40, .18);
}

.flowchart-body {
  padding: 18px;
  overflow: auto;
  background:
    radial-gradient(circle at 8% 8%, rgba(16,185,129,.08), transparent 22%),
    radial-gradient(circle at 94% 10%, rgba(37,99,235,.08), transparent 20%),
    #f8fafc;
}

.flowchart-canvas {
  min-width: 1160px;
  transform-origin: top left;
  transition: transform .18s ease;
}

.flowchart-stage {
  padding: 18px;
}

.flow-lane {
  border-radius: 28px;
  padding: 22px;
  margin-bottom: 18px;
  border: 1px solid #e4e7ec;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}

.lane-commercial {
  background: linear-gradient(180deg, rgba(255,247,237,.94), rgba(255,255,255,1));
}

.lane-operation {
  background: linear-gradient(180deg, rgba(239,246,255,.94), rgba(255,255,255,1));
}

.lane-management {
  background: linear-gradient(180deg, rgba(236,253,245,.94), rgba(255,255,255,1));
}

.flow-lane-title {
  margin-bottom: 18px;
}

.flow-lane-title span {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.flow-lane-title h4 {
  margin: 10px 0 0;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -.05em;
  color: #101828;
}

.flow-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: nowrap;
}

.row-secondary {
  margin-top: 14px;
  gap: 14px;
  justify-content: center;
}

.flow-connector,
.flow-vertical-link {
  color: #94a3b8;
  font-weight: 900;
  display: grid;
  place-items: center;
}

.flow-connector {
  min-width: 36px;
  font-size: 34px;
}

.flow-vertical-link {
  font-size: 42px;
  margin: -2px 0 12px;
}

.flow-node {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 170px;
  border-radius: 26px;
  padding: 18px;
  color: #ffffff;
  box-shadow: 0 18px 36px rgba(15, 23, 42, .16);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  overflow: hidden;
}

.flow-node::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.26), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent);
  pointer-events: none;
}

.flow-node:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 24px 48px rgba(15, 23, 42, .22);
  filter: saturate(1.05);
}

.flow-node b {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.16);
  font-size: 14px;
}

.flow-node strong,
.flow-node small {
  position: relative;
  z-index: 1;
  display: block;
}

.flow-node strong {
  margin-top: 14px;
  font-size: 22px;
  line-height: 1.06;
  letter-spacing: -.04em;
}

.flow-node small {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,.82);
}

.flow-node.compact {
  max-width: 420px;
  min-height: 140px;
}

.n-cadastro { background: linear-gradient(135deg, #020617 0%, #0f172a 45%, #334155 100%); }
.n-marketing { background: linear-gradient(135deg, #9a3412 0%, #ea580c 45%, #f97316 100%); }
.n-orcamento { background: linear-gradient(135deg, #164e63 0%, #0891b2 55%, #06b6d4 100%); }
.n-convenio { background: linear-gradient(135deg, #064e3b 0%, #047857 55%, #10b981 100%); }
.n-agenda { background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 55%, #2563eb 100%); }
.n-prontuario { background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 55%, #ef4444 100%); }
.n-financeiro { background: linear-gradient(135deg, #713f12 0%, #a16207 55%, #eab308 100%); }
.n-app { background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 55%, #8b5cf6 100%); }
.n-documentos { background: linear-gradient(135deg, #312e81 0%, #4338ca 55%, #6366f1 100%); }
.n-comunicacao { background: linear-gradient(135deg, #831843 0%, #be185d 55%, #ec4899 100%); }
.n-relatorios { background: linear-gradient(135deg, #365314 0%, #4d7c0f 55%, #84cc16 100%); }
.n-seguranca { background: linear-gradient(135deg, #111827 0%, #0f766e 55%, #14b8a6 100%); }
.n-dashboard { background: linear-gradient(135deg, #18181b 0%, #3f3f46 55%, #71717a 100%); }

.flow-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}

.flow-summary-card {
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}

.flow-summary-card strong {
  display: block;
  font-size: 18px;
  margin-bottom: 8px;
}

.flow-summary-card p {
  margin: 0;
  color: #475467;
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .flowchart-dialog {
    inset: 16px;
  }

  .flowchart-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .flowchart-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .top-tools {
    justify-content: stretch;
  }

  .flowchart-launch-btn {
    width: 100%;
    justify-content: center;
  }

  .flowchart-dialog {
    inset: 10px;
    border-radius: 22px;
  }

  .flowchart-body {
    padding: 10px;
  }

  .flowchart-canvas {
    min-width: 980px;
  }

  .flow-summary {
    grid-template-columns: 1fr;
  }
}


/* ===== Fluxograma real ===== */
.real-canvas{
  min-width: 1700px;
}
.real-flowchart{
  position: relative;
  width: 1700px;
  height: 1260px;
}
.real-flow-svg{
  position: absolute;
  inset: 0;
  width: 1700px;
  height: 1260px;
  z-index: 0;
}
.fc-group-label{
  position:absolute;
  z-index:1;
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:#fff;
  border:1px solid #e4e7ec;
  color:#0f766e;
  box-shadow:0 10px 22px rgba(15,23,42,.06);
}
.gl1{left:40px; top:30px;}
.gl2{left:40px; top:290px;}
.gl3{left:40px; top:555px;}
.gl4{left:40px; top:820px;}
.gl5{right:30px; top:30px; color:#334155;}

.fc-node{
  appearance:none;
  -webkit-appearance:none;
  position:absolute;
  z-index:2;
  width:260px;
  min-height:150px;
  border:0;
  border-radius:26px;
  padding:18px;
  color:#fff;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(15,23,42,.16);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.fc-node:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 24px 52px rgba(15,23,42,.22);
  filter:saturate(1.05);
}
.fc-node::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.24), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0));
  pointer-events:none;
}
.fc-node span,
.fc-node strong,
.fc-node small{
  position:relative;
  z-index:1;
  display:block;
}
.fc-node span{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.14);
  font-size:13px;
  font-weight:950;
}
.fc-node strong{
  margin-top:14px;
  font-size:22px;
  line-height:1.04;
  letter-spacing:-.04em;
}
.fc-node small{
  margin-top:8px;
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.84);
}

/* positions */
.c1{left:40px; top:110px;}
.c2{left:390px; top:110px;}
.c3{left:740px; top:110px;}
.c4{left:1090px; top:110px;}

.o1{left:40px; top:375px;}
.o2{left:390px; top:375px;}
.o3{left:740px; top:375px;}
.o4{left:1090px; top:375px;}
.o5{left:1440px; top:375px;}

.s1{left:160px; top:640px; width:300px;}
.s2{left:510px; top:640px; width:300px;}
.s3{left:1090px; top:640px; width:350px;}

.g1{left:390px; top:820px;}
.g2{left:740px; top:820px;}
.g3{left:1090px; top:820px; width:350px;}

/* colors */
.c1{background:linear-gradient(135deg,#020617 0%, #0f172a 45%, #334155 100%);}
.c2{background:linear-gradient(135deg,#9a3412 0%, #ea580c 45%, #f97316 100%);}
.c3{background:linear-gradient(135deg,#164e63 0%, #0891b2 55%, #06b6d4 100%);}
.c4{background:linear-gradient(135deg,#064e3b 0%, #047857 55%, #10b981 100%);}
.o1{background:linear-gradient(135deg,#1e3a8a 0%, #1d4ed8 55%, #2563eb 100%);}
.o2{background:linear-gradient(135deg,#7f1d1d 0%, #b91c1c 55%, #ef4444 100%);}
.o3{background:linear-gradient(135deg,#312e81 0%, #4338ca 55%, #6366f1 100%);}
.o4{background:linear-gradient(135deg,#713f12 0%, #a16207 55%, #eab308 100%);}
.o5{background:linear-gradient(135deg,#4c1d95 0%, #6d28d9 55%, #8b5cf6 100%);}
.s1,.s2,.s3{background:linear-gradient(135deg,#831843 0%, #be185d 55%, #ec4899 100%);}
.g1{background:linear-gradient(135deg,#365314 0%, #4d7c0f 55%, #84cc16 100%);}
.g2{background:linear-gradient(135deg,#111827 0%, #0f766e 55%, #14b8a6 100%);}
.g3{background:linear-gradient(135deg,#18181b 0%, #3f3f46 55%, #71717a 100%);}

.fc-legend{
  position:absolute;
  left:40px;
  bottom:40px;
  z-index:2;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.96);
  border:1px solid #e4e7ec;
  box-shadow:0 12px 26px rgba(15,23,42,.08);
}
.fc-legend div{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#475467;
  font-weight:700;
}
.fc-legend .lg{
  width:14px;
  height:14px;
  border-radius:50%;
  display:inline-block;
}
.fc-legend .commercial{background:#ea580c;}
.fc-legend .operation{background:#2563eb;}
.fc-legend .support{background:#db2777;}
.fc-legend .management{background:#65a30d;}


/* ===== Fluxograma V4 organizado ===== */
.real-canvas{
  min-width: 1900px;
}
.real-flowchart.v4{
  position: relative;
  width: 1900px;
  height: 2060px;
}
.real-flowchart.v4 .real-flow-svg{
  position:absolute;
  inset:0;
  width:1900px;
  height:2060px;
  z-index:0;
}
.real-flowchart.v4 .fc-group-label{
  position:absolute;
  z-index:1;
  display:inline-flex;
  padding:8px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:#fff;
  border:1px solid #e4e7ec;
  color:#0f766e;
  box-shadow:0 10px 22px rgba(15,23,42,.06);
}
.real-flowchart.v4 .gl1{left:645px; top:20px;}
.real-flowchart.v4 .gl2{left:645px; top:780px;}
.real-flowchart.v4 .gl3{left:110px; top:780px;}
.real-flowchart.v4 .gl4{left:1170px; top:780px;}
.real-flowchart.v4 .gl5{left:650px; top:1590px;}

.real-flowchart.v4 .fc-node{
  appearance:none;
  -webkit-appearance:none;
  position:absolute;
  z-index:2;
  width:420px;
  min-height:140px;
  border:0;
  border-radius:26px;
  padding:18px;
  color:#fff;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(15,23,42,.16);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.real-flowchart.v4 .fc-node:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 24px 52px rgba(15,23,42,.22);
  filter:saturate(1.05);
}
.real-flowchart.v4 .fc-node::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.24), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0));
  pointer-events:none;
}
.real-flowchart.v4 .fc-node span,
.real-flowchart.v4 .fc-node strong,
.real-flowchart.v4 .fc-node small{
  position:relative;
  z-index:1;
  display:block;
}
.real-flowchart.v4 .fc-node span{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.14);
  font-size:13px;
  font-weight:950;
}
.real-flowchart.v4 .fc-node strong{
  margin-top:14px;
  font-size:22px;
  line-height:1.04;
  letter-spacing:-.04em;
}
.real-flowchart.v4 .fc-node small{
  margin-top:8px;
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.84);
}

/* positions */
.real-flowchart.v4 .m1{left:640px; top:80px;}
.real-flowchart.v4 .m2{left:640px; top:270px;}
.real-flowchart.v4 .m3{left:640px; top:460px;}
.real-flowchart.v4 .m4{left:640px; top:650px;}
.real-flowchart.v4 .m5{left:640px; top:840px;}
.real-flowchart.v4 .m6{left:640px; top:1030px;}
.real-flowchart.v4 .m8{left:640px; top:1410px;}

.real-flowchart.v4 .sideL1{left:100px; top:840px; width:380px;}
.real-flowchart.v4 .sideL2{left:100px; top:1030px; width:380px;}

.real-flowchart.v4 .sideR1{left:1160px; top:840px; width:420px;}
.real-flowchart.v4 .sideR2{left:1160px; top:1030px; width:420px;}
.real-flowchart.v4 .sideR3{left:1160px; top:1220px; width:420px;}

.real-flowchart.v4 .g1v4{left:620px; top:1680px; width:360px;}
.real-flowchart.v4 .g2v4{left:1040px; top:1680px; width:360px;}
.real-flowchart.v4 .g3v4{left:1460px; top:1680px; width:360px;}

/* colors */
.real-flowchart.v4 .m1{background:linear-gradient(135deg,#020617 0%, #0f172a 45%, #334155 100%);}
.real-flowchart.v4 .m2{background:linear-gradient(135deg,#9a3412 0%, #ea580c 45%, #f97316 100%);}
.real-flowchart.v4 .m3{background:linear-gradient(135deg,#164e63 0%, #0891b2 55%, #06b6d4 100%);}
.real-flowchart.v4 .m4{background:linear-gradient(135deg,#064e3b 0%, #047857 55%, #10b981 100%);}
.real-flowchart.v4 .m5{background:linear-gradient(135deg,#1e3a8a 0%, #1d4ed8 55%, #2563eb 100%);}
.real-flowchart.v4 .m6{background:linear-gradient(135deg,#7f1d1d 0%, #b91c1c 55%, #ef4444 100%);}
.real-flowchart.v4 .m8{background:linear-gradient(135deg,#713f12 0%, #a16207 55%, #eab308 100%);}
.real-flowchart.v4 .sideL1,
.real-flowchart.v4 .sideL2,
.real-flowchart.v4 .sideR3{background:linear-gradient(135deg,#831843 0%, #be185d 55%, #ec4899 100%);}
.real-flowchart.v4 .sideR1{background:linear-gradient(135deg,#4c1d95 0%, #6d28d9 55%, #8b5cf6 100%);}
.real-flowchart.v4 .sideR2{background:linear-gradient(135deg,#312e81 0%, #4338ca 55%, #6366f1 100%);}
.real-flowchart.v4 .g1v4{background:linear-gradient(135deg,#365314 0%, #4d7c0f 55%, #84cc16 100%);}
.real-flowchart.v4 .g2v4{background:linear-gradient(135deg,#111827 0%, #0f766e 55%, #14b8a6 100%);}
.real-flowchart.v4 .g3v4{background:linear-gradient(135deg,#18181b 0%, #3f3f46 55%, #71717a 100%);}

.real-flowchart.v4 .fc-legend{
  position:absolute;
  left:100px;
  bottom:80px;
  z-index:2;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.96);
  border:1px solid #e4e7ec;
  box-shadow:0 12px 26px rgba(15,23,42,.08);
}
.real-flowchart.v4 .fc-legend div{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#475467;
  font-weight:700;
}
.real-flowchart.v4 .fc-legend .lg{
  width:14px;
  height:14px;
  border-radius:50%;
  display:inline-block;
}
.real-flowchart.v4 .fc-legend .commercial{background:#0f172a;}
.real-flowchart.v4 .fc-legend .operation{background:#2563eb;}
.real-flowchart.v4 .fc-legend .support{background:#db2777;}
.real-flowchart.v4 .fc-legend .management{background:#65a30d;}