/* =========================================================
   STYLE.CSS
   Sistema padronizado em Bootstrap + Design System
   ========================================================= */

/* =========================================================
   1) Variáveis globais e tema padrão da entidade
   ========================================================= */

:root{
  color-scheme: light;
  --brand:#304F90;
  --brand2:#4366B0;
  --brandDark:#1F3563;
  --brandSoft:#F2F5FB;
  --brandSoftBorder:rgba(48,79,144,.18);
  --brand-rgb:48,79,144;
  --brand2-rgb:67,102,176;

  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --text:#172033;
  --muted:#667085;
  --line:#e5e7eb;
  --line-strong:#d0d7e2;
  --shadow-sm:none;
  --shadow-md:none;
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:24px;
  --topbar-h:90px;
  --sidebar-w:270px;
  --container:1800px;

  --ok:#16a34a;
  --warn:#d97706;
  --bad:#dc2626;

  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  --bs-border-color:var(--line);
  --bs-secondary-color:var(--muted);
  --bs-primary:var(--brand);
  --bs-primary-rgb:var(--brand-rgb);
  --bs-link-color:var(--brandDark);
  --bs-link-hover-color:var(--brand);
  --bs-card-bg:var(--surface);
  --bs-card-border-color:var(--line);
  --bs-tertiary-bg:var(--surface-2);
  --bs-light-bg-subtle:var(--surface-2);
  --bs-box-shadow-sm:var(--shadow-sm);
  --bs-box-shadow:var(--shadow-md);
}

/* =========================================================
   2) Modo escuro
   ========================================================= */

:root[data-ui-theme="dark"]{
  color-scheme: dark;
  --bg:#0b1220;
  --surface:#121b2b;
  --surface-2:#162234;
  --text:#e6edf7;
  --muted:#9fb0c7;
  --line:#243348;
  --line-strong:#30435d;
  --shadow-sm:none;
  --shadow-md:none;
  --brandSoft:rgba(var(--brand-rgb),.16);
  --brandSoftBorder:rgba(var(--brand-rgb),.30);

  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  --bs-border-color:var(--line);
  --bs-secondary-color:var(--muted);
  --bs-card-bg:var(--surface);
  --bs-tertiary-bg:var(--surface-2);
  --bs-light-bg-subtle:var(--surface-2);
}

/* =========================================================
   3) Base geral da página e tipografia
   ========================================================= */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.has-topbar{padding-top:var(--topbar-h)}
a{text-decoration:none}
img{max-width:100%;display:block}
.page{max-width:var(--container);margin:0 auto;padding:12px}
.container,.container-fluid{position:relative}
.text-secondary,.text-muted,.muted,.page-sub,.chart-subtitle,.kpi-help,.theme-card-sub,.form-text{color:var(--muted)!important}
.bg-light,.table-light{background:var(--surface-2)!important}
.border{border-color:var(--line)!important}
.shadow-sm{box-shadow:var(--shadow-sm)!important}
.rounded-4{border-radius:1rem!important}

.card,
.bs-soft-card,
.bs-page-card,
.bs-form-card,
.bs-chart-card,
.bs-table-card,
.citizen-card,
.kpi-card-bs,
.login-bootstrap-card{
  background:var(--surface);
  border:1px solid var(--line)!important;
  border-radius:var(--radius-md)!important;
  box-shadow:none!important;
}
.card-body{position:relative}
.bs-soft-card{padding:1rem}
.bs-soft-card:hover,
.kpi-card-bs:hover{box-shadow:none!important}
.login-bootstrap-page{
  min-height:100vh;
  margin:0;
  background:
    radial-gradient(circle at top left, rgba(var(--brand-rgb),.12), transparent 24%),
    radial-gradient(circle at bottom right, rgba(var(--brand-rgb),.08), transparent 22%),
    var(--bg);
}
.login-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(20px, 4vh, 44px) 16px;
}
.login-layout{
  width:min(1160px, 100%);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(15, 23, 42, .08);
}
.login-bootstrap-card{border-radius:28px!important}
.login-brand-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:84px;padding:.55rem 1rem;border-radius:999px;
  font-weight:600;letter-spacing:.03em;
  color:#fff;background:var(--brand);
  box-shadow:none;
}
.login-brand-badge-soft{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.22)}
.login-visual-panel{
  position:relative;
  min-height:640px;
  height:100%;
  padding:0;
  background:#061b3d;
  overflow:hidden;
}
.login-visual-panel-image{
  background-image:url("assets/login-atendimento.png");
  background-image:image-set(
    url("assets/login-atendimento.webp") type("image/webp") 1x,
    url("assets/login-atendimento.png") type("image/png") 1x
  );
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
}
.login-visual-panel-image::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(3, 18, 43, .10), rgba(3, 18, 43, .02));
}
.login-visual-content{position:relative;z-index:2;max-width:470px;color:#fff}
.login-visual-title{font-size:2.2rem;line-height:1.2;font-weight:700;margin:0 0 12px}
.login-visual-copy{font-size:1rem;line-height:1.7;color:rgba(255,255,255,.86);margin:0 0 28px}
.login-visual-card{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  padding:20px 22px;
  backdrop-filter:blur(4px);
}
.login-visual-card-label{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:8px;font-weight:600}
.login-visual-card-value{font-size:1.2rem;font-weight:600;margin-bottom:6px}
.login-visual-card-text{color:rgba(255,255,255,.82);line-height:1.6}
.login-form-panel{
  min-height:640px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px);
  background:var(--surface);
}
.login-form-wrap{width:min(420px, 100%)}
.login-form-title{font-size:2rem;line-height:1.2;font-weight:700;margin:0 0 10px;color:var(--text)}
.login-form-copy{color:var(--muted);line-height:1.7}
.login-alert{border-radius:14px}
@media (max-width: 1199.98px){
  .login-layout{width:min(980px,100%)}
  .login-visual-panel,.login-form-panel{min-height:560px}
}
@media (max-width: 991.98px){
  .login-shell{padding:20px 14px}
  .login-layout{width:min(520px,100%);border-radius:24px}
  .login-form-panel{min-height:auto;padding:34px 24px}
  .login-form-title{font-size:1.65rem}
}
@media (max-width: 575.98px){
  .login-bootstrap-page{background:var(--bg)}
  .login-shell{align-items:flex-start;padding:16px 12px}
  .login-layout{border-radius:20px}
  .login-form-panel{padding:28px 20px}
  .login-brand-badge{min-width:auto;padding:.45rem .85rem;font-size:.9rem}
  .login-form-title{font-size:1.45rem}
  .login-form-copy{font-size:.95rem}
  .login-form-wrap .form-control-lg,.login-form-wrap .btn-lg{min-height:48px;font-size:1rem}
}

/* =========================================================
   4) Botões e ações
   ========================================================= */

.btn{
  --bs-btn-border-radius:12px;
  --bs-btn-font-weight:600;
}
.btn-primary{
  --bs-btn-bg:var(--brand);
  --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brandDark);
  --bs-btn-hover-border-color:var(--brandDark);
  --bs-btn-active-bg:var(--brandDark);
  --bs-btn-active-border-color:var(--brandDark);
  box-shadow:none;
}
.btn-outline-primary{
  --bs-btn-color:var(--brandDark);
  --bs-btn-border-color:rgba(var(--brand-rgb),.28);
  --bs-btn-hover-bg:var(--brandSoft);
  --bs-btn-hover-color:var(--brandDark);
  --bs-btn-hover-border-color:rgba(var(--brand-rgb),.34);
  --bs-btn-active-bg:var(--brandSoft);
  --bs-btn-active-color:var(--brandDark);
  --bs-btn-active-border-color:rgba(var(--brand-rgb),.38);
}
.btn-light{
  --bs-btn-bg:var(--surface-2);
  --bs-btn-border-color:var(--line);
  --bs-btn-hover-bg:var(--surface-2);
  --bs-btn-hover-border-color:var(--line-strong);
}
.btn-ghost,
.btn.btn-ghost{
  background:var(--surface);
  color:var(--brandDark);
  border:1px solid rgba(var(--brand-rgb),.24);
  box-shadow:none;
}
.btn-ghost:hover{background:var(--brandSoft)}
.btn-top{
  display:inline-flex;align-items:center;gap:.45rem;
  border-radius:12px;
}

/* =========================================================
   5) Campos, selects, inputs e controles
   ========================================================= */

.form-control,.form-select,.form-control-color,
.control,.control.select,
.audit-filters .field input,
.audit-filters .field select,
.pillbox-control,.pillbox-search,.comp-select{
  min-height:46px;
  border-radius:12px!important;
  border:1px solid var(--line)!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  box-shadow:none!important;
}
.form-control::placeholder{color:var(--muted)}
.form-control:focus,.form-select:focus,.pillbox-control:focus-within,.pillbox-search:focus,.comp-select:focus{
  border-color:rgba(var(--brand-rgb),.42)!important;
  box-shadow:0 0 0 .25rem rgba(var(--brand-rgb),.12)!important;
}
.input-group-text{
  background:var(--surface-2)!important;
  color:var(--muted)!important;
  border-color:var(--line)!important;
}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}
.form-control-color{padding:.4rem;min-width:72px}

/* =========================================================
   6) Topo / navbar superior
   ========================================================= */

.topbar,
.topbar.bs-main-navbar{
  background:var(--brand);
  border-bottom:1px solid rgba(255,255,255,.16);
  backdrop-filter:none;
  transition:transform .22s ease, background .22s ease;
  z-index:1035;
}
:root[data-ui-theme="dark"] .topbar,
:root[data-ui-theme="dark"] .topbar.bs-main-navbar{
  background:var(--brand);
}
.topbar.is-hidden{transform:translateY(-110%)}
.topbar.is-shadow{box-shadow:none}
.topbar .container-fluid{max-width:var(--container)}
.topbar-inner{
  min-height:78px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:.7rem 1rem;
}
.topbar-left,.topbar-center,.topbar-right{display:flex;align-items:center;gap:.7rem}
.topbar-center{flex:1;justify-content:center;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.85rem}
.logo,
.logo-img{
  width:46px;height:46px;border-radius:14px;flex:0 0 46px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.12);
  color:#fff;font-weight:700;box-shadow:none;
}
.logo-img{object-fit:cover;background:var(--surface-2)}
.brandtext .bt1{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;
  color:var(--muted);text-transform:uppercase;
}
.brandtext .bt2{font-size:1rem;font-weight:600;color:var(--text)}
.chip,.chiplink{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:38px;padding:.45rem .85rem;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);font-weight:600;
}
.chip{
  background:var(--brand);
  color:#fff;border-color:rgba(255,255,255,.18);
}
.comp-form{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  padding:.35rem .55rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);
}
.comp-label{font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.04em}
.comp-select{min-height:38px;padding:.35rem 2rem .35rem .75rem;background-position:right .65rem center}
.btn-ok{
  border:0;background:var(--brand);color:#fff;
  min-height:38px;padding:.5rem .95rem;border-radius:999px;font-weight:700;
}
.nav-toggle,.nav-close{min-width:38px;min-height:38px}

/* =========================================================
   7) Estrutura principal, menu lateral e conteúdo
   ========================================================= */

.shell{
  display:flex;gap:16px;
  max-width:var(--container);
  margin:0 auto;
  padding:14px;
  min-height:calc(100vh - var(--topbar-h));
}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  position:sticky;top:calc(var(--topbar-h) + 14px);height:fit-content;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:none;
  padding:14px 12px;
}
.content{flex:1;min-width:0;padding:8px 4px 16px}
.sidebar-head{
  display:none;align-items:center;justify-content:space-between;
  gap:1rem;padding:.25rem .25rem .85rem;
}
.sidebar-title{font-size:1rem;font-weight:700}
.side-group{margin:.9rem 0 1rem}
.side-group-title{
  margin:0 .6rem .45rem;
  color:var(--muted);font-size:.76rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}
.side-link{
  display:flex;align-items:center;gap:.7rem;
  padding:.82rem .95rem;margin:.2rem 0;
  border-radius:16px;border:1px solid transparent;
  color:var(--text);font-weight:600;transition:.18s ease;
}
.side-link i{font-size:1.05rem;color:var(--muted)}
.side-link:hover{
  color:var(--text);
  background:var(--surface-2);
  border-color:var(--line);
}
.side-link.active,.side-cta{
  background:var(--brand);
  color:#fff!important;border-color:var(--brand);
  box-shadow:none;
}
.side-link.active i,.side-cta i{color:#fff}
.sidebar-backdrop{display:none}

.bs-page-title-card{
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(var(--brand-rgb),.06), transparent 90%),
    var(--surface)!important;
}
.page-title{color:var(--text)!important;font-weight:600!important;font-size:1.7rem;line-height:1.2;margin:0}
.page-head,.page-head-main{min-width:0}
.page-period-bar{background:var(--surface-2)!important;border-color:var(--line)!important}
.page-period-value{color:var(--brandDark)!important}

.kpi-card-bs{
  padding:1rem 1.05rem;
  min-height:122px;
  position:relative;
  overflow:hidden;
}
.kpi-card-bs::after{display:none!important;content:none!important}
.kpi-card-bs.is-clickable{cursor:pointer}
.kpi-label{font-size:.76rem;font-weight:600;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.kpi-value{font-size:1.85rem;font-weight:600;line-height:1.05;color:var(--text)}
.kpi-help{font-size:.85rem;margin-top:.35rem}
.bs-chart-card{padding:1rem}
.chart-title,.section-title{font-size:1rem;font-weight:600;color:var(--text)}
.chart-subtitle{font-size:.9rem}
.chart-wrap,.chart-mini,.chart-big{
  border-radius:16px;background:var(--surface-2);
  border:1px dashed var(--line);
  padding:1rem;min-height:220px;
}
.chart-big{min-height:280px}

.bs-toolbar-card,.citizen-topbar{
  border-radius:var(--radius-md)!important;
  background:var(--surface)!important;
}
.bs-entity-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem .95rem;border-radius:999px;
  background:var(--brandSoft);color:var(--brandDark);
  border:1px solid var(--brandSoftBorder);font-weight:700;
}
/* =========================================================
   9) Formulários de cidadão e atendimento
   ========================================================= */

.citizen-card-head,
.citizen-card-head-list{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px solid var(--line);
}
.citizen-card-head h2,.citizen-card-head-list h2,.citizen-card-head h5,.citizen-card-head-list h5{margin:0;font-size:1.2rem;font-weight:600;line-height:1.25}
.citizen-form{display:flex;flex-wrap:wrap;gap:0}
.field{grid-column:span 4}
.field.full,.citizen-form-actions.full{grid-column:1/-1}
.field label,.filter-card .field label,.audit-filters .field label{
  display:block;margin:0 0 .45rem;font-weight:600;color:var(--muted);font-size:.88rem;
}
.citizen-form-actions{display:flex;justify-content:flex-end;gap:.75rem;flex-wrap:wrap}
.citizen-alert{
  margin-bottom:1rem;padding:1rem 1.1rem;
  border-radius:16px!important;
}
.citizen-alert .card-body{padding:0!important}
.citizen-alert-actions{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:.75rem}
.citizen-table td,.citizen-table th,.compact-table td,.compact-table th{white-space:nowrap}
.muted-cell{color:var(--muted)}
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.service-grid-tight{grid-template-columns:.8fr 1.2fr}
.service-grid-full{grid-column:1 / -1}

/* =========================================================
   10) Auditoria, tabelas e filtros de consulta
   ========================================================= */

.audit-filters{padding:1rem}
.audit-filters-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;align-items:end}
.audit-filters .field-actions{grid-column:span 2}
.audit-summary{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:.75rem 0 1rem}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px}
.audit-table,.table{
  --bs-table-bg:transparent;
  --bs-table-color:var(--text);
  --bs-table-border-color:var(--line);
  --bs-table-hover-bg:var(--brandSoft);
}
.table thead th,
.bs-table-clean thead th{
  background:var(--surface-2)!important;
  color:var(--muted)!important;
  font-weight:600;
  border-bottom-color:var(--line)!important;
  text-transform:uppercase;
  font-size:.76rem;
  letter-spacing:.05em;
}
.table > :not(caption) > * > *{padding:.88rem .9rem;background:transparent}
.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:.88rem
}
.pagination-bar{display:flex;justify-content:center;margin-top:1rem}
.page-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 .85rem;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);color:var(--text);font-weight:600;
}
.page-chip:hover{background:var(--surface-2);color:var(--text)}
.page-chip.is-active{background:var(--brand);color:#fff;border-color:var(--brand)}
.page-chip.is-disabled{pointer-events:none;opacity:.45}

.table-top{display:flex;flex-direction:column;gap:1rem}
.table-filters{display:block}
.filter-card,
.bs-filter-form{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;
  padding:1rem;border:1px solid var(--line);border-radius:20px;background:var(--surface);
}
.filter-section{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end}
.field.wide{min-width:min(100%,320px)}
.field.narrow{min-width:110px}
.control{min-width:160px;padding:.7rem .9rem}
.actions,.table-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.segmented{
  display:flex;flex-wrap:wrap;gap:.5rem;
  padding:.35rem;border:1px solid var(--line);border-radius:16px;background:var(--surface-2);
}
.segmented input{display:none}
.segmented label{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:42px;padding:.65rem .95rem;margin:0;
  border-radius:12px;color:var(--muted);font-weight:600;cursor:pointer;
}
.segmented input:checked + label{
  background:var(--brand);
  color:#fff;box-shadow:none;
}
.sep{
  display:flex;align-items:center;justify-content:center;
  min-width:36px;height:46px;color:var(--muted);font-weight:700;
}
.badge-status{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.38rem .7rem;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);font-weight:700;
}
.dot{width:8px;height:8px;border-radius:999px;background:var(--brand);display:inline-block}

/* =========================================================
   11) Tela Tema da Entidade / preferências visuais
   ========================================================= */

.theme-card{padding:1.35rem;border-radius:24px;max-width:1060px}
.theme-card-head{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin-bottom:1.1rem;padding-bottom:1rem;border-bottom:1px solid var(--line)
}
.theme-card-title{font-size:1.05rem;font-weight:600;color:var(--text)}
.theme-preview{
  display:flex;align-items:center;gap:.75rem;
  padding:.7rem .9rem;border-radius:16px;background:var(--surface-2);border:1px solid var(--line)
}
.theme-preview-swatch{
  width:36px;height:36px;border-radius:12px;border:1px solid rgba(0,0,0,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)
}
.theme-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.9rem;
}
.theme-option{
  display:flex;align-items:center;gap:.7rem;
  border:1px solid var(--line);background:var(--surface);
  border-radius:16px;padding:.9rem 1rem;cursor:pointer;transition:.18s ease;
}
.theme-option:hover,.theme-option.is-active{
  border-color:rgba(var(--brand-rgb),.32);
  background:var(--brandSoft);
  box-shadow:none;
}
.theme-option input{display:none}
.theme-option-swatch{width:22px;height:22px;border-radius:999px;border:2px solid rgba(255,255,255,.72);box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.theme-option-code{font-weight:600;letter-spacing:.02em}
.theme-custom-row{
  display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:1rem;margin-top:1.1rem;
}
.theme-color-input{max-width:100px}
.theme-mode-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.9rem;
}
.theme-mode-option{
  display:flex;align-items:center;gap:.75rem;
  padding:.95rem 1rem;border-radius:16px;border:1px solid var(--line);
  background:var(--surface);cursor:pointer
}
.theme-mode-option.is-active{border-color:rgba(var(--brand-rgb),.34);background:var(--brandSoft)}
.theme-mode-icon{
  width:38px;height:38px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line)
}

.badge.text-bg-light{background:var(--surface-2)!important;color:var(--text)!important;border-color:var(--line)!important}
.badge.text-bg-warning-subtle{background:rgba(245,158,11,.16)!important}
.badge.text-bg-success,
.badge.rounded-pill.text-bg-success{background:rgba(22,163,74,.14)!important;color:#15803d!important}
.badge.rounded-pill.text-bg-danger{background:rgba(220,38,38,.14)!important;color:#b91c1c!important}
.alert{
  border-radius:16px!important;
  border-color:var(--line)!important;
  background:var(--surface)!important;
  color:var(--text)!important;
}
.alert-success{border-left:4px solid #16a34a!important}
.alert-danger{border-left:4px solid #dc2626!important}
.alert-light{background:var(--surface-2)!important}

.sr-native-select[data-pillbox-select]{
  position:absolute!important;
  opacity:0!important;
  inset:0 auto auto 0;
  width:1px!important;height:1px!important;
  pointer-events:none!important;
}
.pillbox-select-wrap,.bs-pillbox-wrap{position:relative}
.pillbox{
  position:relative;
  width:100%;
}
.pillbox-control{
  display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;
  padding:.45rem .75rem;cursor:pointer;
}
.pillbox-tags{display:flex;flex-wrap:wrap;gap:.45rem;flex:1}
.pillbox-placeholder{color:var(--muted)}
.pillbox-tag{
  display:inline-flex;align-items:center;gap:.45rem;
  min-height:31px;padding:.3rem .65rem;border-radius:999px;
  background:var(--brandSoft);border:1px solid var(--brandSoftBorder);
  color:var(--brandDark);font-weight:700;font-size:.86rem;
}
.pillbox-tag-remove{
  width:22px;height:22px;border-radius:999px;border:0;
  background:transparent;color:inherit;cursor:pointer
}
.pillbox-arrow{margin-left:auto;transition:transform .18s ease;color:var(--muted)}
.pillbox.open .pillbox-arrow{transform:rotate(180deg)}
.pillbox-dropdown{
  position:absolute;left:0;right:0;top:calc(100% + 8px);
  z-index:25;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow-md);padding:.75rem
}
.pillbox-search{width:100%;padding:.65rem .8rem}
.pillbox-list{max-height:280px;overflow:auto;margin-top:.75rem}
.pillbox-option{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  width:100%;padding:.7rem .85rem;border-radius:12px;border:0;
  background:transparent;color:var(--text);cursor:pointer;text-align:left
}
.pillbox-option:hover,.pillbox-option.is-selected{background:var(--brandSoft)}
.pillbox-option-check{color:var(--brandDark);font-weight:700}
.pillbox-empty{padding:.85rem;color:var(--muted);text-align:center}

.status-filter-row .btn{min-width:130px}
.history-stat{
  border:1px solid var(--line);border-radius:16px;padding:1rem;background:var(--surface-2)
}
.footerbar{
  max-width:var(--container);
  margin:0 auto 1rem;
  padding:0 1rem;
  color:var(--muted);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.bi.text-primary,.text-primary{color:var(--brand)!important}
.bg-primary-subtle{background:var(--brandSoft)!important}
.border-primary-subtle{border-color:var(--brandSoftBorder)!important}

/* =========================================================
   12) Responsividade
   ========================================================= */

@media (max-width: 1199.98px){
  .service-grid,.service-grid-tight{grid-template-columns:1fr}
  .audit-filters-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 991.98px){
  .topbar-center{display:none!important}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;height:auto;
    width:min(88vw,320px);max-width:320px;border-radius:0 24px 24px 0;
    transform:translateX(-104%);transition:transform .22s ease;z-index:1041;
    top:0;padding-top:1rem;
  }
  .sidebar-head{display:flex}
  .sidebar-backdrop{
    display:block;position:fixed;inset:0;background:rgba(15,23,42,.42);
    opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1040;
  }
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .sidebar-backdrop{opacity:1;pointer-events:auto}
  .content{padding:0}
  .field{grid-column:span 6}
  .audit-filters-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .theme-custom-row{grid-template-columns:1fr}
}
@media (max-width: 767.98px){
  .shell{padding:12px}
  .topbar-inner{padding:.6rem .75rem}
  .brandtext .bt2{font-size:.92rem}
  .field,.audit-filters .field-actions{grid-column:1/-1}
  .filter-card,.bs-filter-form,.filter-section{flex-direction:column;align-items:stretch}
  .actions,.table-actions,.citizen-form-actions{width:100%}
  .actions > *, .table-actions > *, .citizen-form-actions > *{width:100%}
  .comp-form{display:none}
  .theme-grid,.theme-mode-grid{grid-template-columns:1fr}
  .page{padding:10px}
}

@media (prefers-color-scheme: dark){
  :root:not([data-ui-theme]){
    color-scheme: dark;
    --bg:#0b1220;
    --surface:#121b2b;
    --surface-2:#162234;
    --text:#e6edf7;
    --muted:#9fb0c7;
    --line:#243348;
    --line-strong:#30435d;
    --shadow-sm:none;
    --shadow-md:none;
    --brandSoft:rgba(var(--brand-rgb),.16);
    --brandSoftBorder:rgba(var(--brand-rgb),.30);
  }
}

.topbar .brandtext .bt1,.topbar .brandtext .bt2{color:#fff}
.topbar .nav-toggle,.topbar .nav-close{border-color:rgba(255,255,255,.28)!important;color:#fff!important;background:transparent!important}
.topbar .chip,.topbar .chiplink,.topbar .comp-form,.topbar .btn-top,.topbar .comp-select,.topbar .btn-ok{box-shadow:none!important}
.topbar .chip{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.18)}
.topbar .chiplink,.topbar .comp-form{background:rgba(255,255,255,.96);color:var(--text);border-color:rgba(255,255,255,.38)}
.topbar .comp-label{color:rgba(255,255,255,.82)}
.topbar .btn-outline-secondary,.topbar .btn-outline-primary{--bs-btn-color:#fff;--bs-btn-border-color:rgba(255,255,255,.38);--bs-btn-hover-bg:rgba(255,255,255,.14);--bs-btn-hover-border-color:rgba(255,255,255,.48);--bs-btn-hover-color:#fff;--bs-btn-active-bg:rgba(255,255,255,.18);--bs-btn-active-border-color:rgba(255,255,255,.52);--bs-btn-active-color:#fff;background:transparent}
.topbar .btn-ok{background:#fff;color:var(--brandDark);font-weight:600}
.topbar .logo,.topbar .logo-img{background:rgba(10,24,44,.22);box-shadow:none;border:1px solid rgba(255,255,255,.16)}

.sidebar,.table-wrap,.filter-card,.bs-filter-form,.theme-option,.theme-mode-option,.history-stat,.theme-preview,.theme-mode-icon,.page-chip,.badge-status,.segmented,.pillbox-dropdown,.chart-wrap,.chart-mini,.chart-big,.comp-form,.chip,.chiplink{box-shadow:none!important}
.btn,.btn-primary,.btn-outline-primary,.btn-outline-secondary,.btn-light,.btn-ghost{box-shadow:none!important}
.side-link,.table,.form-label,label,.page-sub,.kpi-help,.chart-subtitle,.theme-card-sub{font-weight:400}
.side-group-title,.kpi-label,.table thead th,.bs-table-clean thead th,.brandtext .bt1,.comp-label{font-weight:600}
.card-title,h1,h2,h3,h4,h5,h6,strong,b{font-weight:600}
.form-label,.field label,.filter-card .field label,.audit-filters .field label{font-size:.84rem;font-weight:500;color:var(--muted)}
.table > :not(caption) > * > *{padding:.78rem .85rem}
.page-sub,.kpi-help,.chart-subtitle{font-size:.92rem}
.btn{font-size:.95rem;line-height:1.2;padding:.7rem 1rem}
.side-link{font-size:.98rem}
.brandtext .bt2{font-size:1.02rem;font-weight:600}


/* =========================================================
   13) Ajustes finais de padronização visual
   ========================================================= */
h1,.h1{font-size:2rem;line-height:1.15;font-weight:600;margin-bottom:.4rem}
h2,.h2{font-size:1.45rem;line-height:1.2;font-weight:600;margin-bottom:.35rem}
h3,.h3{font-size:1.2rem;line-height:1.25;font-weight:600}
h4,.h4{font-size:1.05rem;line-height:1.25;font-weight:600}
h5,.h5,h6,.h6{font-size:1rem;line-height:1.3;font-weight:600}
p{margin-bottom:0;color:var(--muted)}
.card-body > p + p{margin-top:.35rem}
.page-sub{max-width:900px}
.kpi-card-bs,.bs-chart-card,.citizen-card,/* =========================================================
   8) Cards, blocos e cabeçalhos de página
   ========================================================= */

.bs-page-title-card,.bs-toolbar-card,.filter-card,.bs-filter-form,.table-wrap,.sidebar,.theme-card{box-shadow:none!important;background-image:none!important}
.chart-wrap,.chart-mini,.chart-big,.page-period-bar,.segmented,.history-stat,.theme-preview,.theme-mode-icon,.badge-status{box-shadow:none!important}
.card::before,.card::after,.bs-soft-card::before,.bs-soft-card::after,.bs-page-card::before,.bs-page-card::after,.bs-form-card::before,.bs-form-card::after,.bs-chart-card::before,.bs-chart-card::after,.bs-table-card::before,.bs-table-card::after,.citizen-card::before,.citizen-card::after,.kpi-card-bs::before,.kpi-card-bs::after{display:none!important;content:none!important}
.citizen-form.row{margin-left:0!important;margin-right:0!important}
.citizen-form > [class*='col-']{padding-left:calc(var(--bs-gutter-x,.75rem) * .5);padding-right:calc(var(--bs-gutter-x,.75rem) * .5)}
.citizen-card-head,.citizen-card-head-list{margin-bottom:.85rem;padding-bottom:.8rem}
.citizen-card-head p,.citizen-card-head-list p{margin-top:.35rem;font-size:.94rem;color:var(--muted)}
.table thead th,.bs-table-clean thead th{font-size:.74rem;font-weight:600}
.table tbody td{font-size:.96rem;vertical-align:middle}
.table-inline-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.history-chip{display:inline-flex;align-items:center;padding:.28rem .6rem;border-radius:999px;background:var(--brandSoft);border:1px solid var(--brandSoftBorder);color:var(--brandDark);font-size:.8rem;font-weight:600}
.history-sub{margin-top:.25rem;font-size:.82rem;color:var(--muted)}
.status-edit-box summary{list-style:none}
.status-edit-box summary::-webkit-details-marker{display:none}
.history-edit-form,.status-inline-form{display:grid;gap:.75rem;margin-top:.75rem;padding:.85rem;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.history-edit-form textarea,.status-inline-form textarea{width:100%;min-height:88px;padding:.7rem .8rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);resize:vertical}
.status-options{display:flex;gap:.6rem;flex-wrap:wrap}
.status-option{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .75rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.9rem;color:var(--text)}
.compact-history-line{display:grid;grid-template-columns:minmax(180px,1.2fr) auto auto auto minmax(220px,2fr) auto;gap:.75rem;align-items:center}
.compact-history-obs{color:var(--muted);font-size:.9rem}
.history-badge{display:inline-flex;align-items:center;padding:.28rem .55rem;border-radius:999px;font-size:.8rem;font-weight:600;border:1px solid var(--line);background:var(--surface-2)}
.history-badge.is-progress{background:rgba(var(--brand-rgb),.08);border-color:var(--brandSoftBorder);color:var(--brandDark)}
.history-badge.is-done{background:rgba(22,163,74,.10);border-color:rgba(22,163,74,.18);color:#15803d}
.actions > .btn,.actions > .btn-primary:not(.btn),.table-actions > .btn,.table-actions > .btn-primary:not(.btn){display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:46px;padding:.7rem 1rem;border-radius:12px;border:1px solid var(--brand);background:var(--brand);color:#fff;font-weight:600;text-decoration:none}
.actions > .btn-primary:not(.btn):hover,.table-actions > .btn-primary:not(.btn):hover{background:var(--brandDark);border-color:var(--brandDark);color:#fff}
.filter-card .field,.bs-filter-form .field{min-width:160px;flex:1 1 180px}
.filter-card .field.wide,.bs-filter-form .field.wide{flex:1 1 240px}
.filter-card .field.narrow,.bs-filter-form .field.narrow{flex:0 0 110px;min-width:110px}
.filter-card .actions,.bs-filter-form .actions{margin-left:auto}
@media (max-width: 1199.98px){
  .compact-history-line{grid-template-columns:1fr 1fr;align-items:flex-start}
}
@media (max-width: 767.98px){
  h1,.h1{font-size:1.7rem}
  h2,.h2{font-size:1.3rem}
  .page-title{font-size:1.45rem}
  .compact-history-line{grid-template-columns:1fr}
}


/* =========================================================
   14) Revisão fina: alinhamento tela por tela
   ========================================================= */
.topbar .container-fluid.topbar-inner,
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:nowrap;
}
.topbar-left,.topbar-center,.topbar-right{flex-wrap:nowrap;min-width:0}
.topbar-left{flex:0 1 auto}
.topbar-center{flex:1 1 auto;justify-content:center;gap:.55rem;overflow:hidden}
.topbar-right{flex:0 0 auto;gap:.55rem!important;justify-content:flex-end;white-space:nowrap}
.topbar-right .btn,.topbar-right .btn-top{padding:.58rem .9rem;font-size:.92rem}
.topbar .chip,.topbar .chiplink,.topbar .comp-form{min-height:40px}
.topbar .chip,.topbar .chiplink{padding:.45rem .85rem;font-size:.94rem}
.topbar .comp-form{gap:.45rem;padding:.28rem .45rem}
.topbar .comp-select{min-height:40px;padding:.35rem 1.85rem .35rem .75rem;font-size:.95rem}
.topbar .btn-ok{min-height:40px;padding:.45rem .95rem}
.topbar .brand{min-width:0}
.topbar .brandtext .bt1{font-size:.75rem;opacity:.9}
.topbar .brandtext .bt2{font-size:1rem;line-height:1.1;white-space:nowrap}
.topbar .chiplink{max-width:240px;overflow:hidden;text-overflow:ellipsis}

.page{padding:10px 12px}
.shell{gap:14px;padding:12px 14px}
.sidebar{padding:12px 10px;border-radius:22px}
.content{padding:6px 2px 14px}
.side-group{margin:.75rem 0 .9rem}
.side-group-title{margin:0 .55rem .35rem;font-size:.74rem}
.side-link{padding:.78rem .9rem;margin:.16rem 0;border-radius:15px;font-size:.96rem;font-weight:500}
.side-link i{font-size:1rem}

.page-title{font-size:1.95rem;font-weight:600;letter-spacing:-.01em}
.page-sub{font-size:.96rem;line-height:1.45}
.chart-title,.section-title{font-size:1.02rem;font-weight:600}
.chart-subtitle{font-size:.92rem;line-height:1.45}
.kpi-card-bs,
a.kpi-card-bs{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  width:100%;
  height:100%;
  min-height:116px;
  padding:.95rem 1rem;
  text-decoration:none;
  gap:.2rem;
}
.kpi-label{font-size:.83rem;font-weight:600;letter-spacing:.03em;line-height:1.25}
.kpi-value{font-size:1.95rem;font-weight:600;line-height:1;margin:.05rem 0}
.kpi-help{font-size:.88rem;line-height:1.45;margin-top:.1rem}
.row.g-3 > [class*='col-'] > .kpi-card-bs,
.row.g-3 > [class*='col-'] > a.kpi-card-bs{height:100%}

.bs-page-title-card,.bs-soft-card,.bs-chart-card,.citizen-card,.theme-card{padding:1rem 1.05rem}
.citizen-card-head,
.citizen-card-head-list{margin-bottom:.8rem;padding-bottom:.75rem}
.citizen-card-head h2,.citizen-card-head-list h2,.citizen-card-head h5,.citizen-card-head-list h5{font-size:1.18rem;font-weight:600}
.citizen-card-head p,.citizen-card-head-list p{font-size:.95rem;line-height:1.45}

.citizen-form{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:1rem;
  align-items:start;
}
.field{grid-column:span 4;min-width:0}
.field.full,.citizen-form-actions.full{grid-column:1 / -1}
.citizen-form .field input,
.citizen-form .field select,
.citizen-form .field textarea,
.filter-card .field input,
.filter-card .field select,
.filter-card .field textarea,
.bs-filter-form .field input,
.bs-filter-form .field select,
.bs-filter-form .field textarea,
input.control,
select.control,
textarea.control{
  width:100%;
  min-height:46px;
  padding:.7rem .85rem;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  box-shadow:none;
}
textarea.control,
.citizen-form .field textarea{min-height:110px}
.citizen-form-actions{margin-top:.2rem}
.citizen-form-actions .btn,.citizen-form-actions .btn-ghost{min-height:46px}

.filter-card,.bs-filter-form{gap:.85rem;padding:1rem}
.filter-card .field,.bs-filter-form .field{flex:1 1 190px;min-width:170px}
.filter-card .field.wide,.bs-filter-form .field.wide{flex:1 1 250px}
.filter-card .field.narrow,.bs-filter-form .field.narrow{flex:0 0 120px;min-width:120px}
.filter-card .actions,.bs-filter-form .actions{margin-left:auto;align-self:flex-end}
.segmented{padding:.28rem;gap:.35rem;border-radius:14px}
.segmented label{min-height:42px;padding:.62rem .9rem;font-size:.93rem;font-weight:600}
.sep{min-width:22px;height:46px}

.table-top{gap:.9rem}
.table-actions{gap:.65rem!important}
.table-wrap,.table-responsive{border-radius:16px}
.table thead th,.bs-table-clean thead th{font-size:.75rem;padding:.78rem .85rem}
.table tbody td{font-size:.95rem;line-height:1.4}

.compact-history-line{grid-template-columns:minmax(160px,1.2fr) auto auto auto minmax(200px,2fr) auto;gap:.65rem}
.badge-status{font-size:.9rem;font-weight:600}
.history-badge,.history-chip{font-weight:600}

.card-title,h1,h2,h3,h4,h5,h6,strong,b{font-weight:600}
.table thead th,strong .table thead th{font-weight:600}

@media (min-width: 1200px){
  .topbar-center{display:flex!important}
}
@media (max-width: 1399.98px){
  .topbar .chiplink{max-width:180px}
  .topbar .brandtext .bt2{font-size:.96rem}
  .topbar-right .btn,.topbar-right .btn-top{padding:.55rem .78rem;font-size:.9rem}
}
@media (max-width: 1199.98px){
  .field{grid-column:span 6}
  .filter-card .actions,.bs-filter-form .actions{margin-left:0}
}
@media (max-width: 991.98px){
  .topbar-right{gap:.45rem!important}
  .topbar-right .btn,.topbar-right .btn-top{padding:.5rem .72rem;font-size:.88rem}
  .citizen-form{grid-template-columns:repeat(6,minmax(0,1fr))}
  .field{grid-column:span 3}
}
@media (max-width: 767.98px){
  .citizen-form{grid-template-columns:1fr}
  .field,.field.full,.citizen-form-actions.full{grid-column:1 / -1}
}


/* =========================================================
   15) Correções finais específicas
   - Novo cadastro
   - Filtro do Comparativo
   - Filtro do Mensal
   ========================================================= */

/* Novo cadastro: mantém o formulário no esquadro e evita campos espremidos */
.citizen-form.row{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:1rem!important;
  align-items:start;
}
.citizen-form.row > [class*="col-"]{
  width:auto!important;
  max-width:none!important;
  flex:0 0 auto!important;
  min-width:0;
  padding-left:0!important;
  padding-right:0!important;
}
.citizen-form.row > :nth-child(1){grid-column:1 / -1}
.citizen-form.row > :nth-child(2),
.citizen-form.row > :nth-child(3){grid-column:span 6}
.citizen-form.row > :nth-child(4),
.citizen-form.row > :nth-child(5){grid-column:span 5}
.citizen-form.row > :nth-child(6){grid-column:span 2}
.citizen-form.row > :nth-child(7){grid-column:1 / -1;display:flex;justify-content:flex-end}
.citizen-form.row .btn{min-width:150px}

/* Filtro do comparativo: fecha o layout em uma linha/grade mais alinhada */
#comparativoFilter{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:.9rem 1rem!important;
  align-items:end;
}
#comparativoFilter > .field.wide:first-of-type{grid-column:1 / span 4;min-width:0}
#comparativoFilter > .filter-section[data-show-for="servicos"],
#comparativoFilter > .filter-section[data-show-for="meses"]{
  grid-column:5 / -1;
  display:grid!important;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:.9rem 1rem!important;
  align-items:end;
}
#comparativoFilter > .filter-section[data-show-for="servicos"] .field.wide,
#comparativoFilter > .filter-section[data-show-for="meses"] .field.wide{grid-column:span 2;min-width:0}
#comparativoFilter > .filter-section[data-show-for="meses"] .field.narrow{grid-column:span 1;min-width:0}
#comparativoFilter > .filter-section[data-show-for="servicos"] .field:not(.wide):not(.narrow),
#comparativoFilter > .filter-section[data-show-for="meses"] .field:not(.wide):not(.narrow){grid-column:span 2;min-width:0}
#comparativoFilter > .filter-section .actions{grid-column:span 2;justify-content:flex-end;margin-left:0}
#comparativoFilter .sep{align-self:end;justify-self:center}

/* Filtro do mensal: reduz espaços e encaixa os controles no mesmo padrão */
#mensalFilter{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:.9rem 1rem!important;
  align-items:end;
}
#mensalFilter > .field.wide:first-of-type{grid-column:1 / span 8;min-width:0}
#mensalFilter > .filter-section[data-show-for]{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:.9rem 1rem!important;
  align-items:end;
}
#mensalFilter > .filter-section[data-show-for="mes,servico,bairro,cidade"]{grid-column:9 / span 4}
#mensalFilter > .filter-section[data-show-for="ano"]{grid-column:9 / span 2}
#mensalFilter > .filter-section[data-show-for="servico"],
#mensalFilter > .filter-section[data-show-for="bairro"],
#mensalFilter > .filter-section[data-show-for="cidade"],
#mensalFilter > .filter-section[data-show-for="periodo"]{grid-column:1 / span 10}
#mensalFilter > .filter-section .field{grid-column:span 4;min-width:0}
#mensalFilter > .filter-section .field.narrow{grid-column:span 3;min-width:0}
#mensalFilter > .filter-section .field.wide{grid-column:span 6;min-width:0}
#mensalFilter > .actions{grid-column:11 / -1;justify-content:flex-end;margin-left:0}

@media (max-width: 1399.98px){
  #comparativoFilter > .field.wide:first-of-type{grid-column:1 / -1}
  #comparativoFilter > .filter-section[data-show-for="servicos"],
  #comparativoFilter > .filter-section[data-show-for="meses"]{grid-column:1 / -1;grid-template-columns:repeat(12,minmax(0,1fr))}
  #comparativoFilter > .filter-section[data-show-for="servicos"] .field.wide{grid-column:span 3}
  #comparativoFilter > .filter-section[data-show-for="servicos"] .field:not(.wide):not(.narrow){grid-column:span 3}
  #comparativoFilter > .filter-section[data-show-for="meses"] .field.wide{grid-column:span 3}
  #comparativoFilter > .filter-section[data-show-for="meses"] .field.narrow{grid-column:span 2}
  #comparativoFilter > .filter-section .actions{grid-column:span 3}

  #mensalFilter > .field.wide:first-of-type{grid-column:1 / -1}
  #mensalFilter > .filter-section[data-show-for="mes,servico,bairro,cidade"],
  #mensalFilter > .filter-section[data-show-for="ano"],
  #mensalFilter > .filter-section[data-show-for="servico"],
  #mensalFilter > .filter-section[data-show-for="bairro"],
  #mensalFilter > .filter-section[data-show-for="cidade"],
  #mensalFilter > .filter-section[data-show-for="periodo"]{grid-column:1 / -1}
  #mensalFilter > .actions{grid-column:1 / -1;justify-content:flex-end}
}

@media (max-width: 991.98px){
  .citizen-form.row{grid-template-columns:repeat(6,minmax(0,1fr))}
  .citizen-form.row > :nth-child(2),
  .citizen-form.row > :nth-child(3),
  .citizen-form.row > :nth-child(4),
  .citizen-form.row > :nth-child(5){grid-column:span 3}
  .citizen-form.row > :nth-child(6){grid-column:span 6}

  #comparativoFilter,
  #mensalFilter{grid-template-columns:1fr}
  #comparativoFilter > .field.wide:first-of-type,
  #comparativoFilter > .filter-section[data-show-for="servicos"],
  #comparativoFilter > .filter-section[data-show-for="meses"],
  #mensalFilter > .field.wide:first-of-type,
  #mensalFilter > .filter-section[data-show-for],
  #mensalFilter > .actions{grid-column:1 / -1}
  #comparativoFilter > .filter-section[data-show-for="servicos"],
  #comparativoFilter > .filter-section[data-show-for="meses"],
  #mensalFilter > .filter-section[data-show-for]{grid-template-columns:repeat(6,minmax(0,1fr))}
  #comparativoFilter > .filter-section .field,
  #mensalFilter > .filter-section .field{grid-column:span 3}
  #comparativoFilter > .filter-section .actions,
  #mensalFilter > .actions{grid-column:1 / -1;justify-content:stretch}
  #comparativoFilter > .filter-section .actions > *,
  #mensalFilter > .actions > *{width:100%}
}

@media (max-width: 767.98px){
  .citizen-form.row{grid-template-columns:1fr}
  .citizen-form.row > *{grid-column:1 / -1!important}
  #comparativoFilter > .filter-section[data-show-for="servicos"],
  #comparativoFilter > .filter-section[data-show-for="meses"],
  #mensalFilter > .filter-section[data-show-for]{grid-template-columns:1fr}
  #comparativoFilter > .filter-section .field,
  #mensalFilter > .filter-section .field{grid-column:1 / -1!important}
}


/* ============================
   FILTROS COMPACTOS PADRONIZADOS
   comparativo / mensal / auditoria
   ============================ */
.table-top{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:flex-end;
  justify-content:space-between;
}
.table-top > .table-filters{flex:1 1 980px;min-width:0}
.table-top > .table-actions{
  display:flex!important;
  flex-wrap:wrap;
  gap:10px!important;
  align-items:center!important;
  justify-content:flex-end;
}

#comparativoFilter,
#mensalFilter,
.audit-filters-grid{
  row-gap:.85rem!important;
  column-gap:.9rem!important;
  align-items:end!important;
}

#comparativoFilter .field,
#mensalFilter .field,
.audit-filters-grid .field{min-width:0}

#comparativoFilter .field label,
#mensalFilter .field label,
.audit-filters-grid .field label{
  margin-bottom:.38rem;
  white-space:nowrap;
}

#comparativoFilter .control,
#mensalFilter .control,
.audit-filters-grid input,
.audit-filters-grid select{
  min-height:44px;
}

#comparativoFilter .actions,
#mensalFilter .actions,
.audit-filters-grid .field-actions{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
}

#comparativoFilter{
  grid-template-columns:repeat(16,minmax(0,1fr))!important;
}
#comparativoFilter > .field.wide:first-of-type{grid-column:1 / span 5;min-width:0}
#comparativoFilter > .filter-section[data-show-for="servicos"]{
  grid-column:6 / span 9;
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:.85rem .9rem!important;
}
#comparativoFilter > .filter-section[data-show-for="servicos"] .field.wide{grid-column:span 3}
#comparativoFilter > .filter-section[data-show-for="servicos"] .field:not(.wide):not(.narrow){grid-column:span 3}
#comparativoFilter > .filter-section[data-show-for="meses"]{
  grid-column:6 / span 9;
  display:grid!important;
  grid-template-columns:repeat(14,minmax(0,1fr));
  gap:.85rem .9rem!important;
}
#comparativoFilter > .filter-section[data-show-for="meses"] > .field:nth-of-type(1){grid-column:span 3}
#comparativoFilter > .filter-section[data-show-for="meses"] > .field:nth-of-type(2){grid-column:span 2}
#comparativoFilter > .filter-section[data-show-for="meses"] > .sep{grid-column:span 1;align-self:end;justify-self:center;padding-bottom:.7rem}
#comparativoFilter > .filter-section[data-show-for="meses"] > .field:nth-of-type(3){grid-column:span 3}
#comparativoFilter > .filter-section[data-show-for="meses"] > .field:nth-of-type(4){grid-column:span 2}
#comparativoFilter > .filter-section[data-show-for="meses"] > .field.wide{grid-column:span 3}
#comparativoFilter > .actions{grid-column:15 / -1;justify-content:flex-end;margin-left:0}
#comparativoFilter > .actions > *{width:100%}

#mensalFilter{
  grid-template-columns:repeat(16,minmax(0,1fr))!important;
}
#mensalFilter > .field.wide:first-of-type{grid-column:1 / span 10;min-width:0}
#mensalFilter > .filter-section[data-show-for] {
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:.85rem .9rem!important;
}
#mensalFilter > .filter-section[data-show-for="mes,servico,bairro,cidade"]{grid-column:11 / span 4}
#mensalFilter > .filter-section[data-show-for="mes,servico,bairro,cidade"] .field{grid-column:span 6}
#mensalFilter > .filter-section[data-show-for="ano"]{grid-column:15 / span 2}
#mensalFilter > .filter-section[data-show-for="ano"] .field{grid-column:1 / -1}
#mensalFilter > .filter-section[data-show-for="servico"],
#mensalFilter > .filter-section[data-show-for="bairro"],
#mensalFilter > .filter-section[data-show-for="cidade"]{grid-column:1 / span 5}
#mensalFilter > .filter-section[data-show-for="servico"] .field,
#mensalFilter > .filter-section[data-show-for="bairro"] .field,
#mensalFilter > .filter-section[data-show-for="cidade"] .field{grid-column:1 / -1}
#mensalFilter > .filter-section[data-show-for="periodo"]{grid-column:6 / span 7}
#mensalFilter > .filter-section[data-show-for="periodo"] .field{grid-column:span 6}
#mensalFilter > .actions{grid-column:13 / -1;justify-content:flex-end;margin-left:0}
#mensalFilter > .actions > *{min-width:116px}

.audit-filters-grid{
  grid-template-columns:repeat(14,minmax(0,1fr))!important;
  gap:.85rem .9rem!important;
}
.audit-filters-grid > .field:nth-child(1){grid-column:span 3}
.audit-filters-grid > .field:nth-child(2){grid-column:span 2}
.audit-filters-grid > .field:nth-child(3){grid-column:span 3}
.audit-filters-grid > .field:nth-child(4),
.audit-filters-grid > .field:nth-child(5){grid-column:span 2}
.audit-filters-grid > .field-actions{grid-column:span 2}
.audit-filters-grid .field-actions .row{display:flex;gap:.65rem;flex-wrap:wrap;justify-content:flex-end}
.audit-filters-grid .field-actions .btn{min-width:120px}

@media (max-width: 1399.98px){
  #comparativoFilter,
  #mensalFilter,
  .audit-filters-grid{grid-template-columns:repeat(12,minmax(0,1fr))!important}

  #comparativoFilter > .field.wide:first-of-type,
  #mensalFilter > .field.wide:first-of-type,
  #comparativoFilter > .filter-section[data-show-for],
  #mensalFilter > .filter-section[data-show-for],
  .audit-filters-grid > .field,
  .audit-filters-grid > .field-actions{grid-column:1 / -1!important}

  #comparativoFilter > .actions,
  #mensalFilter > .actions{grid-column:1 / -1!important;justify-content:flex-end}

  #comparativoFilter > .filter-section[data-show-for="servicos"]{grid-template-columns:repeat(12,minmax(0,1fr))!important}
  #comparativoFilter > .filter-section[data-show-for="servicos"] .field{grid-column:span 3!important}
  #comparativoFilter > .filter-section[data-show-for="meses"]{grid-template-columns:repeat(14,minmax(0,1fr))!important}

  #mensalFilter > .filter-section[data-show-for="mes,servico,bairro,cidade"] .field{grid-column:span 6}
  #mensalFilter > .filter-section[data-show-for="servico"],
  #mensalFilter > .filter-section[data-show-for="bairro"],
  #mensalFilter > .filter-section[data-show-for="cidade"],
  #mensalFilter > .filter-section[data-show-for="periodo"]{grid-template-columns:repeat(12,minmax(0,1fr))!important}
  #mensalFilter > .filter-section[data-show-for="servico"] .field,
  #mensalFilter > .filter-section[data-show-for="bairro"] .field,
  #mensalFilter > .filter-section[data-show-for="cidade"] .field{grid-column:span 6}
  #mensalFilter > .filter-section[data-show-for="periodo"] .field{grid-column:span 6}

  .audit-filters-grid{grid-template-columns:repeat(12,minmax(0,1fr))!important}
  .audit-filters-grid > .field:nth-child(1){grid-column:span 3}
  .audit-filters-grid > .field:nth-child(2){grid-column:span 3}
  .audit-filters-grid > .field:nth-child(3){grid-column:span 3}
  .audit-filters-grid > .field:nth-child(4),
  .audit-filters-grid > .field:nth-child(5),
  .audit-filters-grid > .field-actions{grid-column:span 3}
}

@media (max-width: 991.98px){
  .table-top > .table-actions{width:100%;justify-content:flex-start}
  #comparativoFilter,
  #mensalFilter,
  .audit-filters-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}

  #comparativoFilter > .field.wide:first-of-type,
  #comparativoFilter > .filter-section[data-show-for],
  #comparativoFilter > .actions,
  #mensalFilter > .field.wide:first-of-type,
  #mensalFilter > .filter-section[data-show-for],
  #mensalFilter > .actions,
  .audit-filters-grid > .field,
  .audit-filters-grid > .field-actions{grid-column:1 / -1!important}

  #comparativoFilter > .filter-section[data-show-for="servicos"],
  #comparativoFilter > .filter-section[data-show-for="meses"],
  #mensalFilter > .filter-section[data-show-for],
  .audit-filters-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}

  #comparativoFilter > .filter-section[data-show-for="servicos"] .field,
  #mensalFilter > .filter-section[data-show-for="mes,servico,bairro,cidade"] .field,
  #mensalFilter > .filter-section[data-show-for="periodo"] .field,
  .audit-filters-grid > .field{grid-column:span 3!important}

  #comparativoFilter > .filter-section[data-show-for="meses"] > .field:nth-of-type(1),
  #comparativoFilter > .filter-section[data-show-for="meses"] > .field:nth-of-type(3){grid-column:span 2!important}
  #comparativoFilter > .filter-section[data-show-for="meses"] > .field:nth-of-type(2),
  #comparativoFilter > .filter-section[data-show-for="meses"] > .field:nth-of-type(4){grid-column:span 2!important}
  #comparativoFilter > .filter-section[data-show-for="meses"] > .field.wide{grid-column:span 6!important}
  #comparativoFilter > .filter-section[data-show-for="meses"] > .sep{display:none!important}

  #comparativoFilter > .actions > *,
  #mensalFilter > .actions > *,
  .audit-filters-grid .field-actions .btn{width:100%}
  .audit-filters-grid .field-actions .row{flex-direction:column}
}

@media (max-width: 767.98px){
  #comparativoFilter,
  #mensalFilter,
  .audit-filters-grid,
  #comparativoFilter > .filter-section[data-show-for],
  #mensalFilter > .filter-section[data-show-for]{grid-template-columns:1fr!important}

  #comparativoFilter .field,
  #mensalFilter .field,
  .audit-filters-grid > .field,
  .audit-filters-grid > .field-actions{grid-column:1 / -1!important}

  #comparativoFilter .segmented,
  #mensalFilter .segmented{overflow:auto;white-space:nowrap}
}


/* Popup compacto dos relatórios */
.bs-filter-shortcuts{
  display:flex;
  align-items:center;
  width:100%;
}
.bs-filter-shortcuts .field.wide{flex:1 1 auto;min-width:0}
.compact-shortcuts{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  padding:.4rem;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:18px;
}
.shortcut-chip{
  appearance:none;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  min-height:42px;
  padding:.7rem 1rem;
  border-radius:13px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.shortcut-chip:hover{background:rgba(var(--brand-rgb),.08);color:var(--brandDark)}
.shortcut-chip.is-active{
  background:var(--brand);
  color:#fff;
  box-shadow:none;
}
.clean-filter-modal{
  border:none;
  border-radius:22px;
  overflow:hidden;
}
.clean-filter-modal .modal-header,
.clean-filter-modal .modal-footer{
  border-color:var(--line);
  padding:1rem 1.1rem;
}
.clean-filter-modal .modal-body{padding:1.1rem}
.compact-modal-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.compact-modal-grid .field,
.compact-modal-grid .field.full,
.compact-modal-grid .field.narrow{grid-column:span 1;min-width:0}
.compact-modal-grid .field.full{grid-column:1 / -1}
.compact-modal-grid-lg{grid-template-columns:repeat(2,minmax(0,1fr))}
.compact-modal-grid-compare{grid-template-columns:repeat(4,minmax(0,1fr))}
.monthly-toolbar{align-items:flex-start}
@media (max-width: 991.98px){
  .compact-modal-grid,
  .compact-modal-grid-lg,
  .compact-modal-grid-compare{grid-template-columns:1fr}
  .compact-shortcuts{gap:.5rem}
  .shortcut-chip{width:100%;justify-content:center}
}


/* ============================
   Relatórios em popup: proporção visual
   ============================ */
.report-filter-card{
  display:block;
}
.report-summary-card,
.report-result-card{
  margin-top:0;
}
.monthly-toolbar .table-actions .btn-primary,
.monthly-toolbar .table-actions .btn{
  white-space:nowrap;
}



/* botão PDF alinhado */
.btn-pdf {
  margin-top: 0 !important;
}

/* =========================================================
   MÓDULO: RELATÓRIOS / BARRA SUPERIOR FIXA
   mensal + comparativo
   ========================================================= */
.report-filter-card{
  position: sticky;
  top: 12px;
  z-index: 20;
  padding: 14px !important;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.report-filter-card .table-top,
.monthly-toolbar{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end !important;
  gap: 12px !important;
}

.report-filter-card .table-filters{
  min-width: 0;
}

.report-filter-card .filter-card.bs-filter-shortcuts{
  margin: 0;
  padding: 10px !important;
  border-radius: 16px;
}

.report-filter-card .field.wide{
  min-width: 0;
}

.report-filter-card .segmented.compact-shortcuts{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  border-radius: 16px;
}

.report-filter-card .shortcut-chip{
  min-height: 40px;
  padding: .68rem .95rem;
}

.report-filter-card .table-actions{
  justify-content: flex-end !important;
  align-self: end;
  margin: 0 !important;
  white-space: nowrap;
}

.report-filter-card .table-actions .btn,
.report-filter-card .table-actions .btn-primary,
.report-filter-card .table-actions a{
  min-height: 44px;
  margin: 0 !important;
  padding: .72rem 1rem !important;
  border-radius: 14px;
}

.report-summary-card,
.report-result-card{
  scroll-margin-top: 120px;
}

/* =========================================================
   MÓDULO: RELATÓRIOS / PAINEL INLINE REUTILIZÁVEL
   usado em mensal + comparativo
   ========================================================= */
.report-inline-panels{
  margin-top: 12px;
}

.report-inline-panel{
  display: none;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
}

.report-inline-panel.is-open{
  display: block;
}

.report-panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.report-panel-title{
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.report-panel-close{
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.report-panel-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.shortcut-chip.is-open{
  outline: 2px solid rgba(0,0,0,.06);
}

/* =========================================================
   MÓDULO: RELATÓRIOS / ALINHAMENTO DE FILTRO + AÇÕES
   ========================================================= */
.bloco-filtro{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.bloco-filtro .filtros{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.bloco-filtro .acoes{
  display: flex;
  align-items: center;
}

.btn-pdf{
  margin-top: 0 !important;
}

/* =========================================================
   MÓDULO: TOPO / CAMADAS E MODAIS
   ========================================================= */
.modal{
  z-index: 2000 !important;
}

.modal-backdrop{
  z-index: 1990 !important;
}

/* =========================================================
   MÓDULO: RESPONSIVIDADE GLOBAL DOS RELATÓRIOS
   ========================================================= */
@media (max-width: 1199.98px){
  .report-filter-card .table-top,
  .monthly-toolbar{
    grid-template-columns: 1fr;
    align-items: stretch !important;
  }

  .report-filter-card .table-actions{
    justify-content: flex-start !important;
  }
}

@media (max-width: 767.98px){
  .report-filter-card{
    position: static;
    top: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .report-filter-card .table-actions .btn,
  .report-filter-card .table-actions .btn-primary,
  .report-filter-card .table-actions a,
  .report-panel-actions .btn{
    width: 100%;
    justify-content: center;
  }

  .report-panel-actions{
    flex-direction: column;
  }
}


/* =========================================================
   17) Cadastro de cidadão - layout em linha
   ========================================================= */
.citizen-card-wide{
  width:100%;
}
.citizen-card-head-inline{
  margin-bottom:1rem;
}

.citizen-form-inline{
  --bs-gutter-x:.85rem;
  --bs-gutter-y:.85rem;
}
.citizen-form-inline .form-label{
  margin-bottom:.42rem;
  white-space:nowrap;
  font-size:.95rem;
}
.citizen-form-inline .form-control{
  min-height:46px;
  border-radius:14px;
}
.citizen-form-inline .invalid-feedback{
  font-size:.8rem;
}
.citizen-col-name{flex:1.45 1 0;min-width:240px}
.citizen-col-cpf{flex:.82 1 0;min-width:145px}
.citizen-col-phone{flex:.96 1 0;min-width:165px}
.citizen-col-bairro{flex:.9 1 0;min-width:150px}
.citizen-col-city{flex:.96 1 0;min-width:160px}
.citizen-col-state{flex:.45 1 0;min-width:92px;max-width:110px}
.citizen-col-submit{flex:0 0 132px;min-width:132px}
.citizen-inline-submit{
  min-height:46px;
  padding-inline:1.25rem;
  width:100%;
  border-radius:14px;
}
@media (min-width: 1200px){
  .citizen-form-inline{
    flex-wrap:nowrap;
  }
  .citizen-form-inline > [class*="col-xl"],
  .citizen-form-inline > [class*="col-md"],
  .citizen-form-inline > [class*="col-"]{
    width:auto;
    max-width:none;
  }
}
@media (max-width: 1199.98px){
  .citizen-card-head-inline{
    align-items:flex-start;
  }
}


/* =========================================================
   Prestar serviço - refinamento do formulário
   ========================================================= */
.service-grid-tight{grid-template-columns:minmax(320px,.82fr) minmax(520px,1.18fr)}
.compact-service-card{padding:1.05rem 1.1rem 1.15rem}
.service-person-card{background:linear-gradient(180deg,#f8fbff 0%,#f3f6fb 100%);border:1px solid rgba(48,79,144,.12);border-radius:18px;padding:1rem 1.1rem;margin-bottom:1rem}
.service-person-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.service-person-subtitle{margin-top:.2rem;font-size:.9rem;color:var(--muted)}
.service-person-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin-top:.9rem}
.service-person-meta span{display:flex;align-items:center;gap:.35rem;padding:.72rem .85rem;background:#fff;border:1px solid var(--line);border-radius:14px;font-size:.93rem;line-height:1.35;min-width:0}
.compact-service-form .form-label{font-size:.95rem;margin-bottom:.45rem}
.service-field-card{display:flex;flex-direction:column;gap:.55rem;height:100%;padding:1rem;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 1px 0 rgba(17,24,39,.02)}
.service-field-card .form-select,.service-field-card .form-control{min-height:48px;border-radius:14px}
.service-observation-card .form-control{min-height:120px;resize:vertical}
.service-field-help{font-size:.88rem;color:var(--muted);line-height:1.45}
.service-field-footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.15rem}
.service-field-footer .btn{white-space:nowrap}
.service-info-card{padding:.95rem 1rem;border:1px solid rgba(48,79,144,.14);border-radius:16px;background:#f8fbff}
.service-info-title{font-size:.93rem;font-weight:700;margin-bottom:.22rem;color:var(--brandDark)}
.service-info-text{font-size:.92rem;line-height:1.5;color:var(--text)}
.service-actions-row{margin-top:.1rem}
.service-actions-row .btn{min-height:44px;padding:.7rem 1.1rem;border-radius:12px;font-weight:600}
@media (max-width: 1199.98px){
  .service-grid-tight{grid-template-columns:1fr}
  .service-person-meta{grid-template-columns:1fr}
}
@media (max-width: 767.98px){
  .compact-service-card{padding:1rem}
  .service-person-card,.service-field-card,.service-info-card{padding:.9rem}
  .service-field-footer{flex-direction:column;align-items:stretch}
  .service-field-footer .btn{width:100%}
  .service-actions-row .btn{flex:1 1 100%}
}


/* =========================================================
   18) Utilitários de limpeza visual e componentes padrão
   ========================================================= */
.form-shell-sm{max-width:620px}
.form-shell-md{max-width:760px}
.form-shell-lg{max-width:920px}
.form-shell-xl{max-width:980px}
.form-shell-2xl{max-width:1100px}
.icon-circle-sm,.icon-circle-md{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--brandSoft);color:var(--brand);
  border:1px solid var(--brandSoftBorder);
}
.icon-circle-sm{width:48px;height:48px}
.icon-circle-md{width:56px;height:56px}
.logo-thumb{
  max-height:70px;border-radius:12px;border:1px solid var(--line);background:var(--surface)
}
.color-dot{display:inline-block;border-radius:999px;border:1px solid rgba(0,0,0,.08);flex:0 0 auto}
.color-dot-md{width:16px;height:16px}
.color-dot-sm{width:12px;height:12px}
.color-swatch-btn{width:38px;height:38px}
.action-bar-inline{display:flex!important;gap:10px!important;align-items:center!important;flex-wrap:wrap}
.section-title-sm{font-weight:700;font-size:16px;margin:0}
.section-title-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.section-subtle{color:var(--muted)}
.metric-badge-value{margin-left:6px}
.content-card{padding:14px;margin-bottom:14px}
.scroll-x{overflow:auto}
.history-stats-inline{margin-top:12px}
.form-actions-top{margin-top:14px}
.empty-card{padding:16px}
.table-section-title{font-weight:700;margin-bottom:10px}
.report-summary-card .badge-status,
.report-result-card .badge-status,
.bs-soft-card .badge-status{font-size:.92rem}
.bs-soft-card .table thead th,
.card .table thead th{
  font-size:.84rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--muted);
  border-bottom-color:var(--line-strong);
  white-space:nowrap;
}
.bs-soft-card .table tbody td,
.card .table tbody td{vertical-align:middle}
.bs-soft-card .table-hover tbody tr:hover,
.card .table-hover tbody tr:hover{background:rgba(var(--brand-rgb),.04)}
.report-summary-card,.report-result-card{border-radius:18px}
.report-inline-panel{background:var(--surface)}
.footerbar{
  margin:14px 12px 18px calc(var(--sidebar-w) + 24px);
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  color:var(--muted);
  font-size:.92rem;
}
@media (max-width: 991.98px){
  .footerbar{margin:12px}
}
.app-toast-wrap{
  position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:3000;
}
.app-toast{
  min-width:280px;max-width:420px;padding:.9rem 1rem;border-radius:16px;background:var(--surface);color:var(--text);
  border:1px solid var(--line);box-shadow:0 14px 30px rgba(0,0,0,.12);display:flex;align-items:flex-start;gap:.75rem;
}
.app-toast__icon{font-size:1.05rem;line-height:1.4}
.app-toast__body{flex:1 1 auto;font-size:.95rem;line-height:1.45}
.app-toast--success{border-color:rgba(22,163,74,.28)}
.app-toast--error{border-color:rgba(220,38,38,.24)}
.report-panel-close:hover{background:var(--surface-2)}

.form-color-compact{max-width:160px}
.theme-color-badge{color:#0f172a}
.theme-color-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}


/* =========================================================
   18) Acabamento fino: dashboard, busca, tabelas, filtros, responsividade
   ========================================================= */
.topbar-inner{gap:12px;flex-wrap:nowrap}
.topbar-center{flex:1 1 auto;display:flex;align-items:center;gap:.7rem;min-width:0}
.topbar-search{flex:1 1 340px;min-width:220px;max-width:520px}
.topbar-search-btn{width:100%;min-height:42px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.14);color:#fff;border-radius:14px;padding:.6rem .85rem;display:flex;align-items:center;gap:.7rem;justify-content:space-between;text-align:left}
.topbar-search-btn span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.93rem}
.topbar-search-btn kbd{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:.15rem .45rem;color:#fff;font-size:.75rem;font-family:inherit;font-weight:600}
.global-search-modal[hidden]{display:none!important}
.global-search-modal{position:fixed;inset:0;z-index:2500}
.global-search-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.4);backdrop-filter:blur(3px)}
.global-search-dialog{position:relative;z-index:1;max-width:760px;margin:7vh auto 0;padding:0 16px}
.global-search-box{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 60px rgba(15,23,42,.18);overflow:hidden}
.global-search-input-wrap{display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem;border-bottom:1px solid var(--line)}
.global-search-input-wrap > i{font-size:1.05rem;color:var(--muted)}
.global-search-input{flex:1 1 auto;border:0;background:transparent;color:var(--text);font-size:1rem;outline:none;min-height:36px}
.global-search-close{border:1px solid var(--line);background:var(--surface-2);color:var(--text);width:38px;height:38px;border-radius:12px;font-size:1.35rem;line-height:1;cursor:pointer}
.global-search-hint{padding:.7rem 1.1rem;color:var(--muted);font-size:.9rem;background:var(--surface-2)}
.global-search-results{max-height:60vh;overflow:auto;padding:.65rem}
.global-search-section + .global-search-section{margin-top:.4rem}
.global-search-section-title{padding:.45rem .55rem;color:var(--muted);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.global-search-item{display:flex;align-items:flex-start;gap:.8rem;padding:.78rem .8rem;border-radius:16px;color:var(--text)}
.global-search-item:hover{background:var(--surface-2)}
.global-search-item-icon{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--brandSoft);color:var(--brandDark);flex:0 0 auto}
.global-search-item-main{min-width:0;flex:1 1 auto}
.global-search-item-title{font-weight:600;line-height:1.3}
.global-search-item-meta{font-size:.88rem;color:var(--muted);line-height:1.35;margin-top:.12rem}
.global-search-empty{padding:1rem;color:var(--muted)}
.global-search-tag{display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:.75rem;color:var(--muted);white-space:nowrap}

.dashboard-hero{background:linear-gradient(135deg, rgba(var(--brand-rgb),.08), rgba(var(--brand-rgb),.02) 60%, transparent);border:1px solid var(--brandSoftBorder)!important;border-radius:24px!important}
.dashboard-hero-body{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.dashboard-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brandDark);margin-bottom:.25rem}
.dashboard-title{font-size:1.4rem;line-height:1.2;margin:0 0 .35rem;font-weight:600}
.dashboard-copy{color:var(--muted);max-width:760px}
.dashboard-quick-actions{display:flex;gap:.75rem;flex-wrap:wrap}

.report-filter-card,.report-inline-panel,.bs-page-card,.bs-form-card,.bs-table-card,.bs-chart-card,.citizen-card{border-radius:20px!important}
.table-card-wrap{border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:.9rem}
.table-toolbar-search{position:relative;flex:1 1 280px;max-width:420px}
.table-toolbar-search > i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.table-search-input{width:100%;min-height:44px;padding:.72rem .9rem .72rem 2.6rem;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.table-toolbar-meta{font-size:.88rem;color:var(--muted)}
.table-modern thead th{background:var(--surface-2)!important;color:var(--muted);font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid var(--line)!important;position:sticky;top:0;z-index:1}
.table-modern tbody td{border-color:var(--line)!important;vertical-align:middle}
.table-modern tbody tr:hover{background:rgba(var(--brand-rgb),.04)}
.table-row-hidden{display:none}
.table-empty-inline td,.table-empty-inline{color:var(--muted)!important;text-align:center;padding:1.15rem!important}
.table-inline-actions{display:flex;gap:.45rem;flex-wrap:wrap}
.table-inline-actions .btn{white-space:nowrap}

.filter-card.bs-filter-shortcuts{padding:.85rem 1rem!important;background:var(--surface-2)!important;border:1px solid var(--line)!important}
.shortcut-chip{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;padding:.72rem .95rem;display:inline-flex;align-items:center;gap:.5rem;font-weight:600}
.shortcut-chip.is-active,.shortcut-chip.is-open{background:var(--brandSoft);border-color:rgba(var(--brand-rgb),.32);color:var(--brandDark)}
.report-inline-panel .compact-modal-grid,.report-inline-panel .compact-modal-grid-lg,.report-inline-panel .compact-modal-grid-xl{gap:.9rem}
.report-panel-actions{padding-top:.2rem;border-top:1px solid var(--line)}

@media (max-width: 1199.98px){
  .topbar-search{max-width:none}
  .topbar .chiplink{display:none}
}
@media (max-width: 991.98px){
  .dashboard-hero-body{align-items:flex-start}
  .dashboard-quick-actions{width:100%}
  .dashboard-quick-actions .btn{flex:1 1 180px}
}
@media (max-width: 767.98px){
  .page{padding:8px 10px}
  .shell{padding:10px 10px 18px}
  .bs-page-title-card .card-body{padding:.95rem!important}
  .page-title{font-size:1.55rem}
  .dashboard-title{font-size:1.2rem}
  .table-toolbar-search{max-width:none;flex-basis:100%}
  .table-toolbar-meta{width:100%}
  .global-search-dialog{margin:3vh auto 0}
  .global-search-results{max-height:68vh}
}


/* ============================
   Serviços > Categorias em cards compactos
   ============================ */
.bs-category-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.bs-category-head-btn{white-space:nowrap}
.bs-category-grid-columns{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;align-items:start}
.bs-category-card{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .7rem;border:1px solid #dbe2ea;border-radius:12px;background:#fff;color:var(--text);text-decoration:none;min-height:58px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background-color .15s ease;color:var(--text);box-shadow:0 2px 8px rgba(17,24,39,.03)}
.bs-category-card:hover{transform:translateY(-1px);border-color:#9ec5fe;box-shadow:0 8px 18px rgba(17,24,39,.08);text-decoration:none;color:var(--text);background:#f8fbff}
.bs-category-card.is-active{border-color:#0d6efd;background:#0d6efd;box-shadow:0 8px 18px rgba(13,110,253,.18);color:#fff}
.bs-category-card.is-inactive{opacity:.68}
.bs-category-card-title{font-size:.78rem;font-weight:700;line-height:1.15;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bs-category-card-meta{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-top:auto;flex:0 0 auto}
.bs-category-card-meta .badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#eef2f7;color:#374151;font-weight:700;font-size:.74rem}
.bs-category-card.is-active .bs-category-card-meta .badge{background:rgba(255,255,255,.18);color:#fff}
.bs-category-empty{grid-column:1 / -1;padding:1rem;border:1px dashed var(--line);border-radius:14px;background:#fafafa}
@media (max-width: 1399.98px){
  .bs-category-grid-columns{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width: 1199.98px){
  .bs-category-grid-columns{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width: 767.98px){
  .bs-category-grid-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 575.98px){
  .bs-category-grid-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .bs-category-card{min-height:54px;padding:.5rem .6rem}
  .bs-category-card-title{font-size:.74rem}
}
  .bs-category-card{min-height:auto}
}