/* ==========================================================================
   Núcleo C&M — moldura do portal (topo, coluna de conteúdo, rodapé).
   As telas do módulo Demandas trazem o próprio CSS por cima disto.
   Paleta igual à do site grupocmsolutions.com.br.
   ========================================================================== */

:root {
  --cm-bg: #F3F6FA;
  --cm-superficie: #FFFFFF;
  --cm-fg: #10243D;
  --cm-fg-suave: #42617F;
  --cm-linha: #D3E0EE;
  --cm-azul: #1D5FA8;
  --cm-azul-escuro: #16365C;
  --cm-ambar: #B5661A;
  --cm-ok: #15803D;
  --cm-erro: #B42318;
  --cm-sombra: 0 1px 2px rgba(16, 36, 61, .05), 0 12px 28px -18px rgba(16, 36, 61, .3);
  --cm-raio: 14px;
  --cm-fonte: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--cm-bg);
  color: var(--cm-fg);
  font-family: var(--cm-fonte);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

body.jc-travado { overflow: hidden; }

a { color: var(--cm-azul); }

:focus-visible { outline: 2px solid var(--cm-ambar); outline-offset: 2px; border-radius: 4px; }

/* ---------- topo ---------- */

.portal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(100deg, var(--cm-azul-escuro), var(--cm-azul));
  color: #fff;
}

.portal-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -.01em;
}
.portal-marca img { display: block; border-radius: 9px; }
.portal-marca span { display: grid; line-height: 1.1; }
.portal-marca small {
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: .78;
}

.portal-usuario { display: flex; align-items: center; gap: 14px; min-width: 0; }
.portal-usuario__nome {
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portal-usuario__sair {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .34);
  color: #fff;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
}
.portal-usuario__sair:hover { background: rgba(255, 255, 255, .16); }
@media (max-width: 520px) { .portal-usuario__sair span { display: none; } }

/* ---------- conteúdo ---------- */

/* Coluna padrão do portal. O módulo Demandas alarga com .dem-modulo. */
.conteudo {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding: clamp(20px, 3vw, 34px) max(16px, env(safe-area-inset-left, 0px))
           clamp(28px, 4vw, 48px) max(16px, env(safe-area-inset-right, 0px));
}
body.dem-modulo .conteudo { max-width: 1500px; }

/* ---------- recados ---------- */

.portal-recado {
  max-width: 1080px;
  margin: 14px auto 0;
  padding: 11px 16px;
  border-radius: 10px;
  border-left: 3px solid var(--cm-azul);
  background: var(--cm-superficie);
  box-shadow: var(--cm-sombra);
  font-size: .92rem;
}
.portal-recado--ok   { border-left-color: var(--cm-ok); }
.portal-recado--erro { border-left-color: var(--cm-erro); }

/* ---------- rodapé ---------- */

.portal-rodape {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  padding: 16px max(16px, env(safe-area-inset-right, 0px))
           calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--cm-linha);
  color: var(--cm-fg-suave);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- painel de módulos ---------- */

.painel-cab { margin-bottom: 26px; }
.painel-cab h1 { margin: 0 0 6px; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.02em; }
.painel-cab p { margin: 0; color: var(--cm-fg-suave); }

.painel-modulos {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.modulo-cartao {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--cm-linha);
  border-radius: var(--cm-raio);
  background: var(--cm-superficie);
  box-shadow: var(--cm-sombra);
  text-decoration: none;
  color: inherit;
  min-width: 0;
  transition: transform .18s ease, border-color .18s ease;
}
.modulo-cartao:hover { transform: translateY(-2px); border-color: var(--cm-azul); }
@media (prefers-reduced-motion: reduce) { .modulo-cartao:hover { transform: none; } }

.modulo-cartao__ico {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--cm-azul);
  color: #fff;
  font-size: 1.2rem;
}
.modulo-cartao h2 { margin: 0; font-size: 1.05rem; letter-spacing: -.01em; }
.modulo-cartao p  { margin: 0; font-size: .88rem; color: var(--cm-fg-suave); }

.painel-vazio {
  padding: 30px;
  border: 1px dashed var(--cm-linha);
  border-radius: var(--cm-raio);
  text-align: center;
  color: var(--cm-fg-suave);
}