/* =====================================================================
   DATABASE 51 — Design system (redesign 09.2026)
   Padrão visual claro, inspirado no produto "Ciclei":
   fundo claro, texto slate, cor de marca em gradiente azul-claro → azul-escuro,
   tipografia sans-serif arredondada (Nunito), cantos arredondados grandes,
   cards brancos com sombra leve, badges de fundo suave.
   Sem tema escuro, sem serifa, sem estética "circuito/sci-fi".
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

:root{
  /* superfícies */
  --bg:#F7F8FA;
  --surface:#FFFFFF;
  --surface-2:#F1F3F7;
  --line:#E4E8EF;
  --line-strong:#D3D9E3;

  /* texto */
  --text-900:#1F2933;
  --text-700:#3B4654;
  --text-600:#52606D;
  --text-500:#667085;
  --text-400:#8A94A6;
  --text-300:#AAB2C0;

  /* marca — gradiente azul-claro → azul-escuro */
  --brand-1:#38BDF8;
  --brand-2:#1D63D8;
  --brand-grad:linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
  --brand:#2680E3;          /* tom sólido p/ links, ícones, texto de destaque */
  --brand-ink:#0B4A8F;      /* texto sobre fundo suave da marca */
  --brand-soft:#E7F2FD;     /* fundo de badge / ícone */
  --brand-soft-2:#D6E9FB;

  /* semânticas (card com fundo suave + texto colorido) */
  --success:#1F9D6B;   --success-soft:#E4F5EC;
  --warning:#B26B00;   --warning-soft:#FBEFDA;
  --danger:#D64545;    --danger-soft:#FBE7E7;

  /* compat: nomes antigos ainda referenciados em HTML/JS inline */
  --ink-900:#1F2933;
  --ink-800:#26313D;
  --ink-700:#3B4654;
  --paper:#F7F8FA;
  --paper-2:#FFFFFF;
  --line-dark:#E4E8EF;
  --gold:#2680E3;
  --gold-soft:#E7F2FD;
  --teal:#1F9D6B;
  --teal-soft:#E4F5EC;
  --alert:#D64545;
  --alert-soft:#FBE7E7;
  --on-dark:#1F2933;
  --on-dark-dim:#52606D;

  --display:'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body:'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:'Nunito', ui-monospace, 'Segoe UI', sans-serif;

  --radius:16px;
  --radius-lg:20px;
  --radius-sm:10px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 28px rgba(16,24,40,.07);
  --shadow-lg:0 12px 40px rgba(16,24,40,.12);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--text-900);
  background:var(--bg);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ font-family:var(--display); margin:0 0 .5em; color:var(--text-900); line-height:1.15; font-weight:800; letter-spacing:-.01em; }
p{ margin:0 0 1em; color:var(--text-600); line-height:1.65; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:0; }
button{ font-family:var(--body); cursor:pointer; }

/* =====================================================================
   Layout utilitário
   ===================================================================== */
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
.section{ padding:88px 0; }
.section-tight{ padding:56px 0; }
.section:nth-of-type(even){ background:var(--surface-2); }
.eyebrow{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand); font-weight:800; display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.eyebrow::before{ content:''; width:22px; height:2px; border-radius:2px; background:var(--brand-grad); display:inline-block; }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(28px,3.4vw,40px); font-weight:800; }
.section-head p{ font-size:17px; }

/* =====================================================================
   Landing / marketing
   ===================================================================== */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1180px; margin:0 auto; }
.brand{ display:flex; align-items:center; gap:12px; color:var(--text-900); text-decoration:none; }
.brand:hover{ text-decoration:none; }
.brand-logo{ width:34px; height:34px; object-fit:cover; border-radius:9px; display:block; }
.brand strong{ font-family:var(--display); font-size:18px; font-weight:800; letter-spacing:-.01em; }
.topbar .brand-logo{ width:38px; height:38px; }
.topbar .brand strong{ font-size:20px; }
.topbar nav{ display:flex; gap:24px; align-items:center; }
.topbar nav a{ color:var(--text-600); text-decoration:none; font-size:14px; font-weight:600; }
.topbar nav a:hover{ color:var(--text-900); text-decoration:none; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:var(--radius-pill); font-weight:700; font-size:14px;
  border:1px solid transparent; text-decoration:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ text-decoration:none; }
.btn-gold,.btn-dark{ background:var(--brand-grad); color:#fff; box-shadow:0 6px 16px rgba(38,128,227,.28); }
.btn-gold:hover,.btn-dark:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(38,128,227,.34); }
.btn-outline{ border-color:var(--line-strong); color:var(--text-700); background:var(--surface); }
.btn-outline:hover{ border-color:var(--brand); color:var(--brand); }
.btn-outline-light{ border-color:var(--line-strong); color:var(--text-700); background:var(--surface); border-radius:var(--radius-pill); padding:9px 18px; font-weight:700; font-size:13px; display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.btn-outline-light:hover{ border-color:var(--brand); color:var(--brand); }
.btn-notify{ background:var(--danger); color:#fff; }
.btn-notify:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(214,69,69,.32); }
.btn:disabled,.btn-outline-light:disabled{ opacity:.5; cursor:default; transform:none; box-shadow:none; }

.hero{
  background:
    radial-gradient(60% 60% at 85% 10%, rgba(56,189,248,.14), transparent 70%),
    radial-gradient(50% 50% at 10% 90%, rgba(29,99,216,.10), transparent 70%),
    var(--surface);
  color:var(--text-900); position:relative; overflow:hidden;
  padding:96px 0;
}
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.hero h1{ color:var(--text-900); font-size:clamp(34px,4.6vw,54px); font-weight:900; letter-spacing:-.02em; }
.hero h1 em{
  font-style:normal;
  background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{ color:var(--text-600); font-size:18px; max-width:520px; }
.hero-cta{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:32px; margin-top:48px; padding-top:28px; border-top:1px solid var(--line); }
.hero-stats div strong{ display:block; font-family:var(--display); font-weight:800; font-size:26px; color:var(--brand); font-variant-numeric:tabular-nums; }
.hero-stats div span{ color:var(--text-400); font-size:13px; }

.contour-map{ position:relative; height:420px; }
.contour-map svg{ width:100%; height:100%; }

.problem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.problem-card{ background:var(--surface); padding:28px 26px; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.problem-card .p-icon{
  width:40px; height:40px; border-radius:11px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-soft); color:var(--brand);
}
.problem-card .p-icon svg{ width:20px; height:20px; display:block; }
.problem-card .num{ font-weight:800; color:var(--brand); font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; display:block; }
.problem-card h3{ font-size:19px; font-weight:800; }
.problem-card p{ font-size:14.5px; margin:0; }

.pillars{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.pillar{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 18px; box-shadow:var(--shadow-sm); }
.pillar .n{ font-weight:800; font-size:12px; color:var(--text-300); }
.pillar h4{ font-size:16px; margin:8px 0 6px; font-weight:800; }
.pillar p{ font-size:13.5px; margin:0; }

/* seções que antes eram escuras — agora cinza bem clarinho */
.dark-section{ background:var(--surface-2); color:var(--text-900); }
.dark-section p{ color:var(--text-600); }
.dark-section h2{ color:var(--text-900); }
.dark-section .eyebrow{ color:var(--brand); }

.demo-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; box-shadow:var(--shadow);
}
.demo-kpi strong{ display:block; font-family:var(--display); font-weight:800; font-size:28px; color:var(--brand); font-variant-numeric:tabular-nums; }
.demo-kpi span{ font-size:12px; color:var(--text-400); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }

.flow{ display:flex; gap:0; overflow-x:auto; padding-bottom:8px; }
.flow-step{ flex:1; min-width:170px; padding:20px; border-right:1px dashed var(--line-strong); }
.flow-step:last-child{ border-right:none; }
.flow-step .n{ font-weight:800; color:var(--brand); font-size:13px; }
.flow-step h4{ font-size:15px; margin:10px 0 6px; font-weight:800; }
.flow-step p{ font-size:13px; margin:0; }

.value-table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.value-table th,.value-table td{ padding:16px 18px; text-align:left; font-size:14px; border-bottom:1px solid var(--line); }
.value-table th{ text-transform:uppercase; font-size:11.5px; letter-spacing:.06em; color:var(--text-400); background:var(--surface-2); font-weight:800; }
.value-table tr:last-child td{ border-bottom:none; }
.value-table td:first-child{ font-weight:800; color:var(--text-900); }

.pricing-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.price-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-sm); }
.price-card h3{ font-size:18px; font-weight:800; }
.price-card .price{ font-family:var(--display); font-weight:800; font-size:32px; color:var(--text-900); margin:10px 0; }
.price-card .price small{ font-size:13px; color:var(--text-400); font-weight:500; }
.price-card ul{ padding-left:0; list-style:none; margin:18px 0 0; }
.price-card li{ font-size:14px; color:var(--text-600); padding:9px 0 9px 26px; border-top:1px solid var(--line); position:relative; }
.price-card li::before{
  content:''; position:absolute; left:0; top:14px; width:14px; height:14px; border-radius:50%;
  background:var(--brand-soft);
  box-shadow:inset 0 0 0 1px var(--brand-soft-2);
}
.price-card li::after{
  content:''; position:absolute; left:4.5px; top:17.5px; width:5px; height:2.5px;
  border-left:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(-45deg);
}

.contact-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; }
.contact-form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:grid; gap:14px; box-shadow:var(--shadow); }
.contact-form label{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:700; color:var(--text-700); }
.contact-form input, .contact-form textarea, .contact-form select{
  font-family:var(--body); font-size:14px; padding:11px 13px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--text-900);
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{ outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); }
.contact-form textarea{ resize:vertical; min-height:90px; }

.footer{ background:var(--surface); color:var(--text-400); padding:36px 0; font-size:13px; border-top:1px solid var(--line); }
.footer .container{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; text-align:center; flex-direction:column; }

/* =====================================================================
   Hub inicial — seleção de ramo (Tributário / Eleitoral)
   ===================================================================== */
.hub-body{
  min-height:100vh;
  background:
    radial-gradient(50% 40% at 85% 0%, rgba(56,189,248,.12), transparent 70%),
    radial-gradient(45% 40% at 10% 100%, rgba(29,99,216,.10), transparent 70%),
    var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 24px; color:var(--text-900);
}
.hub-brand{ display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.hub-brand strong{ font-family:var(--display); font-weight:900; font-size:clamp(30px,5vw,52px); color:var(--text-900); letter-spacing:-.02em; }
.hub-brand img{ height:52px; width:auto; }

.logo-anim{ position:relative; display:inline-block; }
.logo-anim img{ position:absolute; top:0; left:0; width:100%; height:100%; display:block; }
.hub-brand .logo-anim{ width:120px; aspect-ratio:860/592; }
.logo-anim .layer-orbit{ animation:logo-orbit-spin 12s linear infinite; }
@keyframes logo-orbit-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.hub-hero{ width:100%; max-width:520px; margin-bottom:8px; }
.hub-hero svg{ width:100%; height:auto; display:block; }
.hub-head{ text-align:center; max-width:600px; margin-bottom:28px; }
.hub-head h1{ color:var(--text-900); font-size:clamp(26px,3.6vw,38px); font-weight:900; }
.hub-head p{ color:var(--text-600); font-size:16px; }
.hub-grid{ display:flex; gap:24px; max-width:920px; width:100%; }
.hub-grid .hub-card{ flex:1 1 0; }
.hub-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px; text-decoration:none; display:flex; flex-direction:column; gap:16px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  position:relative; overflow:hidden; box-shadow:var(--shadow-sm);
}
.hub-card:hover{ transform:translateY(-4px); border-color:var(--brand-soft-2); box-shadow:var(--shadow-lg); text-decoration:none; }
.hub-card .hub-badge{
  align-self:flex-start; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  padding:4px 11px; border-radius:var(--radius-pill); font-weight:800;
  background:var(--brand-soft); color:var(--brand-ink);
}
.hub-card.is-ready .hub-badge{ background:var(--success-soft); color:var(--success); }
.hub-card.is-soon .hub-badge{ background:var(--surface-2); color:var(--text-400); }
.hub-card .hub-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--brand-soft); color:var(--brand);
}
.hub-card .hub-icon svg{ width:26px; height:26px; }
.hub-card h2{ color:var(--text-900); font-size:22px; margin:0; font-weight:800; }
.hub-card p{ color:var(--text-600); font-size:14.5px; margin:0; flex-grow:1; }
.hub-card .hub-cta{
  display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:14px; color:var(--brand);
}
.hub-card.is-soon .hub-cta{ color:var(--text-400); }
.hub-foot{ margin-top:24px; font-size:12.5px; color:var(--text-400); }

@media (max-width: 760px){
  .hub-grid{ flex-direction:column; }
}

.alert{ padding:12px 14px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:14px; }
.alert-error{ background:var(--danger-soft); color:#8f2f2f; }
.alert-success{ background:var(--success-soft); color:#12603f; }

@media (max-width: 880px){
  .hero-grid{ grid-template-columns:1fr; }
  .contour-map{ height:260px; }
  .problem-grid{ grid-template-columns:1fr; }
  .pillars{ grid-template-columns:repeat(2,1fr); }
  .demo-panel{ grid-template-columns:repeat(2,1fr); }
  .contact-wrap{ grid-template-columns:1fr; }
  .pricing-grid{ grid-template-columns:1fr; }
  .topbar nav{ display:none; }
}

/* =====================================================================
   Login
   ===================================================================== */
.login-body{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(45% 40% at 15% 15%, rgba(56,189,248,.12), transparent 70%),
    radial-gradient(45% 40% at 85% 85%, rgba(29,99,216,.10), transparent 70%),
    var(--bg);
  padding:24px;
}
.login-card{
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:36px 32px; color:var(--text-900); box-shadow:var(--shadow);
}
.login-brand{ display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.login-logo{ height:64px; width:auto; display:block; }
.login-brand .login-mark{ height:44px; width:auto; display:block; }
.login-brand strong{ font-family:var(--display); font-weight:900; font-size:20px; color:var(--text-900); letter-spacing:-.02em; }
.login-card h1{ color:var(--text-900); font-size:23px; margin-bottom:4px; font-weight:800; }
.login-sub{ font-size:13.5px; color:var(--text-400); margin-bottom:22px; }
.login-form{ display:grid; gap:16px; }
.login-form label{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:700; color:var(--text-700); }
.login-form input{
  font-family:var(--body); font-size:14px; padding:11px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--text-900);
}
.login-form input:focus{ outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); }
.login-form button{
  margin-top:6px; background:var(--brand-grad); color:#fff; border:none; padding:13px; border-radius:var(--radius-pill); font-weight:800; font-size:14px;
  box-shadow:0 6px 16px rgba(38,128,227,.28);
}
.login-form button:hover{ box-shadow:0 10px 24px rgba(38,128,227,.34); }
.back-link{ display:block; margin-top:22px; text-align:center; font-size:13px; color:var(--text-400); text-decoration:none; }
.back-link:hover{ color:var(--brand); }

/* =====================================================================
   Painel interno — shell + sidebar clara
   ===================================================================== */
.app-shell{ display:flex; min-height:100vh; background:var(--bg); }
.app-sidebar{
  width:248px; background:var(--surface); color:var(--text-700); flex-shrink:0;
  display:flex; flex-direction:column; padding:18px 14px; gap:4px;
  position:sticky; top:64px; height:calc(100vh - 64px); overflow-y:auto;
  border-right:1px solid var(--line);
}
.app-sidebar .brand{ padding:8px 10px 16px; color:var(--text-900); }
.app-sidebar .brand-logo{ width:38px; height:38px; }
.app-nav{ display:flex; flex-direction:column; gap:2px; margin-top:4px; }
.app-nav a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  color:var(--text-600); text-decoration:none; font-size:14px; font-weight:600;
}
.app-nav a:hover{ background:var(--surface-2); color:var(--text-900); text-decoration:none; }
.app-nav a.active{ background:var(--brand-soft); color:var(--brand-ink); font-weight:800; }
.sidebar-foot{ margin-top:auto; padding:14px 10px 4px; border-top:1px solid var(--line); }
.sidebar-foot .who{ font-size:12.5px; color:var(--text-600); margin-bottom:8px; }
.sidebar-foot a{ font-size:12.5px; color:var(--brand); text-decoration:none; font-weight:700; }

.sidebar-toggle{
  position:fixed; top:78px; left:222px; z-index:60;
  width:28px; height:28px; border-radius:50%; border:1px solid var(--line); cursor:pointer;
  background:var(--surface); color:var(--brand); font-size:16px; font-weight:800; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm);
  transition:left .2s ease;
}
.sidebar-toggle:hover{ border-color:var(--brand); }
.sidebar-toggle:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
body.sidebar-collapsed .sidebar-toggle{ left:14px; top:78px; }
body.sidebar-collapsed .app-sidebar{ width:0; padding:0; overflow:hidden; border-right:none; }
/* com a sidebar recolhida o botão-seta fica fixo em left:14px sobre o topo do
   conteúdo — abre espaço no cabeçalho pra ele não cobrir o título da tela. */
body.sidebar-collapsed .app-topbar{ padding-left:56px; }

.municipality-switcher label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-400); margin-bottom:6px; font-weight:700; }
.municipality-switcher select,
#municipalitySwitcher{
  width:100%; padding:8px 10px; border-radius:var(--radius-sm);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--text-900); font-family:var(--body); font-size:13px;
}

/* seletor de módulos / acesso ao município (usado na sidebar de todas as telas) */
.sidebar-section-label{
  font-size:.62rem; letter-spacing:.12em; color:var(--text-400); font-weight:800;
  padding:14px 12px 6px; text-transform:uppercase;
}
.module-selector{ padding:0 6px 10px; display:flex; flex-direction:column; gap:3px; }
.module-item{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:10px;
  cursor:pointer; transition:background .15s; border:1px solid transparent; position:relative;
}
.module-item:hover:not(.locked){ background:var(--surface-2); }
.module-item.active{ background:var(--brand-soft); border-color:var(--brand-soft-2); }
.module-item.locked{ cursor:default; opacity:.5; }
.module-badge{ font-size:.68rem; font-weight:800; color:var(--text-400); min-width:20px; }
.module-item.active .module-badge{ color:var(--brand); }
.module-icon{ display:flex; align-items:center; color:var(--text-400); }
.module-icon svg{ width:15px; height:15px; }
.module-item.active .module-icon{ color:var(--brand); }
.module-label{ font-size:.86rem; color:var(--text-600); flex:1; }
.module-item.active .module-label{ color:var(--brand-ink); font-weight:700; }
.module-lock{
  font-size:.62rem; color:var(--text-400); background:var(--surface-2);
  padding:1px 6px; border-radius:5px; letter-spacing:.04em;
}
.module-active-dot{ width:6px; height:6px; border-radius:50%; background:var(--brand); }

.module-access-panel{ padding:0 6px 10px; display:flex; flex-direction:column; gap:3px; }
.access-row{ display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:8px; }
.access-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.access-dot.on{ background:var(--success); }
.access-dot.off{ background:var(--line-strong); }
.access-label{ font-size:.72rem; color:var(--text-500,#667085); flex:1; }
.access-toggle{
  width:20px; height:20px; border-radius:6px; border:1px solid var(--line-strong); cursor:pointer;
  font-size:11px; font-weight:800; line-height:1;
  background:var(--surface); color:var(--text-400);
  transition:all .15s;
}
.access-toggle:hover{ border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }

.sidebar-divider{ height:1px; background:var(--line); margin:10px 12px; }
#btnPrintReport{
  width:calc(100% - 20px); margin:0 10px 8px; background:var(--brand-soft); border:1px solid var(--brand-soft-2);
  color:var(--brand-ink); border-radius:10px; padding:10px 14px; font-family:var(--body); font-size:.82rem; font-weight:700;
  cursor:pointer; text-align:left; display:flex; align-items:center; gap:8px; transition:background .2s;
}
#btnPrintReport:hover{ background:var(--brand-soft-2); }
#btnPrintReport:disabled{ opacity:.6; cursor:default; }

.app-main{ flex:1; min-width:0; background:var(--bg); }
.app-topbar{
  display:flex; align-items:center; justify-content:space-between; padding:18px 28px;
  background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
.app-topbar h1{ font-size:20px; margin:0; font-weight:800; }
.app-content{ padding:26px 28px 60px; }

/* =====================================================================
   KPI cards
   ===================================================================== */
.kpi-row{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-bottom:22px; }
.kpi-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  box-shadow:var(--shadow-sm); position:relative;
}
.kpi-card .icon{
  width:36px; height:36px; border-radius:10px; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-soft); color:var(--brand);
}
.kpi-card .icon svg{ width:18px; height:18px; display:block; }
.kpi-card .label{ font-size:11.5px; color:var(--text-400); text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.kpi-card .value{ font-family:var(--display); font-weight:800; font-size:26px; margin-top:6px; color:var(--text-900); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.kpi-card.alert .icon{ background:var(--danger-soft); color:var(--danger); }
.kpi-card.alert .value{ color:var(--danger); }
.kpi-card.gold .icon{ background:var(--brand-soft); color:var(--brand); }
.kpi-card.gold .value{ color:var(--brand); }
.kpi-card.teal .icon{ background:var(--success-soft); color:var(--success); }
.kpi-card.teal .value{ color:var(--success); }

/* Sinalização por severidade no corpo do card (só nos KPIs de alerta, e só
   quando o valor é > 0 — a classe é aplicada condicionalmente em loadKpis()).
   Reaproveita a paleta semântica de --danger / --warning já usada nas barras
   de "Distribuição de risco fiscal" e no donut de risco. */
.kpi-card.alert,
.kpi-hero .kpi-card.alert{ border-color:#EFC9C9; background:linear-gradient(180deg,#FCEFEF 0%,var(--surface) 62%); }
.kpi-card.kpi-amber,
.kpi-hero .kpi-card.kpi-amber{ border-color:#E7D3AC; background:linear-gradient(180deg,#FBF3E4 0%,var(--surface) 62%); }

.kpi-row.kpi-hero{ background:transparent; border:none; box-shadow:none; padding:0; gap:16px; }
.kpi-hero .kpi-card{ background:var(--surface); }
.kpi-hero .kpi-card + .kpi-card::before{ display:none; }

/* KPIs financeiros da Visão geral */
.kpi-card-half{ grid-column:span 2; }
.kpi-principal{
  grid-column:1 / -1;
  background:linear-gradient(135deg, #FFFFFF 0%, var(--brand-soft) 100%);
  border:1px solid var(--brand-soft-2);
}
.kpi-principal .value{ font-size:2.6rem; color:var(--brand-ink); }
.kpi-sub{ font-size:.72rem; color:var(--text-400); margin-top:4px; }
.kpi-amber .value{ color:var(--warning); }
.kpi-amber .icon{ background:var(--warning-soft); color:var(--warning); }
.kpi-renewal{ font-size:.75rem; color:var(--warning); margin-top:6px; display:block; font-weight:700; }

/* Ícone de ajuda (?) + tooltip nos KPI cards */
.kpi-help{
  position:absolute; top:8px; right:8px; width:17px; height:17px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-400);
  font-size:10px; font-weight:800; cursor:help; display:flex; align-items:center; justify-content:center;
  transition:all .2s; z-index:10; font-family:var(--body); line-height:1;
}
.kpi-help:hover{ background:var(--brand-soft); color:var(--brand); border-color:var(--brand-soft-2); }
.kpi-tooltip{
  display:none; position:absolute; top:32px; right:0; width:240px;
  background:var(--text-900); border:1px solid var(--text-700); border-radius:12px;
  padding:12px 14px; font-size:11px; line-height:1.5; color:rgba(255,255,255,.88);
  z-index:100; box-shadow:var(--shadow-lg); pointer-events:none;
}
.kpi-tooltip strong{ color:#fff; display:block; margin-bottom:4px; font-size:11.5px; }
.kpi-help:hover + .kpi-tooltip, .kpi-help:focus + .kpi-tooltip{ display:block; }

/* =====================================================================
   Panels / cards do painel
   ===================================================================== */
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:20px; box-shadow:var(--shadow-sm); }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.panel-head h3{ font-size:15px; margin:0; font-weight:800; color:var(--text-900); }
.panel-head h3::before{
  content:''; display:inline-block; width:6px; height:6px; border-radius:2px; background:var(--brand-grad);
  margin-right:9px; vertical-align:middle; position:relative; top:-1px;
}
.panel-head span, .panel-head p{ color:var(--text-400); font-weight:500; }

.chart-box{ position:relative; height:240px; width:100%; }
.chart-box.chart-box-wide{ height:230px; }
.chart-box.chart-box-flat{ height:140px; }
.chart-box.chart-box-half{ height:120px; width:50%; margin:0 auto; }

.grid-2{ display:grid; grid-template-columns:1.3fr .7fr; gap:20px; }
.grid-2 .panel{ margin-bottom:0; }

.kpi-charts-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.kpi-chart-card{ margin-bottom:0; border-radius:var(--radius); padding:18px 20px; }
.kpi-chart-card .panel-head{ margin-bottom:10px; }
.kpi-chart-card .panel-head h3{ font-size:14px; }

.dash-section-title{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-400); font-weight:800; margin:0 0 14px; }

/* Linha de 2 colunas: analytics à esquerda, hoje/clima/mapa à direita */
.dash-row-2col{ display:flex; gap:18px; align-items:stretch; }
.dash-col-left{ flex:1.7; min-width:0; display:flex; flex-direction:column; }
.dash-col-right{ width:400px; flex-shrink:0; display:flex; flex-direction:column; gap:18px; }
@media (max-width:1180px){
  .dash-row-2col{ flex-direction:column; }
  .dash-col-right{ width:100%; }
}

.today-card{ padding:16px 20px; min-height:80px; display:flex; flex-direction:column; justify-content:center; gap:4px; }
.today-weekday{ font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--brand); font-weight:800; }
.today-date{ font-size:1.15rem; font-weight:800; letter-spacing:-.01em; color:var(--text-900); text-transform:capitalize; }

/* Data + previsão compactas no cabeçalho do dashboard (substituem o antigo
   card #todayCard e o painel .forecast-bar da coluna direita) */
.topbar-today{ display:flex; align-items:center; gap:12px; margin-right:auto; margin-left:20px; }
.topbar-today .tb-date{ font-size:12.5px; font-weight:700; color:var(--text-600); text-transform:capitalize; }
.tb-weather{
  position:relative; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:var(--brand-soft); border:1px solid var(--brand-soft-2); border-radius:var(--radius-pill);
  padding:4px 12px 4px 10px; font-family:var(--body); color:var(--brand-ink);
}
.tb-weather:hover{ background:var(--brand-soft-2); }
.tb-weather .tb-weather-icon{ font-size:15px; line-height:1; }
.tb-weather .tb-weather-temp{ font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums; }
.tb-forecast{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg); padding:12px 14px; gap:14px; z-index:40;
  display:none;
}
.tb-weather:hover .tb-forecast,
.tb-weather.open .tb-forecast{ display:flex; }

.forecast-bar{ padding:10px 14px; min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:4px; }
.weather-day{ display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; }
.weather-day .icon{ font-size:19px; line-height:1; }
.weather-day .temps{ font-size:12px; color:var(--text-900); font-variant-numeric:tabular-nums; font-weight:700; }
.weather-day .temps .min{ color:var(--text-400); margin-left:3px; font-weight:500; }

.map-card{ flex:1; min-height:0; padding:0; overflow:hidden; display:flex; flex-direction:column; }
.map-card .panel-head{ padding:16px 18px 0; margin-bottom:10px; }
.map-card #dashMap{ flex:1; min-height:300px; border-radius:0 0 var(--radius) var(--radius); }

.dash-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.dash-table th{
  text-align:left; font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-400);
  padding:0 8px 8px; font-weight:800;
}
.dash-table td{ padding:9px 8px; color:var(--text-900); border-top:1px solid var(--line); }
.dash-table tbody tr{ transition:background .15s ease; }
.dash-table tbody tr:hover{ background:var(--surface-2); }
.dash-table td.num{ text-align:right; font-variant-numeric:tabular-nums; }

/* Distribuição de risco fiscal — barras */
.risk-bars-card{ display:flex; flex-direction:column; }
.risk-bars{ display:flex; flex-direction:column; gap:14px; padding:8px 0; }
.risk-row{ display:grid; grid-template-columns:64px 1fr 44px 80px; align-items:center; gap:10px; }
.risk-label{ font-size:.62rem; font-weight:800; letter-spacing:.06em; color:var(--text-400); }
.risk-track{ height:8px; background:var(--surface-2); border-radius:var(--radius-pill); overflow:hidden; }
.risk-fill{ height:100%; border-radius:var(--radius-pill); transition:width .3s ease; }
.risk-fill.risk-alta{ background:var(--danger); }
.risk-fill.risk-media{ background:var(--warning); }
.risk-fill.risk-baixa{ background:var(--brand); }
.risk-fill.risk-regular{ background:var(--success); }
.risk-pct{ font-size:.78rem; font-weight:800; color:var(--text-900); text-align:right; font-variant-numeric:tabular-nums; }
.risk-count{ font-size:.72rem; color:var(--text-400); text-align:right; font-variant-numeric:tabular-nums; }

/* Análise por período — grade 2x2 */
.periodo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.periodo-grid .panel{ margin-bottom:0; max-height:340px; overflow:hidden; }
.periodo-grid .chart-box{ height:200px; }
#periodDetail.periodo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px){ #periodDetail.periodo-grid{ grid-template-columns:1fr; } .periodo-grid{ grid-template-columns:1fr; } }

/* Cards de métrica (Situação de Alvará / APPCI no período) */
.metric-stack{ display:flex; flex-direction:column; gap:10px; padding:4px 0; }
.metric-row{
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  background:var(--surface-2); border-radius:12px; border:1px solid var(--line);
  transition:border-color .2s;
}
.metric-row:hover{ border-color:var(--brand-soft-2); }
.metric-icon{
  width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:.9rem; font-weight:800; flex-shrink:0;
}
.metric-info{ flex:1; display:flex; flex-direction:column; gap:2px; }
.metric-label{ font-size:.6rem; letter-spacing:.06em; font-weight:800; color:var(--text-400); }
.metric-value{ font-size:1.4rem; font-weight:800; line-height:1; }
.metric-pct{ font-size:.75rem; color:var(--text-400); flex-shrink:0; }

/* Placeholder — Notificações emitidas */
.notify-placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:24px 20px; }
.notify-icon{ width:40px; height:40px; }
.notify-title{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--brand); font-weight:800; }
.notify-main{ font-size:1rem; color:var(--text-600); }
.notify-sub{ font-size:.78rem; color:var(--text-400); max-width:260px; }

.top-neighborhood-badge{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  padding:6px 12px; border-radius:var(--radius-pill); background:var(--brand-soft); border:1px solid var(--brand-soft-2);
  font-size:12px; color:var(--brand-ink);
}
.top-neighborhood-badge strong{ color:var(--brand-ink); font-weight:800; }

/* =====================================================================
   Gráficos SVG custom + legenda + tooltip
   ===================================================================== */
.legend{ display:flex; gap:14px; flex-wrap:wrap; margin:2px 0 14px; }
.legend-item{
  display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-600); font-family:var(--body);
  background:none; border:1px solid transparent; border-radius:8px; padding:4px 8px; margin:-4px -8px; cursor:pointer;
}
.legend-item:hover{ background:var(--surface-2); }
.legend-item:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; }
.legend-item .key{ width:16px; height:3px; border-radius:2px; display:block; }
.legend-item.off{ color:var(--text-300); }
.legend-item.off .key{ opacity:.3; }

.chart-wrap{ position:relative; max-width:620px; margin:0 auto; }
.chart-wrap svg{ display:block; width:100%; height:auto; overflow:visible; }
.chart-wrap .gridline{ stroke:#EEF2F7; stroke-width:1; }
.chart-wrap .crosshair{ stroke:var(--text-300); stroke-width:1; opacity:0; pointer-events:none; }
.chart-wrap .cat-label{ font-family:var(--body); font-size:11.5px; fill:var(--text-400); text-anchor:middle; }
.chart-wrap .series-line{ fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.chart-wrap .pt{ stroke:var(--surface); stroke-width:2; }
.chart-wrap .hit-col{ fill:transparent; cursor:pointer; }

.tooltip{
  position:absolute; top:0; left:0; transform:translate(-50%,-100%);
  background:var(--text-900); color:#fff; border-radius:10px; padding:10px 12px;
  font-size:12.5px; line-height:1.5; pointer-events:none; opacity:0; transition:opacity .08s;
  box-shadow:var(--shadow-lg); white-space:nowrap; z-index:5;
}
.tooltip.show{ opacity:1; }
.tooltip .tt-title{ font-family:var(--display); font-weight:800; font-size:13px; margin-bottom:6px; color:#fff; }
.tooltip .tt-row{ display:flex; align-items:center; gap:7px; }
.tooltip .tt-row + .tt-row{ margin-top:3px; }
.tooltip .tt-key{ width:12px; height:3px; border-radius:2px; flex-shrink:0; display:block; }
.tooltip .tt-label{ color:rgba(255,255,255,.7); font-family:var(--body); }
.tooltip .tt-value{ font-family:var(--mono); font-weight:700; margin-left:auto; padding-left:10px; font-variant-numeric:tabular-nums; }
@media (max-width:640px){
  .tooltip{ font-size:11.5px; padding:8px 10px; }
  .kpi-charts-row{ grid-template-columns:1fr; }
}

/* =====================================================================
   Filtros / chips / tabelas
   ===================================================================== */
.filters-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
.filters-bar .field{ display:flex; flex-direction:column; gap:5px; }
.filters-bar label{ font-size:11px; color:var(--text-400); text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.filters-bar select, .filters-bar input{
  font-family:var(--body); font-size:13.5px; padding:9px 12px; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text-900); min-width:150px;
}
.filters-bar select:focus, .filters-bar input:focus{ outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); }
.filters-bar .map-check{
  display:flex; align-items:center; gap:7px; text-transform:none; letter-spacing:0;
  font-size:13px; font-weight:600; color:var(--text-700); padding-bottom:9px; cursor:pointer;
}
.filters-bar .map-check input{ accent-color:var(--brand); width:15px; height:15px; min-width:0; cursor:pointer; }

.chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--radius-pill); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.chip-alta{ background:var(--danger-soft); color:var(--danger); }
.chip-media{ background:var(--warning-soft); color:var(--warning); }
.chip-baixa{ background:var(--surface-2); color:var(--text-600); }
.chip-regular{ background:var(--success-soft); color:var(--success); }

table.data-table{ width:100%; border-collapse:collapse; font-size:13px; }
table.data-table th{ text-align:left; padding:11px 10px; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-400); border-bottom:1px solid var(--line); white-space:nowrap; font-weight:800; }
table.data-table td{ padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle; color:var(--text-700); }
table.data-table tbody tr:hover{ background:var(--surface-2); }
.table-scroll{ overflow:auto; max-height:520px; border-radius:var(--radius-sm); }
.debt{ font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums; }

#map{ width:100%; height:560px; border-radius:var(--radius-sm); }
.map-legend{ display:flex; gap:14px; margin-top:12px; flex-wrap:wrap; font-size:12px; color:var(--text-600); }
.map-legend .sw{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:5px; }

.route-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; max-height:420px; overflow:auto; }
.route-list li{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:12px; font-size:13px; background:var(--surface); }
.route-list .ord{ font-family:var(--mono); font-weight:800; color:var(--brand); min-width:20px; }

.empty-state{ text-align:center; padding:36px 20px; color:var(--text-400); font-size:14px; }

.pagination-bar{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }

@media (max-width: 1100px){
  .kpi-row{ grid-template-columns:repeat(3,1fr); }
  .grid-2{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .app-sidebar{ display:none; }
  .kpi-row{ grid-template-columns:repeat(2,1fr); }
  .sidebar-toggle{ display:none; }
}

/* =====================================================================
   Compat: neutraliza o antigo tema escuro do dashboard (body.dash-dark).
   O redesign é claro em todas as telas; os componentes acima já cobrem
   tudo que o dashboard.php usa. Este bloco só garante que nenhuma regra
   escura remanescente (caso a classe permaneça no <body>) reintroduza
   fundo azul.
   ===================================================================== */
body.dash-dark .app-main{ background:var(--bg); }
body.dash-dark .app-topbar{ background:var(--surface); border-bottom:1px solid var(--line); }
body.dash-dark .app-topbar h1{ color:var(--text-900); }
body.dash-dark .app-sidebar{ background:var(--surface); }
body.dash-dark .panel,
body.dash-dark .kpi-hero .kpi-card{ background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
body.dash-dark .panel-head h3,
body.dash-dark .dash-section-title{ color:var(--text-900); }
body.dash-dark .kpi-hero .kpi-card .value{ color:var(--text-900); }
body.dash-dark .kpi-hero .kpi-card .label{ color:var(--text-400); }

/* Fila de fiscalização — layout responsivo para celular (fiscalizacao.php) */
@media (max-width: 768px) {
  .page-fiscalizacao .app-sidebar { display: none; }
  .page-fiscalizacao .app-main { margin-left: 0 !important; padding: 8px; }

  .page-fiscalizacao table thead { display: none; }
  .page-fiscalizacao table tr {
    display: block; margin-bottom: 12px; border: 1px solid var(--line);
    border-radius: 14px; padding: 12px; background: var(--surface); box-shadow: var(--shadow-sm);
  }
  .page-fiscalizacao table td {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0; border: none; font-size: 13px;
  }
  .page-fiscalizacao table td::before {
    content: attr(data-label); font-weight: 800; color: var(--text-400);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; min-width: 90px;
  }
  .page-fiscalizacao .filters-bar { flex-direction: column; gap: 8px; }
  .page-fiscalizacao .filters-bar select,
  .page-fiscalizacao .filters-bar input { width: 100%; }
  .page-fiscalizacao .btn-notif,
  .page-fiscalizacao .btn-entregar { width: 44px; height: 44px; font-size: 20px; border-radius: 12px; }
  .page-fiscalizacao .right-panel { display: none; }
  #modalEntrega > div {
    max-width: 100% !important; width: 100% !important; height: 100vh !important;
    border-radius: 0 !important; max-height: 100vh !important;
  }
}

/* Botões de ação da fila de fiscalização */
.btn-notif, .btn-entregar{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:10px;
  padding:5px 9px; font-size:15px; cursor:pointer; line-height:1;
}
.btn-notif:hover{ border-color:var(--brand); }
.btn-entregar:hover{ border-color:var(--success); }

/* =====================================================================
   Navegação reorganizada — cinco etapas + administração
   ===================================================================== */
.db51-breadcrumb{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:10px 28px; background:var(--surface-2); border-bottom:1px solid var(--line); color:var(--text-400); font-size:12px; }
.db51-breadcrumb strong{ color:var(--text-700); font-weight:800; }
.db51-breadcrumb-separator{ color:var(--text-300); font-size:16px; line-height:1; }
.db51-global-topnav{ min-height:64px; display:flex; align-items:center; gap:28px; padding:0 24px; background:var(--text-900); color:#fff; border-bottom:1px solid rgba(255,255,255,.08); position:sticky; top:0; z-index:50; }
.db51-top-brand{ display:flex; align-items:center; gap:9px; flex-shrink:0; color:#fff; text-decoration:none; letter-spacing:.03em; }
.db51-top-brand:hover{ color:#fff; text-decoration:none; }
.db51-top-brand img{ display:block; }
.db51-domain-nav{ display:flex; align-items:stretch; gap:4px; height:64px; flex:1; }
.db51-domain-nav a,.db51-domain-nav .locked{ display:flex; align-items:center; gap:8px; padding:0 16px; color:rgba(255,255,255,.72); font-size:14px; font-weight:700; text-decoration:none; border-bottom:3px solid transparent; }
.db51-domain-nav a:hover{ color:#fff; background:rgba(255,255,255,.05); text-decoration:none; }
.db51-domain-nav a.active{ color:#fff; border-bottom-color:var(--brand); }
.db51-domain-nav .locked{ color:rgba(255,255,255,.38); cursor:default; }
.db51-domain-nav small{ font-size:9px; color:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.25); border-radius:4px; padding:2px 5px; letter-spacing:.04em; }
.db51-top-actions{ display:flex; align-items:center; gap:9px; flex-shrink:0; }
.db51-top-municipality select{ max-width:205px; padding:9px 11px; border:1px solid rgba(255,255,255,.2); border-radius:7px; background:rgba(255,255,255,.1); color:#fff; font:600 13px var(--body); }
.db51-top-municipality select option{ color:var(--text-900); background:#fff; }
.db51-top-municipality-static{ color:rgba(255,255,255,.8); font-size:12px; }
.db51-top-menu{ position:relative; }
.db51-top-menu summary{ list-style:none; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; cursor:pointer; color:#fff; background:rgba(255,255,255,.1); }
.db51-top-menu summary::-webkit-details-marker{ display:none; }
.db51-top-menu summary:hover{ background:rgba(255,255,255,.18); }
.db51-top-dropdown{ position:absolute; right:0; top:42px; min-width:210px; padding:10px; display:flex; flex-direction:column; gap:3px; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-lg); color:var(--text-700); }
.db51-top-dropdown strong{ padding:5px 8px 8px; font-size:12px; color:var(--text-900); }
.db51-top-dropdown a,.db51-dropdown-muted{ padding:7px 8px; color:var(--text-600); font-size:12px; text-decoration:none; border-radius:6px; }
.db51-top-dropdown a:hover{ background:var(--surface-2); color:var(--brand); text-decoration:none; }
.db51-dropdown-muted{ color:var(--text-400); padding-top:0; }
.db51-avatar{ display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:800; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.db51-tool-page{ background:var(--bg); color:var(--text-900); }
.db51-tool-inner{ max-width:1500px; margin:0 auto; padding:28px 24px 56px; }
.db51-tool-inner h1{ color:var(--text-900); }
.db51-operation-steps{ display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; margin:18px 0 22px; }
.db51-operation-step{ display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--text-400); font-size:12px; }
.db51-operation-step b{ display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--surface-2); color:var(--text-500); }
.db51-operation-step.active{ border-color:var(--brand-soft-2); background:var(--brand-soft); color:var(--brand-ink); }
.db51-operation-step.active b{ background:var(--brand); color:#fff; }
.db51-next-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:28px; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:var(--surface); font-size:13px; }
.db51-next-actions strong{ margin-right:auto; color:var(--text-700); }
.db51-next-actions a{ color:var(--brand); font-weight:800; text-decoration:none; }
.db51-next-actions a:hover{ text-decoration:underline; }
.db51-admin-subtitle{ color:var(--text-400); margin-top:-10px; }
.db51-admin-context-card{ margin:20px 0; padding:14px 16px; background:var(--brand-soft); border:1px solid var(--brand-soft-2); border-radius:10px; color:var(--brand-ink); }
.db51-module-admin-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:980px; }
.db51-module-admin-card{ display:flex; flex-direction:column; justify-content:space-between; min-height:170px; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.db51-module-admin-card.enabled{ border-color:var(--brand-soft-2); }
.db51-module-admin-card.future{ opacity:.65; }
.db51-module-code{ color:var(--brand); font:800 12px var(--mono); }
.db51-module-admin-card h2{ margin:5px 0 7px; font-size:18px; color:var(--text-900); }
.db51-module-admin-card p{ margin:0; color:var(--text-500); font-size:13px; line-height:1.5; }
.db51-module-admin-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; }
.db51-module-status{ font-size:12px; font-weight:800; }
.db51-module-status.on{ color:var(--success); }
.db51-module-status.off{ color:var(--text-400); }
.db51-module-toggle{ border:1px solid var(--brand); border-radius:7px; padding:8px 12px; background:var(--brand); color:#fff; font-weight:700; cursor:pointer; }
.db51-module-toggle:hover{ filter:brightness(.95); }
.db51-module-toggle:disabled{ opacity:.6; cursor:wait; }
.db51-queue-summary{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:18px 0 22px; }
.db51-queue-summary>div{ position:relative; padding:12px 14px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.db51-queue-summary span{ display:block; color:var(--text-400); font-size:11px; }
.db51-queue-summary strong{ display:block; margin-top:4px; color:var(--text-900); font-size:20px; }
.db51-help{ position:absolute; top:9px; right:10px; width:18px; height:18px; padding:0; border:1px solid var(--text-300); border-radius:50%; background:transparent; color:var(--text-500); font-size:11px; font-weight:800; line-height:16px; cursor:help; }
.db51-help:hover,.db51-help:focus{ border-color:var(--brand); color:var(--brand); outline:2px solid var(--brand-soft-2); outline-offset:1px; }
.db51-import-summary{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:18px 0 22px; }
.db51-import-summary>div{ position:relative; padding:12px 14px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.db51-import-summary span{ display:block; color:var(--text-400); font-size:11px; }
.db51-import-summary strong{ display:block; margin-top:4px; color:var(--text-900); font-size:20px; }
.db51-import-summary .ok{ border-color:#bbf7d0; background:#f0fdf4; }
.db51-import-summary .ok strong{ color:#166534; }
.db51-import-summary .blocked{ border-color:#fecaca; background:#fef2f2; }
.db51-import-summary .blocked strong{ color:#991b1b; }
.db51-history-card{ position:relative; }
.db51-history-card .db51-help{ top:9px; right:10px; }
.db51-queue-summary .ok{ border-color:#bbf7d0; background:#f0fdf4; }
.db51-queue-summary .ok strong{ color:#166534; }
.db51-queue-summary .blocked{ border-color:#fecaca; background:#fef2f2; }
.db51-queue-summary .blocked strong{ color:#991b1b; }
@media (max-width:720px){ .db51-tool-inner{ padding:20px 14px 40px; } .db51-domain-nav a,.db51-domain-nav .locked{ padding:0 9px; font-size:12px; } .db51-domain-nav .locked{ display:none; } .db51-queue-summary,.db51-import-summary{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.demo-mode-label{ text-align:center; margin:-8px 0 12px; padding:3px 10px; background:var(--brand-soft); border:1px solid var(--brand-soft-2); border-radius:6px; font-size:10px; color:var(--brand); letter-spacing:.1em; }
.process-nav{ display:flex; flex-direction:column; gap:10px; margin:4px 0 8px; }
.process-stage{ border-left:1px solid var(--line-strong); padding-left:10px; }
.process-stage-title{ display:flex; align-items:center; gap:7px; padding:2px 4px 5px; color:var(--text-400); font-size:.62rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.process-stage-number{ color:var(--brand); font-size:.8rem; letter-spacing:0; }
.process-stage-items{ display:flex; flex-direction:column; gap:2px; }
.process-link{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:7px 8px; border-radius:8px; color:var(--text-600); font-size:.78rem; font-weight:600; text-decoration:none; }
.process-link:hover{ background:var(--surface-2); color:var(--text-900); text-decoration:none; }
.process-link.active{ background:var(--brand-soft); color:var(--brand-ink); font-weight:800; }
.process-link.disabled,.admin-link.disabled{ color:var(--text-300); cursor:default; pointer-events:none; }
.admin-nav{ display:flex; flex-direction:column; gap:2px; padding:0 6px 8px; }
.admin-link{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 8px; color:var(--text-600); font-size:.75rem; font-weight:600; text-decoration:none; border-radius:8px; }
.admin-link:hover{ background:var(--surface-2); color:var(--text-900); text-decoration:none; }
.sidebar-admin-context{ padding:4px 6px 8px; }
.sidebar-admin-context label{ font-size:.62rem; }
.sidebar-admin-context select{ font-size:.75rem; padding:6px 8px; }
@media (max-width:720px){ .process-stage-title{ font-size:.58rem; } .process-link{ font-size:.75rem; } }