/* ===========================================================================
   Protocolo CMSB — tema
   Implementa DESIGN.md. Carregado DEPOIS do Bootstrap 5.3.
   Nenhuma cor literal deve nascer fora da secao 1.
   =========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Tinta — cromo escuro.
     Quase preto de leve cast quente, e nao mais o azul-marinho. O marinho
     puxava o cromo para o lado do azul institucional e as duas cores brigavam;
     o quase preto devolve a primaria para o papel dela, que e acao. */
  --cm-ink-900: #171A17;
  --cm-ink-850: #1D211D;
  --cm-ink-800: #232823;
  --cm-ink-700: #333A33;
  --cm-ink-600: #444C44;
  --cm-ink-fio: rgba(255,255,255,.07);   /* fio de luz no topo do cromo */

  /* Texto sobre tinta */
  --cm-sobre-ink:        #EDF2EA;
  --cm-sobre-ink-suave:  #B4BEB6;
  --cm-sobre-ink-fraco:  #7E8A80;

  /* Azul — primaria (acao, link, navegacao).
     O 400 e o azul da referencia, bonito e com 3,7:1: serve de preenchimento
     decorativo e nunca leva texto pequeno em cima. O 500 e o mesmo azul um
     degrau mais fundo, ja em 5,2:1, e e ele que vira botao e link. */
  --cm-primary-50:  #EDF1FC;
  --cm-primary-100: #D3DEF8;
  --cm-primary-300: #BCDBFA;   /* link sobre o cromo, 12,2:1 */
  --cm-primary-400: #5880DA;   /* preenchimento — nunca texto pequeno */
  --cm-primary-500: #4165C8;   /* base: botao, link, anel de foco — 5,2:1 */
  --cm-primary-600: #35539F;
  --cm-primary-700: #2A4280;

  /* Lima — acento, em tres degraus (ver DESIGN.md §2).
     Mesma regra que valia para o dourado, pela mesma razao: a cor da marca tem
     1,3:1 e e linda como fundo, ilegivel como texto. */
  --cm-accent-50:  #F2FBE2;
  --cm-accent-500: #C9F17E;  /* marca — nunca texto */
  --cm-accent-600: #6E9B1F;  /* preenchimento e icone, 3,2:1 */
  --cm-accent-700: #4E7014;  /* texto, 5,6:1 */

  /* Semanticas */
  --cm-success-50:  #E4F6EF;
  --cm-success-500: #12805C;
  --cm-success-700: #0B5E43;
  --cm-danger-50:   #FDECEA;
  --cm-danger-500:  #C8352A;
  --cm-danger-700:  #9A281F;
  --cm-warning-50:  #FFF3D8;
  --cm-warning-500: #8A6108;
  --cm-neutral-50:  #EEF1F5;
  --cm-neutral-500: #55677E;
  --cm-neutral-700: #3E4D60;

  /* Superficie e texto.
     Canvas quente, nao cinza azulado: e o que separa uma tela que parece
     software de escritorio de uma que parece feita para gente. */
  --cm-canvas:         #EDF0E7;
  --cm-surface:        #FBFCF8;
  --cm-surface-sunken: #F4F7EE;
  --cm-border:         #E2E7DA;
  --cm-border-suave:   #EDF0E6;
  --cm-border-strong:  #C8CFBC;
  --cm-text:           #131815;
  --cm-text-muted:     #59635C;

  /* Forma. Raios maiores que o normal de painel administrativo: e o que mais
     rapido tira a tela do registro "sistema" e leva para o registro
     "aplicativo", sem custar nada em legibilidade. */
  --cm-radius-sm:   10px;
  --cm-radius-md:   14px;
  --cm-radius-lg:   20px;
  --cm-radius-xl:   28px;
  --cm-radius-pill: 999px;

  /* Elevacao em camadas: um halo largo e difuso mais um contato curto.
     Sombra e elevacao, nunca contorno — onde a intencao e separar, usa-se
     --cm-border (DESIGN.md §5). */
  --cm-shadow-xs: 0 1px 2px rgba(23,26,23,.04);
  --cm-shadow-sm: 0 1px 2px rgba(23,26,23,.04), 0 2px 10px -3px rgba(23,26,23,.05);
  --cm-shadow-md: 0 2px 4px rgba(23,26,23,.03), 0 14px 32px -10px rgba(23,26,23,.10);
  --cm-shadow-lg: 0 4px 8px rgba(23,26,23,.04), 0 30px 60px -18px rgba(23,26,23,.18);

  --cm-ring: 0 0 0 3px rgba(65,101,200,.22);

  /* Movimento */
  --cm-ease: cubic-bezier(.2,.7,.3,1);
  --cm-dur:  170ms;
  /* Entradas (revelacao de secao, hero): mais lentas que a transicao de
     estado, porque o olho acompanha um surgimento em vez de so notar uma
     mudanca. A curva desacelera forte no fim — chegada macia. */
  --cm-dur-entrada:  460ms;
  --cm-ease-entrada: cubic-bezier(.16,.84,.28,1);

  --cm-sidebar-w: 264px;
  --cm-largura:   1180px;
  /* Altura da barra de abas do celular. Sai daqui porque o conteudo precisa
     reservar exatamente esta folga no fim, senao a barra cobre o ultimo botao. */
  --cm-abas-altura: 58px;

  /* --- Ponte para o Bootstrap: a marcacao existente herda a identidade --- */
  --bs-primary:        var(--cm-primary-500);
  --bs-primary-rgb:    65,101,200;
  --bs-secondary-rgb:  89,99,92;
  --bs-success:        var(--cm-success-500);
  --bs-success-rgb:    18,128,92;
  --bs-danger:         var(--cm-danger-500);
  --bs-danger-rgb:     200,53,42;
  --bs-warning:        var(--cm-warning-500);
  --bs-warning-rgb:    138,97,8;
  --bs-info:           var(--cm-primary-500);
  --bs-info-rgb:       65,101,200;
  --bs-body-bg:        var(--cm-canvas);
  --bs-body-color:     var(--cm-text);
  --bs-body-font-family: 'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-body-line-height: 1.6;
  --bs-border-color:   var(--cm-border);
  --bs-border-radius:      var(--cm-radius-md);
  --bs-border-radius-sm:   var(--cm-radius-sm);
  --bs-border-radius-lg:   var(--cm-radius-lg);
  --bs-link-color:         var(--cm-primary-500);
  --bs-link-hover-color:   var(--cm-primary-700);
  --bs-link-color-rgb:     18,99,155;
  --bs-emphasis-color:     var(--cm-text);
  --bs-secondary-color:    var(--cm-text-muted);
  --bs-tertiary-bg:        var(--cm-surface-sunken);
  --bs-focus-ring-color:   rgba(88,128,218,.25);
}

/* --------------------------------------------------------------------------
   2. Base e tipografia
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cm-canvas);
  color: var(--cm-text);
  font-family: 'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: .9375rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--cm-text);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}
h1 { font-size: 1.625rem; font-weight: 800; letter-spacing: -.022em; }
h2 { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; }
h3 { font-size: 1.125rem; font-weight: 800; letter-spacing: -.015em; }
h5 { font-size: 1rem; font-weight: 700; }
p  { text-wrap: pretty; }

a { color: var(--cm-primary-500); text-decoration: none; }
a:hover { color: var(--cm-primary-700); text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--cm-primary-500);
  outline-offset: 2px;
  border-radius: var(--cm-radius-sm);
}

.cm-eyebrow {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cm-text-muted);
  margin: 0 0 5px;
}

.cm-legenda { font-size: .8125rem; color: var(--cm-text-muted); }
.cm-num     { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.cm-muted   { color: var(--cm-text-muted); }

/* --------------------------------------------------------------------------
   3. Cromo escuro — sidebar do admin

   Duas fontes de luz em vez de uma: um halo azul no topo, onde fica a marca, e
   um segundo bem fraco embaixo, para a coluna não morrer num preto chapado no
   pé. O fio claro na borda direita é o que separa o cromo do canvas sem
   precisar de uma linha dura.
   -------------------------------------------------------------------------- */
.cm-app { display: flex; min-height: 100vh; }

.cm-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--cm-sidebar-w);
  background:
    radial-gradient(120% 55% at 50% 0%,   rgba(88,128,218,.42) 0%, rgba(88,128,218,0) 62%),
    radial-gradient(100% 40% at 20% 100%, rgba(88,128,218,.16) 0%, rgba(88,128,218,0) 70%),
    var(--cm-ink-900);
  color: var(--cm-sobre-ink-suave);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  overflow: hidden;
  border-right: 1px solid rgba(0,0,0,.4);
  box-shadow: inset -1px 0 0 var(--cm-ink-fio);
}

.cm-marca {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 20px 18px;
  color: #FFFFFF;
  text-decoration: none;
}
.cm-marca::after {
  content: '';
  position: absolute; left: 20px; right: 20px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cm-ink-fio), rgba(255,255,255,.02));
}
.cm-marca:hover { color: #FFFFFF; text-decoration: none; }
.cm-marca img, .cm-marca svg {
  width: 40px; height: 40px; flex: none;
  border-radius: 11px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.cm-marca-nome {
  display: block;
  font-weight: 800; font-size: .9375rem;
  letter-spacing: -.015em; line-height: 1.25;
}
.cm-marca-sub {
  display: block;
  font-size: .625rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cm-accent-500);
  margin-top: 1px;
}

.cm-nav { position: relative; flex: 1; overflow-y: auto; padding: 10px 12px 20px; }
.cm-nav-grupo {
  font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cm-sobre-ink-fraco);
  padding: 18px 12px 7px;
}
.cm-nav a {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  margin-bottom: 2px;
  border-radius: var(--cm-radius-sm);
  color: var(--cm-sobre-ink-suave);
  font-size: .875rem; font-weight: 500;
  text-decoration: none;
  transition: background var(--cm-dur) var(--cm-ease),
              color var(--cm-dur) var(--cm-ease);
}
.cm-nav a:hover {
  background: rgba(255,255,255,.06);
  color: #FFFFFF;
  text-decoration: none;
}
.cm-nav a.ativo {
  background: linear-gradient(90deg, rgba(201,241,126,.14), rgba(255,255,255,.05) 40%, rgba(255,255,255,.05));
  color: #FFFFFF;
  font-weight: 700;
}
.cm-nav a.ativo::before {
  content: '';
  position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--cm-accent-500);
  box-shadow: 0 0 12px rgba(201,241,126,.55);
}
.cm-nav a i { width: 18px; text-align: center; font-size: 1rem; opacity: .85; }
.cm-nav a.ativo i { opacity: 1; }
.cm-nav-conta {
  margin-left: auto;
  min-width: 21px; padding: 1px 7px;
  border-radius: var(--cm-radius-pill);
  background: var(--cm-accent-500);
  color: var(--cm-ink-900);
  font-size: .6875rem; font-weight: 800; text-align: center;
  font-variant-numeric: tabular-nums;
}

.cm-sidebar-rodape {
  position: relative;
  padding: 14px 12px;
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 1px 0 var(--cm-ink-fio);
}
.cm-usuario { display: flex; align-items: center; gap: 10px; padding: 2px 6px 12px; }
.cm-avatar {
  width: 36px; height: 36px; flex: none;
  border-radius: var(--cm-radius-pill);
  background: linear-gradient(160deg, var(--cm-primary-500), var(--cm-primary-700));
  color: #FFFFFF;
  display: grid; place-items: center;
  font-weight: 800; font-size: .8125rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.cm-usuario-nome { color: #FFFFFF; font-size: .8125rem; font-weight: 700; line-height: 1.3; }
.cm-usuario-papel {
  font-size: .625rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--cm-primary-300);
}

/* --------------------------------------------------------------------------
   4. Area de conteudo
   -------------------------------------------------------------------------- */
.cm-conteudo {
  flex: 1;
  min-width: 0;
  margin-left: var(--cm-sidebar-w);
  display: flex;
  flex-direction: column;
}

.cm-topo {
  position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 28px;
  background: rgba(238,242,246,.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--cm-border);
}
.cm-topo h1 { font-size: 1.4375rem; margin: 0; }
.cm-topo .cm-eyebrow { margin-bottom: 2px; }
.cm-topo-acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.cm-main { padding: 28px; flex: 1; }
.cm-container { max-width: 1360px; margin: 0 auto; }

.cm-hamburguer { display: none; }

/* --------------------------------------------------------------------------
   5. Cards e superficies
   -------------------------------------------------------------------------- */
.cm-card {
  position: relative;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border-suave);
  border-radius: var(--cm-radius-lg);
  box-shadow: var(--cm-shadow-sm);
}
.cm-card + .cm-card { margin-top: 18px; }

.cm-card-topo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 17px 22px;
  border-bottom: 1px solid var(--cm-border-suave);
}
.cm-card-topo h2, .cm-card-topo h3 {
  font-size: .9375rem; font-weight: 800; margin: 0;
  letter-spacing: -.005em;
}
.cm-card-corpo { padding: 22px; }
.cm-card-rodape {
  padding: 15px 22px;
  border-top: 1px solid var(--cm-border-suave);
  background: var(--cm-surface-sunken);
  border-radius: 0 0 var(--cm-radius-lg) var(--cm-radius-lg);
}
@media (min-width: 768px) { .cm-card-corpo { padding: 26px; } }

.cm-grade { display: grid; gap: 18px; }
.cm-grade-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cm-grade-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cm-grade-4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }

/* --------------------------------------------------------------------------
   6. Card de KPI — DESIGN.md §6

   O filete de 3px continua sendo a marca do tom, mas agora sobre uma lavagem
   tonal muito fraca no topo do card: o numero ganha um fundo que o sustenta
   sem competir com ele.
   -------------------------------------------------------------------------- */
.cm-stat {
  position: relative;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--cm-tom, var(--cm-primary-500)) 7%, var(--cm-surface)) 0%,
      var(--cm-surface) 58%);
  border: 1px solid var(--cm-border-suave);
  border-radius: var(--cm-radius-lg);
  box-shadow: var(--cm-shadow-sm);
  padding: 20px 22px;
  display: flex; align-items: flex-start; gap: 14px;
  overflow: hidden;
  transition: transform var(--cm-dur) var(--cm-ease),
              box-shadow var(--cm-dur) var(--cm-ease);
}
.cm-stat::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--cm-tom, var(--cm-primary-500));
}
.cm-stat:hover { transform: translateY(-2px); box-shadow: var(--cm-shadow-md); }
.cm-stat-corpo { min-width: 0; flex: 1; }
.cm-stat-num {
  display: block;
  font-size: 2.125rem; font-weight: 800; line-height: 1.05;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--cm-text);
  margin: 2px 0 4px;
}
.cm-stat-icone {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--cm-radius-md);
  display: grid; place-items: center;
  font-size: 1.1875rem;
  background: color-mix(in srgb, var(--cm-tom, var(--cm-primary-500)) 13%, transparent);
  color: var(--cm-tom, var(--cm-primary-500));
}
a.cm-stat, a.cm-stat:hover { text-decoration: none; color: inherit; }

/* Tons aplicaveis a stat, badge, timeline, alerta e barra */
.tom-primary { --cm-tom: var(--cm-primary-500); --cm-tom-texto: var(--cm-primary-700); --cm-tom-fundo: var(--cm-primary-50); }
.tom-success { --cm-tom: var(--cm-success-500); --cm-tom-texto: var(--cm-success-700); --cm-tom-fundo: var(--cm-success-50); }
.tom-warning { --cm-tom: var(--cm-warning-500); --cm-tom-texto: var(--cm-warning-500); --cm-tom-fundo: var(--cm-warning-50); }
.tom-danger  { --cm-tom: var(--cm-danger-500);  --cm-tom-texto: var(--cm-danger-700);  --cm-tom-fundo: var(--cm-danger-50); }
.tom-accent  { --cm-tom: var(--cm-accent-600);  --cm-tom-texto: var(--cm-accent-700);  --cm-tom-fundo: var(--cm-accent-50); }
.tom-neutral { --cm-tom: var(--cm-neutral-500); --cm-tom-texto: var(--cm-neutral-700); --cm-tom-fundo: var(--cm-neutral-50); }

/* --------------------------------------------------------------------------
   7. Badge de situacao — DESIGN.md §6
   -------------------------------------------------------------------------- */
.cm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 9px;
  border-radius: var(--cm-radius-pill);
  background: color-mix(in srgb, var(--cm-tom, var(--cm-neutral-500)) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--cm-tom, var(--cm-neutral-500)) 24%, transparent);
  color: var(--cm-tom-texto, var(--cm-neutral-700));
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.55;
}
.cm-badge-ponto {
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: var(--cm-tom, var(--cm-neutral-500));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cm-tom, var(--cm-neutral-500)) 18%, transparent);
}

/* --------------------------------------------------------------------------
   8. Numero de protocolo — DESIGN.md §6
   -------------------------------------------------------------------------- */
.cm-proto {
  display: inline-flex; align-items: baseline; gap: 8px;
  white-space: nowrap;
}
.cm-proto-num {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--cm-text);
}
.cm-proto-sigla {
  font-size: .625rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--cm-radius-pill);
  background: var(--cm-primary-50);
  color: var(--cm-primary-700);
  border: 1px solid var(--cm-primary-100);
}
.cm-proto-lg .cm-proto-num { font-size: 1.875rem; letter-spacing: -.035em; }

/* A chave e ditada por telefone e copiada a mao: monoespacada, espacada e
   destacada com o dourado, que aqui e sinal de "anote isto". */
.cm-chave {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
  font-weight: 700;
  letter-spacing: .16em;
  font-size: 1.0625rem;
  color: var(--cm-accent-700);
  background:
    linear-gradient(180deg, var(--cm-accent-50), color-mix(in srgb, var(--cm-accent-50) 55%, #FFFFFF));
  border: 1px dashed var(--cm-accent-600);
  border-radius: var(--cm-radius-md);
  padding: 9px 14px;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   9. Tabelas — DESIGN.md §6
   -------------------------------------------------------------------------- */
.cm-tabela-envolve { overflow-x: auto; }
.cm-tabela { width: 100%; border-collapse: collapse; }
.cm-tabela thead th {
  background: var(--cm-surface-sunken);
  border-bottom: 1px solid var(--cm-border);
  padding: 11px 18px;
  text-align: left;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--cm-text-muted);
  white-space: nowrap;
}
.cm-tabela tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--cm-border-suave);
  vertical-align: middle;
}
.cm-tabela tbody tr:last-child td { border-bottom: 0; }
.cm-tabela tbody tr { transition: background var(--cm-dur) var(--cm-ease); }
.cm-tabela tbody tr:hover { background: rgba(88,128,218,.035); }
.cm-tabela .cm-col-acoes { text-align: right; white-space: nowrap; width: 1%; }
.cm-tabela a.cm-linha-titulo { color: var(--cm-text); font-weight: 600; }
.cm-tabela a.cm-linha-titulo:hover { color: var(--cm-primary-600); }

/* Rotulos que aparecem so quando a tabela vira lista no celular */
.cm-td-rotulo { display: none; }

@media (max-width: 767.98px) {
  .cm-tabela, .cm-tabela tbody, .cm-tabela tr, .cm-tabela td { display: block; width: 100%; }
  .cm-tabela thead { display: none; }
  .cm-tabela tbody tr {
    background: var(--cm-surface);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-md);
    margin-bottom: 10px;
    padding: 14px 16px;
    box-shadow: var(--cm-shadow-xs);
  }
  .cm-tabela tbody td { border: 0; padding: 5px 0; display: flex; gap: 12px; align-items: baseline; }
  .cm-tabela .cm-col-acoes { text-align: left; width: auto; padding-top: 10px; }
  .cm-td-rotulo {
    display: block; flex: none; min-width: 92px;
    font-size: .625rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--cm-text-muted);
  }
}

/* --------------------------------------------------------------------------
   10. Linha do tempo da tramitacao — DESIGN.md §6
   -------------------------------------------------------------------------- */
.cm-timeline { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; }
.cm-timeline::before {
  content: '';
  position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--cm-border-strong), var(--cm-border));
}
.cm-timeline li { position: relative; padding: 0 0 24px; }
.cm-timeline li:last-child { padding-bottom: 0; }
.cm-timeline li::before {
  content: '';
  position: absolute; left: -28px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cm-tom, var(--cm-neutral-500));
  box-shadow: 0 0 0 3px var(--cm-surface);
}
.cm-timeline li.cm-atual::before {
  box-shadow: 0 0 0 3px var(--cm-surface), 0 0 0 6px rgba(201,241,126,.4);
}
.cm-timeline-data {
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--cm-text-muted);
}
.cm-timeline-titulo { font-weight: 700; margin: 3px 0; }
.cm-timeline-texto {
  white-space: pre-wrap;
  background: var(--cm-surface-sunken);
  border: 1px solid var(--cm-border-suave);
  border-left: 2px solid var(--cm-border-strong);
  border-radius: 0 var(--cm-radius-sm) var(--cm-radius-sm) 0;
  padding: 11px 14px;
  margin-top: 8px;
  font-size: .875rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   11. Formularios
   -------------------------------------------------------------------------- */
.cm-campo { margin-bottom: 18px; }
.cm-campo > label, .cm-rotulo {
  display: block;
  font-size: .8125rem; font-weight: 700;
  margin-bottom: 6px;
  color: var(--cm-text);
}
.cm-obrigatorio { color: var(--cm-danger-500); font-weight: 800; }

.cm-input, .cm-select, .cm-textarea,
.form-control, .form-select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--cm-border-strong);
  border-radius: var(--cm-radius-md);
  background: var(--cm-surface);
  color: var(--cm-text);
  font: inherit;
  box-shadow: var(--cm-shadow-xs);
  transition: border-color var(--cm-dur) var(--cm-ease),
              box-shadow var(--cm-dur) var(--cm-ease);
}
.cm-select, .form-select {
  /* Seta propria: a nativa muda de forma em cada sistema e quebra o ritmo. */
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2355677E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 38px;
}
.cm-textarea { min-height: 124px; resize: vertical; line-height: 1.6; }
.cm-input:hover, .cm-select:hover, .cm-textarea:hover { border-color: var(--cm-neutral-500); }
.cm-input:focus, .cm-select:focus, .cm-textarea:focus,
.form-control:focus, .form-select:focus {
  border-color: var(--cm-primary-500);
  box-shadow: var(--cm-ring);
  outline: none;
}
.cm-input[disabled], .cm-input[readonly] {
  background: var(--cm-surface-sunken);
  color: var(--cm-text-muted);
  box-shadow: none;
}
.cm-input.cm-erro, .form-control.cm-erro { border-color: var(--cm-danger-500); }
.cm-input.cm-erro:focus { box-shadow: 0 0 0 3px rgba(200,53,42,.18); }
.cm-ajuda { font-size: .8125rem; color: var(--cm-text-muted); margin-top: 6px; }
.cm-erro-campo { font-size: .8125rem; color: var(--cm-danger-700); font-weight: 600; margin-top: 6px; }

.cm-linha-campos { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cm-linha-campos.cm-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.cm-check { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; }
.cm-check input[type=checkbox], .cm-check input[type=radio] {
  width: 18px; height: 18px; margin-top: 2px; flex: none;
  accent-color: var(--cm-primary-500);
}
.cm-check label { font-weight: 500; margin: 0; }

/* Escolha em cartao: usada em situacao e visibilidade do anexo.
   Selecionado muda borda E fundo — cor sozinha nao comunica. */
.cm-opcoes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cm-opcao {
  position: relative;
  border: 1.5px solid var(--cm-border);
  border-radius: var(--cm-radius-md);
  padding: 13px 15px;
  cursor: pointer;
  background: var(--cm-surface);
  transition: border-color var(--cm-dur) var(--cm-ease),
              background var(--cm-dur) var(--cm-ease),
              box-shadow var(--cm-dur) var(--cm-ease);
}
.cm-opcao:hover { border-color: var(--cm-border-strong); }
.cm-opcao:has(input:checked) {
  border-color: var(--cm-tom, var(--cm-primary-500));
  background: color-mix(in srgb, var(--cm-tom, var(--cm-primary-500)) 7%, var(--cm-surface));
  box-shadow: 0 0 0 1px var(--cm-tom, var(--cm-primary-500));
}
.cm-opcao:has(input:focus-visible) { box-shadow: var(--cm-ring); }
.cm-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.cm-opcao-titulo { font-weight: 700; font-size: .875rem; display: flex; align-items: center; gap: 8px; }
.cm-opcao-desc { font-size: .8125rem; color: var(--cm-text-muted); margin-top: 3px; }

/* Zona de upload — DESIGN.md §6 */
.cm-drop {
  border: 2px dashed var(--cm-border-strong);
  border-radius: var(--cm-radius-lg);
  background: var(--cm-surface-sunken);
  min-height: 150px;
  display: grid; place-items: center;
  text-align: center;
  padding: 26px;
  cursor: pointer;
  transition: border-color var(--cm-dur) var(--cm-ease),
              background var(--cm-dur) var(--cm-ease);
}
.cm-drop:hover { border-color: var(--cm-primary-300); background: var(--cm-primary-50); }
.cm-drop.cm-arrastando {
  border-style: solid;
  border-color: var(--cm-primary-500);
  background: var(--cm-primary-50);
}
.cm-drop-icone {
  width: 52px; height: 52px; margin: 0 auto;
  border-radius: var(--cm-radius-md);
  display: grid; place-items: center;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  box-shadow: var(--cm-shadow-xs);
  font-size: 1.375rem; color: var(--cm-primary-500);
}
/* O ícone é um SVG inline e herda a cor do bloco acima. 24px num quadro de
   52px deixa a moldura respirar; o traço fino do desenho fica ilegível se for
   esticado além disso. */
.cm-drop-svg { width: 24px; height: 24px; display: block; }
.cm-drop-titulo { font-weight: 700; margin-top: 12px; }
.cm-drop input[type=file] { display: none; }

.cm-arquivos { list-style: none; margin: 16px 0 0; padding: 0; }
.cm-arquivo {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 13px;
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-md);
  background: var(--cm-surface);
  margin-bottom: 8px;
  transition: border-color var(--cm-dur) var(--cm-ease), box-shadow var(--cm-dur) var(--cm-ease);
}
.cm-arquivo:hover { border-color: var(--cm-border-strong); box-shadow: var(--cm-shadow-xs); }
.cm-arquivo-icone {
  width: 38px; height: 38px; flex: none;
  border-radius: var(--cm-radius-sm);
  display: grid; place-items: center;
  background: var(--cm-primary-50);
  color: var(--cm-primary-700);
  border: 1px solid var(--cm-primary-100);
  font-size: .625rem; font-weight: 800; letter-spacing: .04em;
}
.cm-arquivo-nome { font-weight: 600; font-size: .875rem; word-break: break-word; display: block; }
.cm-arquivo-meta { font-size: .75rem; color: var(--cm-text-muted); display: block; }

/* --------------------------------------------------------------------------
   12. Botoes — a matriz completa de DESIGN.md §9
   O Bootstrap compila cor literal em cada variante; redeclarar o token nao
   basta, entao cada variante em uso e reescrita aqui.
   -------------------------------------------------------------------------- */
.btn, .cm-btn {
  --cm-btn-bg: transparent;
  --cm-btn-fg: var(--cm-text);
  --cm-btn-bd: transparent;
  --cm-btn-sombra: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 17px;
  border: 1px solid var(--cm-btn-bd);
  border-radius: var(--cm-radius-md);
  background: var(--cm-btn-bg);
  color: var(--cm-btn-fg);
  box-shadow: var(--cm-btn-sombra);
  font: inherit; font-weight: 700; font-size: .875rem;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--cm-dur) var(--cm-ease),
              border-color var(--cm-dur) var(--cm-ease),
              color var(--cm-dur) var(--cm-ease),
              box-shadow var(--cm-dur) var(--cm-ease),
              transform var(--cm-dur) var(--cm-ease);
}
.btn:hover, .cm-btn:hover { text-decoration: none; }
.btn:active, .cm-btn:active { transform: translateY(1px); }
.btn:disabled, .cm-btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary   { --cm-btn-bg: var(--cm-primary-500); --cm-btn-fg: #FFFFFF; --cm-btn-bd: var(--cm-primary-500);
                 --cm-btn-sombra: 0 1px 2px rgba(10,63,104,.24), 0 6px 16px -6px rgba(10,63,104,.5); }
.btn-primary:hover { --cm-btn-bg: var(--cm-primary-600); --cm-btn-bd: var(--cm-primary-600); color: #FFFFFF; }
.btn-primary:active { --cm-btn-bg: var(--cm-primary-700); }

.btn-success   { --cm-btn-bg: var(--cm-success-500); --cm-btn-fg: #FFFFFF; --cm-btn-bd: var(--cm-success-500);
                 --cm-btn-sombra: 0 1px 2px rgba(11,94,67,.24), 0 6px 16px -6px rgba(11,94,67,.45); }
.btn-success:hover { --cm-btn-bg: var(--cm-success-700); --cm-btn-bd: var(--cm-success-700); color: #FFFFFF; }

.btn-danger    { --cm-btn-bg: var(--cm-danger-500); --cm-btn-fg: #FFFFFF; --cm-btn-bd: var(--cm-danger-500);
                 --cm-btn-sombra: 0 1px 2px rgba(154,40,31,.24), 0 6px 16px -6px rgba(154,40,31,.45); }
.btn-danger:hover { --cm-btn-bg: var(--cm-danger-700); --cm-btn-bd: var(--cm-danger-700); color: #FFFFFF; }

/* Confirmação de ação que muda o rumo do processo sem destruir nada —
   arquivar, tramitar para outro setor. Fica entre o azul (só avança) e o
   vermelho (não se desfaz), e é o modal de confirmação que a usa.
   O texto é branco sobre `--cm-warning-500`, que é âmbar escuro o bastante
   (5,4:1) para carregar texto — o âmbar da marca não seria. */
.btn-warning   { --cm-btn-bg: var(--cm-warning-500); --cm-btn-fg: #FFFFFF; --cm-btn-bd: var(--cm-warning-500);
                 --cm-btn-sombra: 0 1px 2px rgba(138,97,8,.24), 0 6px 16px -6px rgba(138,97,8,.45); }
.btn-warning:hover { --cm-btn-bg: var(--cm-accent-700); --cm-btn-bd: var(--cm-accent-700); color: #FFFFFF; }

.btn-info      { --cm-btn-bg: var(--cm-primary-500); --cm-btn-fg: #FFFFFF; --cm-btn-bd: var(--cm-primary-500); }
.btn-info:hover { --cm-btn-bg: var(--cm-primary-600); --cm-btn-bd: var(--cm-primary-600); color: #FFFFFF; }

.btn-light     { --cm-btn-bg: var(--cm-surface); --cm-btn-fg: var(--cm-text); --cm-btn-bd: var(--cm-border-strong);
                 --cm-btn-sombra: var(--cm-shadow-xs); }
.btn-light:hover { --cm-btn-bg: var(--cm-surface-sunken); --cm-btn-bd: var(--cm-neutral-500); }

.btn-outline-primary   { --cm-btn-fg: var(--cm-primary-600); --cm-btn-bd: var(--cm-primary-500); --cm-btn-bg: var(--cm-surface); }
.btn-outline-primary:hover { --cm-btn-bg: var(--cm-primary-500); --cm-btn-fg: #FFFFFF; }

.btn-outline-secondary { --cm-btn-fg: var(--cm-neutral-700); --cm-btn-bd: var(--cm-border-strong); --cm-btn-bg: var(--cm-surface); }
.btn-outline-secondary:hover { --cm-btn-bg: var(--cm-surface-sunken); --cm-btn-fg: var(--cm-text); --cm-btn-bd: var(--cm-neutral-500); }

.btn-outline-success   { --cm-btn-fg: var(--cm-success-700); --cm-btn-bd: var(--cm-success-500); --cm-btn-bg: var(--cm-surface); }
.btn-outline-success:hover { --cm-btn-bg: var(--cm-success-500); --cm-btn-fg: #FFFFFF; }

.btn-outline-danger    { --cm-btn-fg: var(--cm-danger-700); --cm-btn-bd: var(--cm-danger-500); --cm-btn-bg: var(--cm-surface); }
.btn-outline-danger:hover { --cm-btn-bg: var(--cm-danger-500); --cm-btn-fg: #FFFFFF; }

.btn-outline-warning   { --cm-btn-fg: var(--cm-accent-700); --cm-btn-bd: var(--cm-accent-600); --cm-btn-bg: var(--cm-surface); }
.btn-outline-warning:hover { --cm-btn-bg: var(--cm-accent-600); --cm-btn-fg: #FFFFFF; }

.btn-outline-info      { --cm-btn-fg: var(--cm-primary-600); --cm-btn-bd: var(--cm-primary-500); --cm-btn-bg: var(--cm-surface); }
.btn-outline-info:hover { --cm-btn-bg: var(--cm-primary-500); --cm-btn-fg: #FFFFFF; }

.btn-outline-light     { --cm-btn-fg: var(--cm-sobre-ink); --cm-btn-bd: rgba(255,255,255,.3); }
.btn-outline-light:hover { --cm-btn-bg: rgba(255,255,255,.14); --cm-btn-fg: #FFFFFF; }

.btn-sm { padding: 7px 12px; font-size: .8125rem; border-radius: var(--cm-radius-sm); gap: 6px; }
.btn-lg { padding: 14px 24px; font-size: 1rem; border-radius: var(--cm-radius-md); }
.cm-btn-bloco { width: 100%; }

/* Botao so de icone: quadrado, e exige title — o unico rotulo que ele tem.
   Classe explicita, nunca :has(> i:only-child). */
.cm-btn-icone { padding: 0; width: 38px; height: 38px; flex: none; }
.cm-btn-icone.btn-sm { width: 34px; height: 34px; }

.cm-acoes { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.cm-acoes-fim { margin-left: auto; }

/* --------------------------------------------------------------------------
   13. Alertas e estados vazios
   -------------------------------------------------------------------------- */
.cm-alerta {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 15px 18px;
  border: 1px solid color-mix(in srgb, var(--cm-tom, var(--cm-primary-500)) 26%, transparent);
  border-left: 3px solid var(--cm-tom, var(--cm-primary-500));
  border-radius: var(--cm-radius-md);
  background: var(--cm-tom-fundo, var(--cm-primary-50));
  color: var(--cm-text);
  margin-bottom: 18px;
  font-size: .9375rem;
  box-shadow: var(--cm-shadow-xs);
}
.cm-alerta i { color: var(--cm-tom-texto); font-size: 1.125rem; margin-top: 1px; flex: none; }
.cm-alerta-titulo { font-weight: 800; display: block; }
.cm-alerta-fechar {
  margin-left: auto; background: none; border: 0; padding: 0 2px;
  color: var(--cm-text-muted); cursor: pointer; line-height: 1;
  border-radius: var(--cm-radius-sm);
}
.cm-alerta-fechar:hover { color: var(--cm-text); }

.cm-vazio { text-align: center; padding: 56px 24px; color: var(--cm-text-muted); }
.cm-vazio-icone {
  width: 72px; height: 72px; margin: 0 auto 18px;
  border-radius: var(--cm-radius-xl);
  background: linear-gradient(160deg, var(--cm-primary-50), var(--cm-surface-sunken));
  border: 1px solid var(--cm-border);
  display: grid; place-items: center;
  font-size: 1.625rem; color: var(--cm-primary-500);
  box-shadow: var(--cm-shadow-xs);
}
.cm-vazio h3 { font-size: 1.125rem; color: var(--cm-text); margin: 0 0 8px; }
.cm-vazio p { margin: 0 auto 20px; max-width: 460px; }

/* --------------------------------------------------------------------------
   14. Filtros e paginacao
   -------------------------------------------------------------------------- */
.cm-filtros {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
}
.cm-filtros .cm-campo { margin: 0; }
.cm-filtros-acoes { display: flex; gap: 9px; }
.cm-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.cm-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px;
  border-radius: var(--cm-radius-pill);
  background: var(--cm-primary-50);
  border: 1px solid var(--cm-primary-100);
  color: var(--cm-primary-700);
  font-size: .8125rem; font-weight: 600;
}
.cm-chip a { color: inherit; opacity: .7; font-weight: 800; line-height: 1; }
.cm-chip a:hover { opacity: 1; text-decoration: none; }

.cm-paginacao { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cm-paginas { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.cm-paginas a, .cm-paginas span {
  min-width: 38px; height: 38px;
  padding: 0 11px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-sm);
  background: var(--cm-surface);
  color: var(--cm-text);
  font-size: .875rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--cm-dur) var(--cm-ease), color var(--cm-dur) var(--cm-ease);
}
.cm-paginas a:hover { border-color: var(--cm-primary-300); color: var(--cm-primary-700); text-decoration: none; }
.cm-paginas .cm-pagina-atual {
  background: var(--cm-primary-500); border-color: var(--cm-primary-500); color: #FFFFFF;
  box-shadow: 0 4px 12px -4px rgba(10,63,104,.55);
}
.cm-paginas .cm-reticencias { border: 0; background: none; color: var(--cm-text-muted); min-width: 20px; padding: 0; }

/* --------------------------------------------------------------------------
   15. Detalhe do processo
   -------------------------------------------------------------------------- */
.cm-detalhe-topo {
  display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;
  padding: 24px 26px;
  border-bottom: 1px solid var(--cm-border-suave);
  background: linear-gradient(180deg, var(--cm-surface-sunken), var(--cm-surface));
  border-radius: var(--cm-radius-lg) var(--cm-radius-lg) 0 0;
}
.cm-detalhe-topo .cm-detalhe-acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.cm-dados { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cm-dado-rotulo {
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--cm-text-muted); margin-bottom: 4px;
}
.cm-dado-valor { font-weight: 600; word-break: break-word; }
.cm-dado-valor.cm-longo { font-weight: 400; white-space: pre-wrap; line-height: 1.65; }

.cm-colunas { display: grid; gap: 18px; grid-template-columns: minmax(0,2fr) minmax(0,1fr); align-items: start; }
@media (max-width: 1023.98px) { .cm-colunas { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   16. Grafico — DESIGN.md §10

   Barra nominal usa UMA cor: o eixo ja nomeia a categoria e o comprimento ja
   mostra o valor. As linhas de grade sao mais fracas que a menor barra, para
   nunca competirem com o dado.
   -------------------------------------------------------------------------- */
.cm-gr { width: 100%; height: auto; display: block; overflow: visible; }
.cm-gr-grade    { stroke: var(--cm-border); stroke-width: 1; }
.cm-gr-base     { stroke: var(--cm-border-strong); stroke-width: 1; }
.cm-gr-barra    { fill: var(--cm-primary-500); transition: fill var(--cm-dur) var(--cm-ease); }
.cm-gr-barra-0  { fill: var(--cm-border); }
.cm-gr-col:hover .cm-gr-barra { fill: var(--cm-primary-700); }
.cm-gr-col:hover .cm-gr-valor { fill: var(--cm-text); }
.cm-gr-valor {
  fill: var(--cm-text-muted);
  font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
}
.cm-gr-rotulo {
  fill: var(--cm-text-muted);
  font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  text-anchor: middle;
}
.cm-gr-eixo {
  fill: var(--cm-text-muted);
  font-size: 10px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-anchor: end;
}

/* Barra horizontal proporcional, usada em "por situacao" e "por tipo" */
.cm-barra {
  display: block;
  height: 9px;
  border-radius: var(--cm-radius-pill);
  background: var(--cm-surface-sunken);
  overflow: hidden;
}
.cm-barra > span {
  display: block; height: 100%;
  border-radius: var(--cm-radius-pill);
  background: var(--cm-tom, var(--cm-primary-500));
  transition: width var(--cm-dur) var(--cm-ease);
}
.cm-linha-dado {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.cm-linha-dado .cm-valor { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
a.cm-item-dado { display: block; margin-bottom: 16px; text-decoration: none; color: inherit; }
a.cm-item-dado:hover { text-decoration: none; }
a.cm-item-dado:hover .cm-barra > span { filter: brightness(.88); }

/* --------------------------------------------------------------------------
   17. Portal do cidadao — mesma casa, mais larga
   -------------------------------------------------------------------------- */
.cm-portal { font-size: 1rem; }
.cm-portal .btn,
.cm-portal .cm-input, .cm-portal .cm-select, .cm-portal .form-control {
  min-height: 48px;   /* alvo de toque — DESIGN.md §6 */
}
.cm-portal .cm-textarea { min-height: 150px; }

.cm-portal-topo {
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
  background:
    radial-gradient(90% 120% at 78% -10%, rgba(88,128,218,.55) 0%, rgba(88,128,218,0) 60%),
    radial-gradient(70% 90% at 8% 110%,   rgba(201,241,126,.14) 0%, rgba(201,241,126,0) 62%),
    linear-gradient(180deg, var(--cm-ink-850), var(--cm-ink-900));
}
/* Fio dourado no pé do cromo: o único lugar em que o acento atravessa a tela
   inteira, marcando onde a Casa termina e o conteúdo começa. */
.cm-portal-topo::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg,
    rgba(201,241,126,0), var(--cm-accent-500) 22%, var(--cm-accent-500) 78%, rgba(201,241,126,0));
  opacity: .55;
}

.cm-portal-barra {
  position: relative; z-index: 2;
  max-width: var(--cm-largura); margin: 0 auto;
  padding: 16px 22px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cm-portal-barra .cm-marca { padding: 0; }
.cm-portal-barra .cm-marca::after { display: none; }
.cm-portal-nav { margin-left: auto; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.cm-portal-nav a {
  position: relative;
  color: var(--cm-sobre-ink-suave);
  font-size: .9375rem; font-weight: 600;
  padding: 10px 14px; border-radius: var(--cm-radius-sm);
  transition: background var(--cm-dur) var(--cm-ease), color var(--cm-dur) var(--cm-ease);
}
.cm-portal-nav a:hover { background: rgba(255,255,255,.08); color: #FFFFFF; text-decoration: none; }
.cm-portal-nav a.ativo { color: #FFFFFF; background: rgba(255,255,255,.08); }
.cm-portal-nav a.ativo::after {
  content: '';
  position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
  border-radius: 2px; background: var(--cm-accent-500);
}

/* Hero: duas colunas — a promessa à esquerda, a ação imediata à direita.
   O monograma vazado ao fundo é a marca-d'água prevista em DESIGN.md §8. */
.cm-hero {
  position: relative; z-index: 2;
  max-width: var(--cm-largura); margin: 0 auto;
  padding: 46px 22px 58px;
  display: grid; gap: 40px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
}
.cm-hero-marca-agua {
  position: absolute; right: -60px; top: 50%;
  transform: translateY(-50%);
  width: 420px; height: 420px;
  opacity: .05; pointer-events: none;
  z-index: -1;
}
.cm-hero .cm-eyebrow { color: var(--cm-accent-500); }
.cm-hero h1 {
  color: #FFFFFF;
  font-size: clamp(2rem, 1.35rem + 2.1vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  max-width: 15ch;
  margin: 8px 0 14px;
}
.cm-hero p {
  color: var(--cm-sobre-ink-suave);
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 52ch;
  margin: 0;
}
.cm-hero-acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* Cartão de vidro sobre o cromo: a consulta fica ao alcance na primeira tela,
   sem obrigar o cidadão a procurar no menu. */
.cm-hero-cartao {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--cm-radius-xl);
  padding: 26px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 48px -24px rgba(0,0,0,.6);
}
.cm-hero-cartao h2 { color: #FFFFFF; font-size: 1.125rem; margin: 0 0 4px; }
.cm-hero-cartao p  { color: var(--cm-sobre-ink-suave); font-size: .9375rem; margin: 0 0 18px; }
.cm-hero-cartao label { color: var(--cm-sobre-ink); font-size: .8125rem; font-weight: 700; display: block; margin-bottom: 6px; }
.cm-hero-cartao .cm-input {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.2);
  color: #FFFFFF;
  box-shadow: none;
}
.cm-hero-cartao .cm-input::placeholder { color: rgba(255,255,255,.42); }
.cm-hero-cartao .cm-input:hover { border-color: rgba(255,255,255,.36); }
.cm-hero-cartao .cm-input:focus {
  border-color: var(--cm-accent-500);
  box-shadow: 0 0 0 3px rgba(201,241,126,.22);
  background: rgba(255,255,255,.13);
}
.cm-hero-cartao .cm-ajuda { color: var(--cm-sobre-ink-fraco); }

@media (max-width: 899.98px) {
  .cm-hero { grid-template-columns: 1fr; gap: 32px; padding: 34px 20px 44px; }
  .cm-hero-marca-agua { display: none; }
}

.cm-portal-main { max-width: var(--cm-largura); margin: 0 auto; padding: 34px 22px 56px; }
.cm-portal-estreito { max-width: 760px; }

/* Rodape do portal.

   E a terceira peca de cromo escuro da tela — depois da barra e do hero — e
   por isso repete a mesma receita: halo radial no topo, fio de luz na juncao e
   o dourado so como filete. Sem isso ele vira uma tira preta chapada no pe da
   pagina, que e o que denuncia rodape feito por ultimo.

   O conteudo e institucional, nao decorativo: endereco e horario respondem
   "quando posso ir ate la", e a coluna de transparencia diz ao cidadao qual e
   o direito que ele esta exercendo ao protocolar. */
.cm-portal-rodape {
  position: relative;
  color: var(--cm-sobre-ink-suave);
  padding: 0 22px;
  font-size: .875rem;
  background:
    radial-gradient(80% 120% at 15% 0%, rgba(88,128,218,.28) 0%, rgba(88,128,218,0) 62%),
    linear-gradient(180deg, var(--cm-ink-850), var(--cm-ink-900));
  box-shadow: inset 0 1px 0 var(--cm-ink-fio);
}
/* Filete dourado na junção com o conteúdo: o mesmo gesto do pé do hero,
   fechando a página com a cor da Casa. */
.cm-portal-rodape::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg,
    rgba(201,241,126,0), var(--cm-accent-500) 25%, var(--cm-accent-500) 75%, rgba(201,241,126,0));
  opacity: .4;
}

.cm-portal-rodape-int {
  max-width: var(--cm-largura);
  margin: 0 auto;
  padding: 44px 0 32px;
  display: grid;
  gap: 36px 32px;
  /* A coluna da marca é mais larga: ela carrega o nome do órgão, que é longo. */
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
}
@media (max-width: 899.98px) {
  .cm-portal-rodape-int { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px 24px; padding: 34px 0 26px; }
}

.cm-rodape-marca { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 14px; }
.cm-rodape-marca img { width: 42px; height: 42px; flex: none; border-radius: 11px; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.cm-rodape-marca-nome { display: block; color: #FFFFFF; font-weight: 800; font-size: .9375rem; line-height: 1.3; letter-spacing: -.015em; }
.cm-rodape-marca-sub {
  display: block; margin-top: 2px;
  color: var(--cm-accent-500);
  font-size: .625rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.cm-rodape-sobre { color: var(--cm-sobre-ink-fraco); max-width: 42ch; margin: 0; font-size: .8125rem; line-height: 1.7; }

.cm-rodape-titulo {
  color: var(--cm-sobre-ink);
  font-size: .625rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  margin: 0 0 14px;
}

.cm-rodape-lista { list-style: none; margin: 0; padding: 0; }
.cm-rodape-lista li { margin-bottom: 9px; line-height: 1.5; }
.cm-rodape-lista li:last-child { margin-bottom: 0; }
/* Item com ícone: o ícone alinha pela primeira linha do texto, não pelo centro
   do bloco, senão endereço de duas linhas fica com o pino no meio do nada. */
.cm-rodape-item { display: flex; align-items: flex-start; gap: 9px; }
.cm-rodape-item i { color: var(--cm-primary-300); font-size: .875rem; margin-top: 3px; flex: none; }

.cm-portal-rodape a {
  color: var(--cm-sobre-ink-suave);
  transition: color var(--cm-dur) var(--cm-ease);
}
.cm-portal-rodape a:hover { color: #FFFFFF; text-decoration: none; }
/* O link de navegação ganha um traço que cresce da esquerda — movimento só de
   cor e transformação, dentro do que a §7 permite. */
.cm-rodape-lista a { position: relative; }
.cm-rodape-lista a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--cm-accent-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--cm-dur) var(--cm-ease);
}
.cm-rodape-lista a:hover::after { transform: scaleX(1); }
.cm-portal-rodape strong { color: #FFFFFF; font-weight: 700; }

.cm-rodape-base {
  max-width: var(--cm-largura);
  margin: 0 auto;
  padding: 18px 0 26px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  color: var(--cm-sobre-ink-fraco);
  font-size: .8125rem;
}
.cm-rodape-topo {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--cm-radius-pill);
  transition: background var(--cm-dur) var(--cm-ease), border-color var(--cm-dur) var(--cm-ease);
}
.cm-rodape-topo:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.3); }
@media (max-width: 599.98px) { .cm-rodape-topo { margin-left: 0; } }

/* Passos numerados da home do portal */
.cm-passos { counter-reset: passo; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.cm-passo {
  position: relative;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border-suave);
  border-radius: var(--cm-radius-lg);
  padding: 24px 22px;
  box-shadow: var(--cm-shadow-sm);
  transition: transform var(--cm-dur) var(--cm-ease), box-shadow var(--cm-dur) var(--cm-ease);
}
.cm-passo:hover { transform: translateY(-2px); box-shadow: var(--cm-shadow-md); }
.cm-passo::before {
  counter-increment: passo;
  content: counter(passo);
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--cm-radius-pill);
  background: linear-gradient(160deg, var(--cm-primary-500), var(--cm-primary-700));
  color: #FFFFFF; font-weight: 800; font-size: 1rem;
  margin-bottom: 14px;
  box-shadow: 0 6px 16px -6px rgba(10,63,104,.7);
}
.cm-passo h3 { font-size: 1.0625rem; margin: 0 0 7px; }
.cm-passo p { margin: 0; color: var(--cm-text-muted); font-size: .9375rem; }

/* Cabecalho de secao no portal */
.cm-secao-titulo { margin: 0 0 4px; }
.cm-secao { margin-bottom: 34px; }
.cm-secao > .cm-legenda { margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   18. Telas de autenticacao (admin e portal)
   -------------------------------------------------------------------------- */
.cm-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.cm-auth-marca {
  color: #FFFFFF;
  padding: 56px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
  background:
    radial-gradient(80% 70% at 12% 8%,  rgba(88,128,218,.55) 0%, rgba(88,128,218,0) 62%),
    radial-gradient(70% 60% at 88% 96%, rgba(201,241,126,.14) 0%, rgba(201,241,126,0) 64%),
    linear-gradient(160deg, var(--cm-ink-850), var(--cm-ink-900));
}
.cm-auth-marca > * { position: relative; z-index: 2; }
/* O filete divisor da marca só faz sentido na sidebar, onde separa do menu. */
.cm-auth-marca .cm-marca::after { display: none; }
.cm-auth-marca-agua {
  position: absolute; right: -90px; bottom: -70px;
  width: 400px; height: 400px;
  opacity: .06; z-index: 1; pointer-events: none;
}
.cm-auth-marca h1 {
  color: #FFFFFF;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.125rem);
  letter-spacing: -.03em;
  line-height: 1.15;
  margin: 26px 0 14px;
  max-width: 16ch;
}
.cm-auth-marca p { color: var(--cm-sobre-ink-suave); max-width: 46ch; font-size: 1rem; line-height: 1.65; }
.cm-auth-form { display: grid; place-items: center; padding: 44px 26px; background: var(--cm-canvas); }
.cm-auth-caixa { width: 100%; max-width: 408px; }
@media (max-width: 899.98px) {
  .cm-auth { grid-template-columns: 1fr; }
  .cm-auth-marca { padding: 32px 26px; }
  .cm-auth-marca-agua { display: none; }
}

.cm-pagina-erro { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: var(--cm-canvas); }
.cm-erro-caixa {
  background: var(--cm-surface);
  border: 1px solid var(--cm-border-suave);
  border-radius: var(--cm-radius-xl);
  box-shadow: var(--cm-shadow-md);
  padding: 48px;
  max-width: 540px; text-align: center;
}
.cm-erro-codigo {
  font-family: ui-monospace, Consolas, monospace;
  font-weight: 700; letter-spacing: .14em;
  background: var(--cm-surface-sunken);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-sm);
  padding: 9px 15px; display: inline-block; margin: 10px 0 22px;
}

/* --------------------------------------------------------------------------
   19. Impressao — o comprovante
   -------------------------------------------------------------------------- */
@media print {
  .cm-sidebar, .cm-topo, .cm-portal-topo, .cm-portal-rodape,
  .cm-nao-imprime, .btn, .cm-acoes { display: none !important; }
  .cm-conteudo { margin-left: 0; }
  .cm-main, .cm-portal-main { padding: 0; }
  body { background: #FFFFFF; font-size: 11pt; }
  .cm-card {
    border: 1px solid #999999;
    box-shadow: none;
    break-inside: avoid;
    border-radius: 0;
  }
  .cm-detalhe-topo, .cm-card-rodape { background: none; }
  .cm-badge { border: 1px solid #666666 !important; color: #000000 !important; background: none !important; }
  .cm-chave { border: 1px dashed #666666; background: none; color: #000000; }
  .cm-comprovante { max-width: 100%; }
  a[href]::after { content: ''; }
  @page { margin: 1.6cm; }
}

.cm-comprovante-cabeca {
  display: flex; align-items: center; gap: 18px;
  padding-bottom: 18px; margin-bottom: 24px;
  border-bottom: 2px solid var(--cm-ink-900);
}
.cm-comprovante-cabeca h1 { font-size: 1.1875rem; margin: 0; letter-spacing: -.02em; }
.cm-comprovante-cabeca p { margin: 2px 0 0; font-size: .8125rem; color: var(--cm-text-muted); }

/* --------------------------------------------------------------------------
   20. Responsivo do admin
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .cm-sidebar {
    transform: translateX(-100%);
    transition: transform var(--cm-dur) var(--cm-ease);
    box-shadow: var(--cm-shadow-lg);
  }
  body.cm-menu-aberto .cm-sidebar { transform: translateX(0); }
  .cm-conteudo { margin-left: 0; }
  .cm-hamburguer {
    display: inline-flex;
    width: 42px; height: 42px;
    align-items: center; justify-content: center;
    border: 1px solid var(--cm-border-strong);
    border-radius: var(--cm-radius-sm);
    background: var(--cm-surface);
    color: var(--cm-text);
    cursor: pointer;
    box-shadow: var(--cm-shadow-xs);
  }
  .cm-veu {
    position: fixed; inset: 0;
    background: rgba(23,26,23,.5);
    backdrop-filter: blur(2px);
    z-index: 1035;
    opacity: 0; pointer-events: none;
    transition: opacity var(--cm-dur) var(--cm-ease);
  }
  body.cm-menu-aberto .cm-veu { opacity: 1; pointer-events: auto; }
  .cm-main { padding: 18px; }
  .cm-topo { padding: 13px 18px; }
  .cm-topo h1 { font-size: 1.1875rem; }
}

/* --------------------------------------------------------------------------
   21. Movimento reduzido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .cm-stat:hover, .cm-passo:hover, .btn:active { transform: none; }
}

/* --------------------------------------------------------------------------
   22. Carta de Serviços — o cardápio do cidadão

   Substitui, no portal, a lista de tipos internos. Cada linha é um alvo grande
   e único: no celular o dedo acerta a linha inteira, não só o título.
   -------------------------------------------------------------------------- */
.cm-servicos { display: grid; gap: 12px; }

.cm-servico {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 22px;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border-suave);
  border-radius: var(--cm-radius-lg);
  box-shadow: var(--cm-shadow-sm);
  color: inherit; text-decoration: none;
  transition: transform var(--cm-dur) var(--cm-ease),
              box-shadow var(--cm-dur) var(--cm-ease),
              border-color var(--cm-dur) var(--cm-ease);
}
.cm-servico:hover {
  transform: translateY(-2px);
  box-shadow: var(--cm-shadow-md);
  border-color: var(--cm-primary-100);
  text-decoration: none; color: inherit;
}
.cm-servico:hover .cm-servico-seta { transform: translateX(3px); color: var(--cm-primary-500); }

.cm-servico-icone {
  width: 52px; height: 52px; flex: none;
  border-radius: var(--cm-radius-md);
  display: grid; place-items: center;
  font-size: 1.375rem;
  background: var(--cm-primary-50);
  color: var(--cm-primary-600);
  border: 1px solid var(--cm-primary-100);
}
.cm-servico-corpo { flex: 1; min-width: 0; }
.cm-servico-nome { display: block; font-weight: 800; font-size: 1.0625rem; letter-spacing: -.012em; }
.cm-servico-desc { display: block; color: var(--cm-text-muted); font-size: .9375rem; margin-top: 3px; }
.cm-servico-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.cm-servico-seta {
  flex: none; color: var(--cm-text-muted); font-size: 1.125rem;
  transition: transform var(--cm-dur) var(--cm-ease), color var(--cm-dur) var(--cm-ease);
}

.cm-servico-cabeca { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; }

/* Hero sem cartão lateral, usado nas telas internas do portal */
.cm-hero-simples { grid-template-columns: 1fr; padding-bottom: 44px; }

@media (max-width: 599.98px) {
  /* Icone no topo, e nao centralizado: com titulo de duas linhas mais
     descricao, o icone centralizado flutua no meio do nada. DESIGN.md §11. */
  .cm-servico { padding: 15px 14px; gap: 13px; align-items: flex-start; }
  .cm-servico-icone { width: 42px; height: 42px; font-size: 1.0625rem; }
  .cm-servico-nome { font-size: 1rem; }
  .cm-servico-desc { font-size: .875rem; }
  .cm-servico-meta { margin-top: 8px; gap: 8px; }

  /* A seta FICA. Ela estava escondida aqui, e era exatamente ao contrario:
     no celular nao ha hover, entao a seta e a unica pista de que o cartao
     leva a algum lugar. */
  .cm-servico-seta { align-self: center; font-size: 1rem; }

  /* Sem hover no toque: o retorno vem do estado pressionado. Sem ele a pessoa
     nao sabe se o toque pegou e toca de novo — o que abre dois protocolos. */
  .cm-servico:active {
    transform: none;
    background: var(--cm-surface-sunken);
    border-color: var(--cm-primary-100);
  }
}

/* --------------------------------------------------------------------------
   23. Prazo — a promessa feita ao cidadão

   Aparece no topo do protocolo porque é a pergunta que ele veio fazer.
   O tom carrega o estado: verde no prazo, dourado perto do fim, vermelho
   vencido, cinza encerrado.
   -------------------------------------------------------------------------- */
.cm-prazo {
  display: flex; align-items: center; gap: 15px;
  padding: 16px 24px;
  background: color-mix(in srgb, var(--cm-tom, var(--cm-primary-500)) 8%, var(--cm-surface));
  border-top: 1px solid var(--cm-border-suave);
  border-bottom: 1px solid var(--cm-border-suave);
}
.cm-prazo-icone {
  width: 42px; height: 42px; flex: none;
  border-radius: var(--cm-radius-md);
  display: grid; place-items: center;
  font-size: 1.125rem;
  background: color-mix(in srgb, var(--cm-tom) 15%, transparent);
  color: var(--cm-tom-texto, var(--cm-tom));
}
.cm-prazo-texto {
  margin: 0; font-weight: 800; font-size: 1.0625rem;
  color: var(--cm-tom-texto, var(--cm-text));
  letter-spacing: -.012em;
}

/* --------------------------------------------------------------------------
   24. Conversa do protocolo

   Os dois lados no mesmo fio. Quem fala decide de que lado o balão encosta —
   e "meu lado" muda conforme quem está olhando: no admin o servidor é nós, no
   portal é o cidadão.

   A anotação interna não é um segundo lugar: é o mesmo fio, marcada. Quem
   atende precisa ler a história inteira de uma vez.
   -------------------------------------------------------------------------- */
.cm-conversa { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }

.cm-msg { display: flex; gap: 12px; align-items: flex-start; }
.cm-msg-minha { flex-direction: row-reverse; }

.cm-msg-avatar {
  width: 36px; height: 36px; flex: none;
  border-radius: var(--cm-radius-pill);
  display: grid; place-items: center;
  font-weight: 800; font-size: .8125rem;
  background: linear-gradient(160deg, var(--cm-primary-500), var(--cm-primary-700));
  color: #FFFFFF;
  box-shadow: var(--cm-shadow-xs);
}
.cm-msg-avatar-cidadao {
  background: linear-gradient(160deg, var(--cm-accent-600), var(--cm-accent-700));
}

.cm-msg-balao {
  max-width: 78%;
  background: var(--cm-surface-sunken);
  border: 1px solid var(--cm-border-suave);
  border-radius: var(--cm-radius-lg);
  padding: 13px 16px;
}
.cm-msg-minha .cm-msg-balao {
  background: var(--cm-primary-50);
  border-color: var(--cm-primary-100);
}
.cm-msg-privada .cm-msg-balao {
  background: var(--cm-neutral-50);
  border-style: dashed;
  border-color: var(--cm-border-strong);
}

.cm-msg-cabeca {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: .8125rem;
}
.cm-msg-cabeca strong { font-weight: 800; }
.cm-msg-papel {
  font-size: .625rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--cm-text-muted);
}
.cm-msg-hora { color: var(--cm-text-muted); font-size: .75rem; margin-left: auto; white-space: nowrap; }
.cm-msg-texto { white-space: pre-wrap; font-size: .9375rem; line-height: 1.6; }

/* Linha do sistema: não é fala de ninguém, então não ganha balão nem avatar. */
.cm-msg-sistema { justify-content: center; }
.cm-msg-sistema-texto {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: .8125rem; color: var(--cm-text-muted);
  background: var(--cm-surface-sunken);
  border: 1px solid var(--cm-border-suave);
  border-radius: var(--cm-radius-pill);
  padding: 6px 15px;
}
.cm-msg-sistema-texto .cm-msg-hora { margin-left: 4px; }

@media (max-width: 599.98px) {
  .cm-msg-balao { max-width: 100%; }
  .cm-msg-hora { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   25. Pesquisa de satisfação
   -------------------------------------------------------------------------- */
.cm-notas { display: grid; grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 10px; }
.cm-nota {
  position: relative;
  display: grid; justify-items: center; gap: 5px;
  padding: 14px 8px;
  border: 1.5px solid var(--cm-border);
  border-radius: var(--cm-radius-md);
  background: var(--cm-surface);
  cursor: pointer;
  transition: border-color var(--cm-dur) var(--cm-ease), background var(--cm-dur) var(--cm-ease);
}
.cm-nota:hover { border-color: var(--cm-border-strong); }
.cm-nota input { position: absolute; opacity: 0; pointer-events: none; }
.cm-nota:has(input:checked) {
  border-color: var(--cm-success-500);
  background: var(--cm-success-50);
  box-shadow: 0 0 0 1px var(--cm-success-500);
}
.cm-nota:has(input:focus-visible) { box-shadow: var(--cm-ring); }
.cm-nota-num { font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cm-nota-rotulo { font-size: .75rem; color: var(--cm-text-muted); text-align: center; }

/* --------------------------------------------------------------------------
   26. Carga por setor — barra do painel
   -------------------------------------------------------------------------- */
.cm-setor-linha {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--cm-border-suave);
  color: inherit; text-decoration: none;
}
.cm-setor-linha:last-child { border-bottom: 0; }
.cm-setor-linha:hover { text-decoration: none; color: inherit; }
.cm-setor-linha:hover .cm-setor-nome { color: var(--cm-primary-600); }
.cm-setor-sigla {
  font-size: .625rem; font-weight: 800; letter-spacing: .06em;
  padding: 3px 8px; border-radius: var(--cm-radius-sm);
  background: var(--cm-surface-sunken);
  border: 1px solid var(--cm-border);
  color: var(--cm-text-muted);
  flex: none; min-width: 62px; text-align: center;
}
.cm-setor-nome { font-size: .875rem; font-weight: 600; flex: 1; min-width: 0; }

/* --------------------------------------------------------------------------
   27. Formulário personalizado do serviço

   Os campos vêm de uma definição no banco, então a grade precisa acomodar
   larguras mistas sem que ninguém escreva CSS a cada campo novo.
   -------------------------------------------------------------------------- */
.cm-campos-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}
.cm-campos-grade > .cm-campo { grid-column: span 2; }
.cm-campos-grade > .cm-campo-meia { grid-column: span 1; }
@media (max-width: 599.98px) {
  .cm-campos-grade > .cm-campo-meia { grid-column: span 2; }
}
.cm-campo-opcoes {
  border: 1px solid var(--cm-border-strong);
  border-radius: var(--cm-radius-md);
  padding: 8px 14px;
  background: var(--cm-surface);
  box-shadow: var(--cm-shadow-xs);
}

/* --- Construtor: cada pergunta é uma sanfona --------------------------- */
.cm-campo-item {
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-md);
  margin-bottom: 10px;
  background: var(--cm-surface);
  transition: border-color var(--cm-dur) var(--cm-ease),
              box-shadow var(--cm-dur) var(--cm-ease);
}
.cm-campo-item[open] { border-color: var(--cm-primary-300); box-shadow: var(--cm-shadow-sm); }
.cm-campo-inativo { opacity: .62; border-style: dashed; }

.cm-campo-item > summary {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--cm-radius-md);
}
.cm-campo-item > summary::-webkit-details-marker { display: none; }
.cm-campo-item > summary:hover { background: var(--cm-surface-sunken); }

.cm-campo-tipo {
  width: 36px; height: 36px; flex: none;
  border-radius: var(--cm-radius-sm);
  display: grid; place-items: center;
  background: var(--cm-primary-50);
  border: 1px solid var(--cm-primary-100);
  color: var(--cm-primary-600);
  font-size: 1rem;
}
.cm-campo-resumo { flex: 1; min-width: 0; }
.cm-campo-rotulo { display: block; font-weight: 700; font-size: .9375rem; }
.cm-campo-meta { display: block; font-size: .75rem; color: var(--cm-text-muted); }
.cm-campo-ordem { display: flex; gap: 5px; flex: none; }
.cm-campo-seta {
  color: var(--cm-text-muted); flex: none;
  transition: transform var(--cm-dur) var(--cm-ease);
}
.cm-campo-item[open] > summary .cm-campo-seta { transform: rotate(180deg); }

.cm-campo-form {
  padding: 6px 15px 16px;
  border-top: 1px solid var(--cm-border-suave);
}

/* --- Ficha: as respostas na tela do servidor e no comprovante ---------- */
.cm-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px 20px;
  margin: 0;
}
.cm-ficha-item { min-width: 0; }
.cm-ficha-larga { grid-column: 1 / -1; }
.cm-ficha dt {
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--cm-text-muted);
  margin-bottom: 4px;
}
.cm-ficha dd { margin: 0; font-weight: 600; word-break: break-word; }
.cm-ficha dd.cm-ficha-longa {
  font-weight: 400;
  white-space: pre-wrap;
  background: var(--cm-surface-sunken);
  border: 1px solid var(--cm-border-suave);
  border-left: 2px solid var(--cm-border-strong);
  border-radius: 0 var(--cm-radius-sm) var(--cm-radius-sm) 0;
  padding: 10px 13px;
  font-size: .9375rem;
  line-height: 1.6;
}

/* Utilitarios curtos usados nas views */
.cm-mt-0 { margin-top: 0; }
.cm-mt-1 { margin-top: 8px; }
.cm-mt-2 { margin-top: 16px; }
.cm-mt-3 { margin-top: 26px; }
.cm-mb-0 { margin-bottom: 0; }
.cm-mb-1 { margin-bottom: 8px; }
.cm-mb-2 { margin-bottom: 16px; }
.cm-mb-3 { margin-bottom: 26px; }
.cm-flex { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cm-flex-fim { margin-left: auto; }
.cm-nowrap { white-space: nowrap; }
.cm-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   24. O celular e o aparelho principal — DESIGN.md §11

   Quem protocola quase sempre esta no telefone, com pressa, as vezes com receio
   de errar e perder o pedido. O que vem abaixo existe para reduzir esse receio:
   navegacao ao alcance do polegar, botao que cabe no dedo, e retorno visivel a
   cada toque.
   -------------------------------------------------------------------------- */

/* Barra de abas: so no celular. No desktop a navegacao do topo funciona e uma
   barra fixa no rodape so roubaria altura util. */
.cm-abas { display: none; }

@media (max-width: 767.98px) {
  .cm-abas {
    position: fixed; inset: auto 0 0 0; z-index: 60;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--cm-surface);
    /* Borda, nao sombra: aqui a intencao e separar (DESIGN.md §5). */
    border-top: 1px solid var(--cm-border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .cm-aba {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    min-height: var(--cm-abas-altura);
    padding: 8px 4px 7px;
    color: var(--cm-text-muted);
    text-decoration: none;
    font-size: .6875rem; font-weight: 600; line-height: 1.1;
    letter-spacing: -.005em;
    transition: color var(--cm-dur) var(--cm-ease),
                background var(--cm-dur) var(--cm-ease);
  }
  .cm-aba i { font-size: 1.25rem; line-height: 1; }
  .cm-aba:hover, .cm-aba:focus { color: var(--cm-primary-500); text-decoration: none; }
  .cm-aba:active { background: var(--cm-surface-sunken); }

  /* Item ativo: filete do acento no topo mais texto em primaria — o mesmo par
     de sinais do item ativo da sidebar, para a regra ser uma so no sistema. */
  .cm-aba.ativo { color: var(--cm-primary-600); }
  .cm-aba.ativo::before {
    content: ''; position: absolute; inset: 0 auto auto 0;
    width: 100%; height: 3px;
    background: var(--cm-accent-500);
    border-radius: 0 0 var(--cm-radius-pill) var(--cm-radius-pill);
  }

  .cm-aba-rotulo {
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* O conteudo precisa terminar acima da barra, senao ela cobre o ultimo
     botao da pagina — que costuma ser justamente o de enviar. */
  .cm-portal-main,
  .cm-portal-rodape {
    padding-bottom: calc(var(--cm-abas-altura) + env(safe-area-inset-bottom, 0px) + 16px);
  }

  /* Os destinos agora moram na barra de abas. Manter os mesmos links no topo
     duplicaria a navegacao e devolveria o cabecalho de duas linhas. */
  .cm-portal-nav { display: none; }
  .cm-portal-barra { padding-top: 14px; padding-bottom: 14px; }
  .cm-marca img { width: 34px; height: 34px; }
  .cm-marca-nome { font-size: .9375rem; }
}

/* Ações empilham, e a principal vem primeiro — DESIGN.md §11.
   Em coluna, o primeiro item e o que o polegar encontra ao subir do fim da
   tela; a convencao de caixa de dialogo do desktop nao vale aqui. */
@media (max-width: 559.98px) {
  .cm-acoes {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 10px; width: 100%;
  }
  .cm-acoes .btn { width: 100%; justify-content: center; min-height: 44px; }

  /* O aviso deixa de ser "texto a esquerda, botoes a direita": naquele arranjo
     o texto ficava espremido numa coluna de oito palavras.

     Grade e nao `flex-wrap`: com wrap, o icone tambem quebrava e ia parar
     sozinho numa linha acima do titulo. Aqui o icone e o texto continuam lado a
     lado e so os botoes descem, ocupando as duas colunas. */
  .cm-alerta {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 13px; row-gap: 12px;
  }
  .cm-alerta > .cm-acoes,
  .cm-alerta > .cm-acoes.cm-flex-fim { grid-column: 1 / -1; margin-left: 0; }
  .cm-alerta-fechar { grid-column: 2; justify-self: end; margin-left: 0; }

  /* As acoes do hero seguem a mesma regra. Com `flex-wrap` elas quebravam mas
     cada botao ficava com a largura do proprio texto — dois blocos de tamanhos
     diferentes empilhados, que e o que faz uma tela parecer montada as pressas. */
  .cm-hero-acoes { flex-direction: column; align-items: stretch; gap: 10px; }
  .cm-hero-acoes .btn { width: 100%; justify-content: center; }

  /* Alvo de toque: nada que se toca abaixo de 44px. */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
}

/* A area clicavel do "x" de fechar aviso cresce sem o desenho engordar. */
[data-fechar] { position: relative; }
[data-fechar]::after {
  content: ''; position: absolute; inset: 50% auto auto 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}

/* Instalado na tela de inicio nao existe barra de navegador: a tela toda e do
   sistema, entao o rodape institucional so ocupa espaco. */
.cm-instalado .cm-portal-rodape-int > *:not(:first-child) { display: none; }

/* --------------------------------------------------------------------------
   25. Rodape no celular — DESIGN.md §11

   Em uma coluna, os quatro blocos viravam mais de uma tela de rodape embaixo de
   cada pagina, sem separacao entre os grupos: tudo lia como uma lista unica e
   longa. Aqui os grupos de links passam a duas colunas (os rotulos sao curtos e
   cabem), a marca continua ocupando a largura toda, e um fio separa cada grupo
   do seguinte para o olho saber onde um termina.
   -------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
  .cm-portal-rodape { padding: 0 18px; font-size: .8125rem; }

  /* Uma coluna: cada bloco ocupa a largura inteira, um embaixo do outro.
     Em duas colunas os rotulos ficavam com metade da largura para respirar e os
     alvos de toque encolhiam pela metade sem necessidade — sobra largura de
     tela aqui, o que falta e altura, e altura o dedo resolve rolando.
     No PC eles voltam a ficar lado a lado, que e onde isso faz sentido. */
  .cm-portal-rodape-int {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 28px 0 8px;
  }

  /* Fio entre grupos. So entre — o primeiro nao ganha linha em cima, senao
     duplica o filete dourado que ja fecha o conteudo. */
  .cm-portal-rodape-int > * {
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,.07);
    /* Coluna de grade nasce com `min-width: auto`, entao um conteudo indivisivel
       — um e-mail longo — estoura a coluna em vez de encolher, e invade a
       coluna vizinha. Era o que fazia o endereco de contato passar por cima da
       lista de links ao lado. */
    min-width: 0;
  }
  .cm-portal-rodape-int > :first-child { border-top: 0; padding-top: 0; }

  /* E-mail nao tem espaco onde quebrar. Sem isto ele so encolhe a coluna ate o
     limite e depois vaza. */
  .cm-rodape-item, .cm-rodape-item a, .cm-rodape-lista a { overflow-wrap: anywhere; }

  .cm-rodape-sobre { font-size: .8125rem; line-height: 1.6; max-width: none; }
  .cm-rodape-titulo { margin-bottom: 10px; }
  .cm-rodape-lista li { margin-bottom: 7px; }

  /* A base vira duas linhas centradas: o "voltar ao topo" empurrado para a
     direita por `margin-left:auto` ficava sozinho num canto, sem relacao com
     nada. */
  .cm-rodape-base {
    flex-direction: column; align-items: center; text-align: center;
    gap: 12px; padding: 16px 0 20px;
  }
  .cm-rodape-topo { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   26. Faixa das pessoas — DESIGN.md §11

   O sistema inteiro fala de numero, prazo e chave de acesso. Esta faixa e o
   unico lugar da home que lembra para quem isso serve. A ilustracao e decorativa
   (`alt` vazio, `aria-hidden`): quem usa leitor de tela ja recebe a mesma ideia
   pelo texto ao lado, e descrever cinco desenhos de pessoas seria ruido.
   -------------------------------------------------------------------------- */
.cm-gente {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  margin: 34px 0 8px;
  padding: 26px 30px;
  /* Fundo CHAPADO, e nao degrade.
     Cada figura da ilustracao e recortada da que esta atras por um HALO na
     cor do fundo (formas 4px maiores desenhadas atras da figura — ver o
     comentario dentro do proprio SVG). Halo tem uma cor so; degrade tem
     varias — onde divergissem, o halo viraria borda visivel em volta do
     boneco, o efeito "adesivo recortado".
     Se este fundo mudar, o `fill` dos halos em assets/img/cidadaos.svg muda
     junto (hoje: #FBFCF8, o --cm-surface). */
  background: var(--cm-surface);
  border: 1px solid var(--cm-border-suave);
  border-radius: var(--cm-radius-lg);
}
.cm-gente-img { width: 100%; height: auto; display: block; }
.cm-gente-texto {
  margin: 0;
  color: var(--cm-text-muted);
  font-size: 1rem; line-height: 1.65;
  text-wrap: pretty;
}
.cm-gente-texto strong { color: var(--cm-text); font-weight: 700; }

@media (max-width: 767.98px) {
  /* A ilustracao vem primeiro no celular: e o que da o tom antes de qualquer
     frase, e no alto da faixa ela nao concorre com o texto por atencao. */
  .cm-gente { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px; text-align: center; }
  .cm-gente-texto { font-size: .9375rem; }
}

/* --------------------------------------------------------------------------
   27. Trilha de auditoria

   Duas listas cronologicas convivem na tela do protocolo e precisam nao se
   confundir: a TRAMITACAO conta o andamento do pedido (por onde passou, quem
   despachou) e a TRILHA conta o acesso ao registro (quem abriu, alterou,
   baixou). Por isso a trilha e visualmente mais seca — sem cartao por item,
   com o fio do tempo mais fino e a tipografia menor. Ela e referencia, nao
   narrativa.
   -------------------------------------------------------------------------- */
.cm-trilha { list-style: none; margin: 18px 0 0; padding: 0 0 0 22px; position: relative; }

/* O fio do tempo. Para no ultimo ponto em vez de seguir ate o fim do bloco:
   linha que continua depois do ultimo item sugere que falta alguma coisa. */
.cm-trilha::before {
  content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px;
  width: 1px; background: var(--cm-border);
}

.cm-trilha-item { position: relative; padding: 0 0 20px 4px; }
.cm-trilha-item:last-child { padding-bottom: 0; }

.cm-trilha-ponto {
  position: absolute; left: -22px; top: 5px;
  width: 9px; height: 9px; border-radius: var(--cm-radius-pill);
  background: var(--cm-tom, var(--cm-neutral-500));
  box-shadow: 0 0 0 3px var(--cm-surface);
}

.cm-trilha-topo {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 2px;
}
.cm-trilha-quando {
  font-size: .75rem; color: var(--cm-text-muted);
  font-variant-numeric: tabular-nums;
}
.cm-trilha-quem { margin: 0 0 4px; font-size: .875rem; }
.cm-trilha-tipo {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--cm-text-muted); margin-left: 6px;
}
.cm-trilha-resumo { margin: 0 0 6px; color: var(--cm-text-muted); font-size: .875rem; }

/* Campos alterados: par "de → para" em linha, com o valor antigo apagado.
   Riscar o antigo seria mais explicito, mas em valor longo o risco atrapalha a
   leitura — a cor mais fraca ja diz que aquilo e passado. */
.cm-trilha-campos { list-style: none; margin: 0 0 6px; padding: 0; }
.cm-trilha-campos li {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-size: .8125rem; padding: 2px 0;
}
.cm-trilha-campo { font-weight: 700; }
.cm-trilha-de   { color: var(--cm-text-muted); }
.cm-trilha-para { color: var(--cm-text); font-weight: 600; }
.cm-trilha-campos i { font-size: .75rem; color: var(--cm-text-muted); }

.cm-trilha-rodape {
  margin: 0; font-size: .75rem; color: var(--cm-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Filtros da consulta geral: grade que se adapta, sem quebrar em uma coluna
   antes da hora — sao seis campos curtos e caberiam lado a lado. */
.cm-filtros {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: end;
}
.cm-filtros .cm-campo { margin-bottom: 0; }
.cm-filtros-acoes { display: flex; gap: 8px; align-items: center; }

@media (max-width: 599.98px) {
  .cm-filtros { grid-template-columns: 1fr; }
  .cm-filtros-acoes { flex-direction: column; align-items: stretch; }
  .cm-filtros-acoes .btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   28. Modal de confirmação

   POR QUE NÃO O `confirm()` DO NAVEGADOR

   O nativo cabe uma linha de texto, não aceita formatação e some do fluxo da
   página. Para "arquivar", "tramitar para outro setor" ou "excluir protocolo"
   a pessoa precisa ver O QUE VAI ACONTECER — quantos anexos vão junto, para
   quem o processo vai, o que não se desfaz. Isso é uma lista, não uma frase.

   TRÊS DECISÕES DE SEGURANÇA

   1. O foco nasce no botão de CANCELAR, não no de confirmar. Quem aperta Enter
      por reflexo cancela, e não executa uma ação destrutiva.
   2. Clicar fora fecha, mas só no véu — nunca no cartão.
   3. O botão de confirmar herda o tom da ação: vermelho para o que destrói,
      azul para o que só avança. A cor é o último aviso antes do clique.
   -------------------------------------------------------------------------- */
.cm-modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(23, 26, 23, .55);
  animation: cmModalVeu 140ms var(--cm-ease);
}
.cm-modal[hidden] { display: none; }

.cm-modal-cartao {
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: var(--cm-surface);
  border-radius: var(--cm-radius-lg);
  box-shadow: var(--cm-shadow-lg);
  animation: cmModalCartao 180ms var(--cm-ease);
}

.cm-modal-topo {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 24px 26px 0;
}
.cm-modal-icone {
  width: 42px; height: 42px; flex: none;
  border-radius: var(--cm-radius-md);
  display: grid; place-items: center;
  font-size: 1.25rem;
  background: var(--cm-tom-fundo, var(--cm-primary-50));
  color: var(--cm-tom-texto, var(--cm-primary-600));
}
.cm-modal-titulo {
  margin: 0; font-size: 1.125rem; font-weight: 800;
  letter-spacing: -.015em; line-height: 1.3;
}
.cm-modal-corpo { padding: 14px 26px 4px; color: var(--cm-text-muted); }
.cm-modal-corpo p { margin: 0 0 10px; }

/* O resumo de impacto: o que a pessoa precisa saber ANTES, não depois. */
.cm-modal-impacto { list-style: none; margin: 14px 0 4px; padding: 0; }
.cm-modal-impacto li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0;
  font-size: .875rem;
  border-top: 1px solid var(--cm-border-suave);
  color: var(--cm-text);
}
.cm-modal-impacto li:first-child { border-top: 0; }
.cm-modal-impacto li::before {
  content: '\F135';                    /* bi-arrow-right-short */
  font-family: 'bootstrap-icons';
  color: var(--cm-tom, var(--cm-primary-500));
  flex: none; line-height: 1.4;
}

.cm-modal-rodape {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 18px 26px 24px;
}

@media (max-width: 559.98px) {
  /* No celular o modal encosta no fim da tela e os botões empilham, com o
     confirmar embaixo — o polegar sobe do fim e encontra primeiro o cancelar. */
  .cm-modal { place-items: end center; padding: 0; }
  .cm-modal-cartao {
    width: 100%;
    border-radius: var(--cm-radius-lg) var(--cm-radius-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .cm-modal-rodape { flex-direction: column-reverse; }
  .cm-modal-rodape .btn { width: 100%; justify-content: center; min-height: 46px; }
}

@keyframes cmModalVeu    { from { opacity: 0; } }
@keyframes cmModalCartao { from { opacity: 0; transform: translateY(12px) scale(.98); } }

@media (prefers-reduced-motion: reduce) {
  .cm-modal, .cm-modal-cartao { animation: none; }
}

/* --------------------------------------------------------------------------
   29. Tempo e prazo na lista

   A lista mostrava "24/08/2026 17:39" e nada mais. Exato e mudo: quem opera a
   mesa precisa saber de relance se aquilo chegou agora ou esta parado ha duas
   semanas, e fazer essa conta linha por linha e o que cansa.

   O chip de prazo carrega o tom do estado — vermelho vencido, ambar perto do
   fim, verde folgado, cinza sem prazo. A data exata continua no `title`,
   porque em documento de fe publica o valor preciso e o que vale.
   -------------------------------------------------------------------------- */
.cm-tempo { display: block; font-size: .875rem; }

.cm-prazo-chip {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px;
  padding: 2px 9px;
  border-radius: var(--cm-radius-pill);
  font-size: .75rem; font-weight: 600;
  white-space: nowrap;
  background: var(--cm-tom-fundo, var(--cm-neutral-50));
  color: var(--cm-tom-texto, var(--cm-neutral-700));
  /* Borda de meio ponto: o chip precisa existir sem competir com a badge de
     situacao, que e o elemento colorido principal da linha. */
  border: 1px solid color-mix(in srgb, var(--cm-tom, var(--cm-neutral-500)) 22%, transparent);
}
.cm-prazo-chip i { font-size: .6875rem; }

/* Botao de baixar no estado "preparando". O download e uma navegacao em duas
   pernas e o navegador nao avisa a pagina quando ele comeca — sem este estado
   o botao fica inerte e a pessoa clica de novo. */
.cm-baixando { opacity: .72; pointer-events: none; }

/* --------------------------------------------------------------------------
   30. Padrao 1Doc/PBdoc — marcadores, vinculos, modelos, sininho e mesa

   Componentes pequenos que chegaram juntos. Todos seguem as regras da casa:
   tom semantico via token, borda para separar, alvo de toque de 44px onde ha
   dedo envolvido.
   -------------------------------------------------------------------------- */

/* Marcador: um botao-chip que liga e desliga. Desligado e um contorno
   discreto; ligado ganha o fundo tonal — o estado precisa ser obvio de longe,
   porque a mesa inteira e lida em diagonal. */
.cm-marcadores { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-marcador {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; min-height: 32px;
  font-size: .8125rem; font-weight: 600; font-family: inherit;
  border-radius: var(--cm-radius-pill);
  border: 1px solid var(--cm-border-strong);
  background: var(--cm-surface);
  color: var(--cm-text-muted);
  cursor: pointer;
  transition: background var(--cm-dur) var(--cm-ease),
              color var(--cm-dur) var(--cm-ease),
              border-color var(--cm-dur) var(--cm-ease);
}
.cm-marcador:hover { border-color: var(--cm-tom, var(--cm-primary-500)); color: var(--cm-tom-texto, var(--cm-text)); }
.cm-marcador.ligado {
  background: var(--cm-tom-fundo, var(--cm-neutral-50));
  border-color: color-mix(in srgb, var(--cm-tom, var(--cm-neutral-500)) 45%, transparent);
  color: var(--cm-tom-texto, var(--cm-neutral-700));
}
.cm-marcador i { font-size: .75rem; }

/* Chip pequeno de marcador em listagens (sem interacao). */
.cm-marcador-mini {
  display: inline-flex; align-items: center;
  padding: 1px 8px; font-size: .6875rem; font-weight: 700;
  border-radius: var(--cm-radius-pill);
  background: var(--cm-tom-fundo, var(--cm-neutral-50));
  color: var(--cm-tom-texto, var(--cm-neutral-700));
}

/* Vinculos entre protocolos */
.cm-vinculos { list-style: none; margin: 0 0 6px; padding: 0; }
.cm-vinculos li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid var(--cm-border-suave);
}
.cm-vinculos li:first-child { border-top: 0; padding-top: 0; }
.cm-vinculos .cm-legenda { flex: 1; min-width: 0; }

/* Seletor de modelo: menor que um select de formulario, porque e um atalho e
   nao um campo — visualmente subordinado a caixa de texto que ele alimenta. */
.cm-modelo-escolha { margin-bottom: 6px; }
.cm-select-sm { padding: 5px 32px 5px 10px; font-size: .8125rem; min-height: 34px; }

/* O sininho do topo. O contador so aparece quando ha algo — badge "0"
   permanente e ansiedade decorativa. */
.cm-sino {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--cm-radius-md);
  color: var(--cm-text-muted);
  transition: background var(--cm-dur) var(--cm-ease), color var(--cm-dur) var(--cm-ease);
}
.cm-sino:hover { background: var(--cm-surface-sunken); color: var(--cm-text); text-decoration: none; }
.cm-sino-conta {
  position: absolute; top: 4px; right: 3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  font-size: .625rem; font-weight: 800;
  border-radius: var(--cm-radius-pill);
  background: var(--cm-danger-500); color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}

/* Lista de avisos */
.cm-avisos { list-style: none; margin: 0; padding: 0; }
.cm-aviso {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid var(--cm-border-suave);
}
.cm-aviso:first-child { border-top: 0; }
.cm-aviso-ponto {
  flex: none; width: 8px; height: 8px; margin-top: 7px;
  border-radius: var(--cm-radius-pill);
  background: var(--cm-border-strong);
}
.cm-aviso-novo .cm-aviso-ponto { background: var(--cm-primary-500); }
.cm-aviso-novo { font-weight: 600; }

/* Mesa: a caixa agrupada por urgencia. O grupo e um titulo com fio, nao um
   cartao dentro de cartao — a tabela continua uma so para o olho comparar
   linhas entre grupos. */
.cm-mesa-grupo {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 0 10px;
  font-size: .8125rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--cm-tom-texto, var(--cm-text-muted));
}
.cm-mesa-grupo::after { content: ''; flex: 1; height: 1px; background: var(--cm-border); }
.cm-mesa-grupo:first-child { margin-top: 0; }

/* Devolucao pedida ao tramitar */
.cm-devolucao {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .75rem; font-weight: 700;
  color: var(--cm-accent-700);
}
.cm-devolucao.vencida { color: var(--cm-danger-700); }

/* ==========================================================================
   31. Sanfona de ações (tela do protocolo)
   Os cartões .cm-recolhe recolhem o corpo e viram um índice de ações.
   O esconder depende de .cm-recolhe-pronta, que só o JS aplica — sem
   JavaScript, nada some. A seta indica o estado; o título vira botão.
   ========================================================================== */

.cm-recolhe > .cm-card-topo {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Seta de estado — usa a fonte de ícones já carregada (bi-chevron-down). */
.cm-recolhe > .cm-card-topo::after {
  content: "\f282";
  font-family: "bootstrap-icons";
  font-size: .875rem;
  color: var(--cm-neutral-500);
  transition: transform var(--cm-dur) var(--cm-ease);
}

.cm-recolhe.aberto > .cm-card-topo::after { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .cm-recolhe > .cm-card-topo::after { transition: none; }
}

.cm-recolhe > .cm-card-topo:focus-visible {
  outline: 2px solid var(--cm-primary-500);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Fechada: só o topo aparece, sem a borda que separava topo do corpo. */
.cm-recolhe-pronta:not(.aberto) > form,
.cm-recolhe-pronta:not(.aberto) > .cm-card-corpo { display: none; }
.cm-recolhe-pronta:not(.aberto) > .cm-card-topo { border-bottom: 0; }

/* A zona de risco fica discreta fechada e explícita aberta. */
.cm-recolhe-risco > .cm-card-topo h2 { color: var(--cm-danger-700); }
.cm-recolhe-risco.aberto { border-color: var(--cm-danger-500); }

/* ==========================================================================
   32. Entrada e revelação (portal)

   Sistema reutilizável: o PHP marca `data-revela` (e `data-revela-grupo` no
   pai, para escalonar); o JavaScript põe `cm-anima-pronto` no <html>, troca
   as marcas por `.cm-revela` e aplica `.cm-visivel` — na carga (hero) ou
   quando a seção entra na tela (IntersectionObserver).

   O esconder só existe sob `html.cm-anima-pronto`, classe que SÓ o JS põe:
   sem JavaScript, ou com prefers-reduced-motion, nada some da página.
   Entrada acontece UMA vez; nada se move sozinho depois de carregado.
   ========================================================================== */

html.cm-anima-pronto .cm-revela {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--cm-dur-entrada) var(--cm-ease-entrada),
              transform var(--cm-dur-entrada) var(--cm-ease-entrada);
  transition-delay: calc(var(--cm-revela-i, 0) * 70ms);
}

html.cm-anima-pronto .cm-revela.cm-visivel {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.cm-anima-pronto .cm-revela {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Micro-interações do portal ------------------------------------------
   O flutuar de 1px no hover já existia em .cm-passo e .cm-servico; o botão
   entra no mesmo vocabulário. O :active continua afundando — declarado
   depois para vencer o hover quando os dois valem. */
.cm-portal .btn:hover  { transform: translateY(-1px); }
.cm-portal .btn:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .cm-portal .btn:hover, .cm-portal .btn:active { transform: none; }
}

/* Campo de chave de acesso: mono espaçada, como a chave sai no comprovante.
   (Era style inline no hero; virou classe para valer em qualquer tela.) */
.cm-chave-input {
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* (Sem faixa de números aqui: página pública não expõe estatística
   operacional do órgão — decisão registrada em 25/08/2026.) */

/* ==========================================================================
   33. A pele do portal público — direção "Apple adaptada"

   Aprovada em 25/08/2026: a GRAMÁTICA da Apple (respiro como luxo, tipografia
   grande, separar por distância e por faixas — não por borda de card,
   profundidade suave, botão-pílula) com a IDENTIDADE da Casa (cromo escuro,
   acento lima, Urbanist, tokens --cm-*). Nada aqui toca o admin: a tela de
   trabalho tem outra linguagem, mais densa.

   Tudo é sobreposição escopada em .cm-portal, por cima das seções 17/22 —
   assim a pele pode evoluir (ou voltar atrás) sem reescrever a base.
   ========================================================================== */

/* --- Respiro ------------------------------------------------------------- */
.cm-portal .cm-portal-main { padding: 56px 22px 96px; }
.cm-portal .cm-secao { margin: 96px 0; }
.cm-portal .cm-gente { margin: 72px 0 8px; padding: 40px 44px; border: 0; border-radius: var(--cm-radius-xl); }

.cm-portal .cm-hero { padding: 76px 22px 88px; gap: 56px; }
.cm-portal .cm-hero h1 { font-size: clamp(2.4rem, 1.5rem + 3vw, 3.6rem); }
.cm-portal .cm-hero-acoes { margin-top: 32px; }

/* --- Tipografia de seção: grande, centrada, poucas palavras --------------- */
.cm-portal .cm-secao > .cm-eyebrow,
.cm-portal .cm-secao-titulo,
.cm-portal .cm-secao > .cm-legenda { text-align: center; }
.cm-portal .cm-secao-titulo {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
  letter-spacing: -.028em;
}
.cm-portal .cm-secao > .cm-legenda { font-size: 1rem; }

/* --- Menos caixas: cards sem borda, sombra difusa ------------------------- */
.cm-portal .cm-card {
  border-color: transparent;
  border-radius: var(--cm-radius-xl);
  box-shadow: var(--cm-shadow-md);
}
.cm-portal .cm-servico { border-color: transparent; }
.cm-portal .cm-servicos { gap: 14px; }

/* --- Botão-pílula -------------------------------------------------------- */
.cm-portal .btn { border-radius: var(--cm-radius-pill); }
.cm-portal .btn-lg { padding-left: 26px; padding-right: 26px; }

/* --- "Como funciona" sem caixas: número grande, texto solto ---------------
   O numeral é sequência de verdade (passo 01..04), grande e claro como a
   Apple faz — decorativo no tamanho, informativo no conteúdo. O azul 400 é
   token de preenchimento; como numeral display (2.75rem/800) ele passa os
   3:1 de texto grande sobre o canvas. */
.cm-portal .cm-passos { gap: 44px 32px; margin-top: 48px; }
.cm-portal .cm-passo {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.cm-portal .cm-passo:hover { transform: none; box-shadow: none; }
.cm-portal .cm-passo::before {
  content: counter(passo, decimal-leading-zero);
  display: block;
  width: auto; height: auto;
  background: none;
  box-shadow: none;
  color: var(--cm-primary-400);
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 12px;
}
.cm-portal .cm-passo h3 { font-size: 1.1875rem; }
.cm-portal .cm-passo p { font-size: 1rem; line-height: 1.6; }

/* --- Fecho escuro: o grande cartão arredondado que encerra a home ---------
   A faixa alternada da gramática Apple, na forma de painel arredondado (não
   full-bleed: emendar com o rodapé escuro criaria um paredão). Reusa as duas
   fontes de luz do cromo (§3/§17). */
.cm-fecho {
  position: relative;
  overflow: hidden;
  margin-top: 96px;
  padding: 72px 64px;
  border-radius: var(--cm-radius-xl);
  background:
    radial-gradient(520px 260px at 12% 0%, rgba(88,128,218,.16), transparent 62%),
    radial-gradient(420px 220px at 88% 100%, rgba(201,241,126,.10), transparent 60%),
    var(--cm-ink-900);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 48px;
}
.cm-fecho::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--cm-accent-500);
  opacity: .85;
}
.cm-fecho .cm-eyebrow { color: var(--cm-accent-500); }
.cm-fecho h3 { color: #FFFFFF; font-size: 1.5rem; letter-spacing: -.02em; margin: 4px 0 10px; }
.cm-fecho p { color: var(--cm-sobre-ink-suave); font-size: 1rem; line-height: 1.65; max-width: 46ch; margin: 0 0 20px; }
.cm-fecho p:last-child { margin-bottom: 0; }
.cm-fecho a:not(.btn) { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }

/* --- Celular: o respiro encolhe junto, sem sumir ---------------------------
   O `html` no seletor é deliberado: garante a vitória sobre as regras de
   desktop desta mesma seção por ESPECIFICIDADE, não só pela ordem — assim
   uma futura reorganização do arquivo não quebra o celular em silêncio. */
@media (max-width: 767.98px) {
  html .cm-portal .cm-portal-main { padding: 34px 18px 72px; }
  html .cm-portal .cm-secao { margin: 64px 0; }
  html .cm-portal .cm-gente { margin: 48px 0 8px; padding: 26px 22px; }
  html .cm-portal .cm-hero { padding: 48px 18px 56px; }
  html .cm-portal .cm-fecho { margin-top: 64px; padding: 44px 26px; gap: 34px; }
}

/* ==========================================================================
   34. Dobra (<details> estilizado como card)

   Usada na trilha de auditoria: conteúdo ocasional fica fechado por padrão,
   com o resumo (título + contagem) fazendo as vezes de cabeçalho do card.
   Nativo do navegador — funciona sem JavaScript e com teclado.
   ========================================================================== */
.cm-dobra { margin-top: 26px; }
.cm-dobra > summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cm-dobra > summary::-webkit-details-marker { display: none; }
.cm-dobra > summary::after {
  content: "\f282";                    /* bi-chevron-down */
  font-family: "bootstrap-icons";
  font-size: .875rem;
  color: var(--cm-neutral-500);
  margin-left: 4px;
  transition: transform var(--cm-dur) var(--cm-ease);
}
.cm-dobra[open] > summary::after { transform: rotate(180deg); }
.cm-dobra:not([open]) > summary { border-bottom: 0; }
.cm-dobra > summary:focus-visible {
  outline: 2px solid var(--cm-primary-500);
  outline-offset: 2px;
  border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .cm-dobra > summary::after { transition: none; }
}

/* ==========================================================================
   35. Passos compactos e ação do serviço (carta de serviços)

   .cm-passinhos é o "como funciona" de bolso: três frases numeradas antes da
   lista, dizendo o que vai acontecer antes de pedir qualquer clique. A ação
   "Pedir" torna o cartão-link explícito — a seta sozinha era sutil demais.
   ========================================================================== */
.cm-passinhos {
  list-style: none;
  counter-reset: passinho;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 12px 28px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cm-passinhos li {
  counter-increment: passinho;
  position: relative;
  padding-left: 40px;
  color: var(--cm-text-muted);
  font-size: .9375rem;
  line-height: 1.55;
}
.cm-passinhos li strong { color: var(--cm-text); }
.cm-passinhos li::before {
  content: counter(passinho);
  position: absolute;
  left: 0; top: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--cm-radius-pill);
  background: var(--cm-primary-50);
  color: var(--cm-primary-600);
  border: 1px solid var(--cm-primary-100);
  font-weight: 800; font-size: .875rem;
}

.cm-servico-acao {
  font-weight: 700;
  font-size: .875rem;
}
.cm-servico:hover .cm-servico-acao { color: var(--cm-primary-500); }
@media (max-width: 599.98px) {
  /* No celular a seta já indica; a palavra roubaria espaço do nome. */
  .cm-servico-acao { display: none; }
}

/* --- Placa da logomarca oficial no topo (app.logo) -------------------------
   Texto escuro sobre topo escuro nao existe: a placa branca e o fundo que a
   logomarca precisa, com raio e folga proprios. Altura fixa preserva a
   proporcao de qualquer arquivo. */
.cm-marca-placa {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 6px 10px;
}
.cm-marca-placa img { height: 34px; width: auto; display: block; }
@media (max-width: 599.98px) {
  .cm-marca-placa img { height: 28px; }
  .cm-marca .cm-marca-sub { display: none; }
}

/* --- Indicador do WhatsApp no topo (so admin, so com whatsapp.ativo) ------
   Mesmo vocabulario do sininho: icone quieto com um ponto de estado. Verde =
   pareado, ambar = conectado sem pareamento, cinza = desconectado. */
.cm-zap {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--cm-radius-md);
  color: var(--cm-text-muted);
  font-size: 1.125rem;
  text-decoration: none;
  transition: background var(--cm-dur) var(--cm-ease), color var(--cm-dur) var(--cm-ease);
}
.cm-zap:hover { background: var(--cm-surface-sunken); color: var(--cm-text); text-decoration: none; }
.cm-zap-ponto {
  position: absolute;
  top: 7px; right: 7px;
  width: 9px; height: 9px;
  border-radius: 999px;
  border: 2px solid var(--cm-surface);
  background: var(--cm-border-strong);
}
.cm-zap.ok   .cm-zap-ponto { background: var(--cm-success-500); }
.cm-zap.meio .cm-zap-ponto { background: var(--cm-warning-500); }
.cm-zap.ok   { color: var(--cm-success-500); }