/* ==================================================================
   Comunicados — Profit Promotora
   Identidade extraida da logo: vermelho Profit (#D40F16) sobre grafite
   e papel claro. Tipografia sem serifa, acompanhando o desenho
   geometrico da marca.
   Disciplina de cor: vermelho vivo = acao da marca; vinho fosco em
   fundo rosado = erro. Assim os dois nunca se confundem.
   ================================================================== */

:root {
  /* Marca */
  --profit: #d40f16;
  --profit-escuro: #a80b11;
  --profit-claro: #fdecec;

  /* Neutros */
  --grafite: #17171a;
  --grafite-2: #232327;
  --grafite-3: #2f2f35;
  --papel: #f4f4f6;
  --cartao: #ffffff;
  --borda: #e2e2e6;
  --borda-forte: #cdcdd4;
  --texto: #1a1a1c;
  --texto-fraco: #6b6b74;

  /* Semanticos */
  --ok: #1b7f5a;
  --ok-fundo: #eaf6f1;
  --erro: #8e1b1b;
  --erro-fundo: #fbecec;
  --alerta: #8a5b00;
  --alerta-fundo: #fdf6e7;

  --fonte: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fonte-titulo: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --fonte-dado: Consolas, "Cascadia Mono", ui-monospace, monospace;

  --raio: 6px;
  --sombra: 0 1px 2px rgba(23, 23, 26, .06), 0 8px 24px rgba(23, 23, 26, .06);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 14px;
  color: var(--texto);
  background: var(--papel);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: var(--fonte-titulo); font-weight: 600; margin: 0; letter-spacing: -.021em; }
h1 { font-size: 26px; }
h2 { font-size: 16px; }

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--profit); outline-offset: 2px; }

.ta-right { text-align: right; }
.spacer { flex: 1; }

/* ---------- Estrutura ---------- */

.app { display: grid; grid-template-columns: 236px 1fr; height: 100vh; }

.rail {
  background: var(--grafite);
  color: #d6d6db;
  display: flex;
  flex-direction: column;
  padding: 22px 14px 18px;
}

.rail__brand { padding: 0 8px 22px; }
.rail__logo { display: block; width: 100%; max-width: 168px; height: auto; }

/* Selo quadrado com o simbolo, para onde nao cabe a logo inteira */
.rail__mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--profit);
  border-radius: var(--raio);
  overflow: hidden;
}
.rail__mark img { width: 22px; height: auto; }

.rail__nav { display: flex; flex-direction: column; gap: 2px; }

.navitem {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  text-align: left;
  padding: 10px 12px;
  background: none;
  border: 0;
  border-radius: var(--raio);
  color: #a9a9b3;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.navitem:hover { background: var(--grafite-2); color: #fff; }
.navitem.is-active {
  background: var(--grafite-3);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--profit);
}

.navitem__badge {
  font-family: var(--fonte-dado);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: #d6d6db;
}
.navitem.is-active .navitem__badge { background: var(--profit); color: #fff; }

.rail__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--grafite-2); }
.rail__usuario {
  margin: 0 0 6px;
  font-size: 12px;
  color: #a9a9b3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail__path {
  display: block;
  font-family: var(--fonte-dado);
  font-size: 10px;
  color: #74747f;
  line-height: 1.45;
  word-break: break-all;
  margin: 6px 0 8px;
}
.rail__versao { font-size: 10px; color: #62626c; font-family: var(--fonte-dado); }

.stage { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.topbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 20px 28px 16px;
  background: var(--cartao);
  border-bottom: 1px solid var(--borda);
}
.eyebrow {
  margin: 0 0 3px;
  font-family: var(--fonte-dado);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--profit);
}
.topbar__hint { margin: 0; color: var(--texto-fraco); font-size: 12.5px; max-width: 46ch; text-align: right; }

.view { display: none; padding: 20px 28px 28px; overflow-y: auto; flex: 1; }
.view.is-active { display: block; }

/* ---------- Componentes ---------- */

.card {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px;
}
.card + .card { margin-top: 16px; }
.card--flush { padding: 0; overflow: hidden; }
.card--form { max-width: 880px; }
.card__cabeca { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }

.input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: #fff;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input:focus {
  border-color: var(--profit);
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 15, 22, .12);
}
.input--busca { max-width: 380px; }
.input--select { width: auto; }
.input--sm { padding: 6px 9px; font-size: 13px; }

.rotulo { display: block; font-size: 12px; font-weight: 600; color: var(--texto-fraco); margin-bottom: 5px; }
.rotulo--espaco { margin-top: 16px; }

.campo { min-width: 0; }
.campo--curto { max-width: 220px; }
.campo--switch { grid-column: 1 / -1; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }

.dica { margin: 6px 0 0; font-size: 12px; color: var(--texto-fraco); line-height: 1.5; }

.btn {
  padding: 9px 15px;
  border-radius: var(--raio);
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.btn--primary { background: var(--profit); color: #fff; }
.btn--primary:hover { background: var(--profit-escuro); }
.btn--ghost { background: #fff; border-color: var(--borda-forte); color: var(--texto); }
.btn--ghost:hover { background: #f7f7f9; border-color: var(--texto-fraco); }
.btn--sm { padding: 6px 11px; font-size: 12.5px; }
.btn--enviar { width: 100%; background: var(--profit); color: #fff; padding: 12px; font-size: 15px; }
.btn--enviar:hover { background: var(--profit-escuro); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.linkbtn {
  background: none; border: 0; padding: 0;
  color: var(--profit);
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}
.linkbtn:hover { text-decoration: underline; }
.linkbtn--perigo { color: var(--erro); }
.linkbtn--claro { color: #a9a9b3; }
.linkbtn--claro:hover { color: #fff; }

.form__acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ---------- Tabelas ---------- */

.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  padding: 12px 14px;
  background: #fafafb;
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0;
}
.tabela td { padding: 12px 14px; border-bottom: 1px solid #eeeef1; vertical-align: middle; }
.tabela tbody tr:hover { background: #fafafb; }
.tabela--compacta td, .tabela--compacta th { padding: 7px 10px; font-size: 12.5px; }
.celula-nome { font-weight: 600; }
.celula-dado { font-family: var(--fonte-dado); font-size: 12.5px; color: var(--texto-fraco); }
.acoes-celula { display: flex; gap: 12px; justify-content: flex-end; }

.rodape-tabela { margin: 12px 0 0; font-size: 12px; color: var(--texto-fraco); font-family: var(--fonte-dado); }

.vazio { padding: 52px 20px; text-align: center; }
.vazio p { margin: 0; }
.vazio__acao { margin-top: 6px; color: var(--texto-fraco); font-size: 13px; }

/* ---------- Selos ---------- */

.pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 11px;
  border: 1px solid;
}
.pill--ativo { color: var(--ok); border-color: #b3ded0; background: var(--ok-fundo); }
.pill--inativo { color: var(--texto-fraco); border-color: var(--borda-forte); background: #f4f4f6; }

.selo {
  font-family: var(--fonte-dado);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid;
  border-radius: 3px;
}
.selo--concluido { color: var(--ok); border-color: #a5d5c4; background: var(--ok-fundo); }
.selo--parcial { color: var(--alerta); border-color: #e0c893; background: var(--alerta-fundo); }
.selo--falhou { color: var(--erro); border-color: #dcadad; background: var(--erro-fundo); }
.selo--rascunho, .selo--em_andamento { color: var(--texto-fraco); border-color: var(--borda-forte); background: #f4f4f6; }

/* ---------- Composer ---------- */

.composer { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 16px; align-items: start; }
.composer__col { min-width: 0; }

.editor { border: 1px solid var(--borda-forte); border-radius: var(--raio); overflow: hidden; }
.editor__barra { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: #fafafb; border-bottom: 1px solid var(--borda); }
.fbtn {
  background: none; border: 1px solid transparent; border-radius: 3px;
  padding: 4px 9px; cursor: pointer; font-size: 12.5px; color: var(--texto);
}
.fbtn:hover { background: #ededf1; border-color: var(--borda); }
.divisor { width: 1px; height: 18px; background: var(--borda-forte); margin: 0 4px; }

.editor__area { min-height: 240px; max-height: 380px; overflow-y: auto; padding: 15px; line-height: 1.65; }
.editor__area:focus { outline: none; }
.editor__area:empty::before { content: attr(data-placeholder); color: #a3a3ad; }
.editor__area p { margin: 0 0 10px; }
.editor__area a { color: var(--profit); }

.variaveis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.variaveis__rotulo { font-size: 12px; color: var(--texto-fraco); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--fonte-dado);
  font-size: 11.5px;
  padding: 3px 9px;
  border: 1px dashed var(--borda-forte);
  border-radius: 11px;
  background: #fff;
  color: var(--profit);
  cursor: pointer;
}
.chip:hover { border-style: solid; border-color: var(--profit); background: var(--profit-claro); }

.anexos { list-style: none; margin: 0; padding: 0; }
.anexos li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: #fafafb;
}
.anexos li + li { margin-top: 6px; }
.anexos__nome { font-size: 13px; word-break: break-all; }
.anexos__peso { font-family: var(--fonte-dado); font-size: 11px; color: var(--texto-fraco); }

.radios { display: flex; flex-direction: column; gap: 9px; }
.radio, .check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.radio input, .check input { accent-color: var(--profit); }

.contagem { font-family: var(--fonte-dado); font-size: 11.5px; color: var(--texto-fraco); }

.selecao__acoes { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; }
.selecao__acoes .input { flex: 1; }

.lista-selecao { max-height: 240px; overflow-y: auto; border: 1px solid var(--borda); border-radius: var(--raio); }
.item-selecao { display: flex; align-items: center; gap: 9px; padding: 8px 10px; cursor: pointer; }
.item-selecao + .item-selecao { border-top: 1px solid #f0f0f3; }
.item-selecao:hover { background: #fafafb; }
.item-selecao span { font-size: 13px; }
.item-selecao em { font-family: var(--fonte-dado); font-size: 11.5px; color: var(--texto-fraco); font-style: normal; }

/* Assinatura visual: faixa de protocolo da previa */
.previa { border-top: 3px solid var(--profit); }
.protocolo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.protocolo__codigo {
  font-family: var(--fonte-dado);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--grafite);
  border-bottom: 1px solid var(--borda-forte);
  padding-bottom: 1px;
}
.previa__assunto { margin: 0 0 10px; font-family: var(--fonte-titulo); font-size: 16px; font-weight: 600; }
.previa__corpo {
  border-top: 1px dashed var(--borda-forte);
  padding-top: 12px;
  max-height: 260px; overflow-y: auto;
  font-size: 13.5px; line-height: 1.65;
}
.previa__corpo p { margin: 0 0 9px; }

.progresso { margin-bottom: 14px; }
.progresso__barra { height: 6px; background: #e8e8ec; border-radius: 3px; overflow: hidden; }
.progresso__barra span { display: block; height: 100%; width: 0; background: var(--profit); transition: width .18s ease; }
.progresso__texto { margin: 8px 0 0; font-family: var(--fonte-dado); font-size: 11.5px; color: var(--texto-fraco); }

/* ---------- Modais ---------- */

.dlg {
  border: 0;
  border-radius: 8px;
  padding: 24px;
  width: min(720px, 92vw);
  box-shadow: 0 24px 60px rgba(23, 23, 26, .3);
}
.dlg--largo { width: min(880px, 94vw); }
.dlg::backdrop { background: rgba(23, 23, 26, .5); }
.dlg__cabeca { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dlg__titulo { margin: 0 0 16px; }
.dlg__meta { margin: 0 0 14px; font-family: var(--fonte-dado); font-size: 11.5px; color: var(--texto-fraco); }
.dlg__erro {
  margin: 14px 0 0; padding: 10px 12px;
  background: var(--erro-fundo);
  border: 1px solid #dcadad;
  border-left: 3px solid var(--erro);
  border-radius: var(--raio);
  color: var(--erro);
  font-size: 13px;
}
.det__mensagem {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 15px;
  background: #fafafb;
  max-height: 200px; overflow-y: auto;
  font-size: 13.5px; line-height: 1.65;
  margin-bottom: 16px;
}
.status-ok { color: var(--ok); font-weight: 600; }
.status-erro { color: var(--erro); font-weight: 600; }

/* ---------- Toast ---------- */

.toast {
  position: fixed; right: 22px; bottom: 22px;
  max-width: 380px;
  padding: 13px 17px;
  background: var(--grafite);
  color: #fff;
  border-radius: var(--raio);
  border-left: 3px solid var(--profit);
  box-shadow: 0 12px 30px rgba(23, 23, 26, .3);
  font-size: 13.5px;
  line-height: 1.5;
  z-index: 99;
}
.toast--ok { background: #145f44; border-left-color: #2ea87a; }
.toast--erro { background: #7d1717; border-left-color: #d95a5a; }

/* ---------- Login ---------- */

.corpo-login { overflow: auto; background: var(--grafite); }

.login {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 26px;
  padding: 32px 20px;
}
.login__marca { width: min(260px, 70vw); }
.login__marca img { width: 100%; height: auto; display: block; }
.login__card { width: min(400px, 100%); padding: 28px; border-top: 3px solid var(--profit); }
.login__titulo { margin: 0 0 20px; font-size: 23px; }
.login .dica { margin-top: 14px; text-align: center; }

/* ---------- Responsivo ---------- */

@media (max-width: 1080px) {
  .composer { grid-template-columns: 1fr; }
  .app { grid-template-columns: 200px 1fr; }
  .topbar__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==================================================================
   Painel
   ================================================================== */

/* Avisos: o que impede o sistema de funcionar aparece antes dos numeros */
.aviso {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px;
  border: 1px solid;
  border-left-width: 3px;
  border-radius: var(--raio);
  font-size: 13.5px;
  margin-bottom: 12px;
}
.aviso--erro { background: var(--erro-fundo); border-color: #dcadad; border-left-color: var(--erro); color: var(--erro); }
.aviso--alerta { background: var(--alerta-fundo); border-color: #e0c893; border-left-color: var(--alerta); color: var(--alerta); }
.aviso--info { background: #f0f2f7; border-color: var(--borda-forte); border-left-color: var(--grafite); color: var(--texto); }
.aviso .linkbtn { white-space: nowrap; font-weight: 600; color: inherit; text-decoration: underline; }

.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.kpi {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-top: 3px solid var(--profit);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px 18px;
}
.kpi__rotulo {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  font-weight: 600;
}
.kpi__valor {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}
.kpi__nota { margin: 8px 0 0; font-size: 12px; color: var(--texto-fraco); line-height: 1.45; }

.painel__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}
.painel__grade .card + .card { margin-top: 0; }

/* Barras por mes: comparacao rapida, sem biblioteca de grafico */
.barra { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.barra__mes {
  width: 52px;
  font-family: var(--fonte-dado);
  font-size: 11.5px;
  color: var(--texto-fraco);
  flex: none;
}
.barra__trilha {
  flex: 1;
  display: flex;
  height: 16px;
  background: #f0f0f3;
  border-radius: 3px;
  overflow: hidden;
}
.barra__ok { background: var(--profit); }
.barra__erro { background: #5e1013; }
.barra__num {
  width: 46px;
  text-align: right;
  font-family: var(--fonte-dado);
  font-size: 12px;
  color: var(--texto);
  flex: none;
}

.ultimo__numeros { margin: 12px 0 0; font-size: 13.5px; }
.ultimo__numeros strong { font-size: 16px; }

@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .painel__grade { grid-template-columns: 1fr; }
}

/* ==================================================================
   Usuários e níveis
   ================================================================== */

.rail__papel {
  margin: 0 0 8px;
  font-family: var(--fonte-dado);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--profit);
}

.pill--admin { color: var(--profit); border-color: #f0b8ba; background: var(--profit-claro); }
.pill--operador { color: #1f4e79; border-color: #b6cde0; background: #eef4fa; }
.pill--leitor { color: var(--texto-fraco); border-color: var(--borda-forte); background: #f4f4f6; }

.voce {
  font-family: var(--fonte-dado);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-fraco);
  border: 1px solid var(--borda-forte);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  font-weight: 400;
}

.niveis td:not(:first-child), .niveis th:not(:first-child) { text-align: center; }
.niveis .sim { color: var(--ok); font-weight: 600; }
.niveis .nao { color: var(--texto-fraco); }

/* Bloco de configuracao que o nivel do usuario nao permite editar */
.card--bloqueado { position: relative; opacity: .72; }
.card--bloqueado .input, .card--bloqueado select { background: #f7f7f9; pointer-events: none; }