/* Central de Avisos — CSS único, sem framework, sem CDN externo.
   Paleta da marca NeuroPsi+Leve, mesma do app da Comunidade de Supervisão.
   Ferramenta interna: prioridade é legibilidade e não errar clique, não vitrine. */

:root {
  --salvia:        #6B7C64;
  --salvia-claro:  #8B9A84;
  --salvia-suave:  #EBEFE9;
  --verde:         #3C4A3A;
  --ocre:          #C79A6B;
  --ocre-suave:    #F6ECE0;
  --ocre-texto:    #8A6231;
  --terracota:     #B4552F;
  --terracota-suave:#FBEAE3;
  --creme:         #F7F3EC;
  --creme2:        #FDFBF7;
  --tinta:         #26241F;
  --texto-suave:   #5B564C;
  --texto-mudo:    #8B8578;
  --borda:         #E3DCD0;
  --radius:        10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--verde); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--terracota); }

h1 { font-size: 1.55rem; margin: 0 0 .2em; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .6em; letter-spacing: -.005em; }

/* ---------- topo ---------- */
.topo { background: var(--verde); color: var(--creme2); }
.topo-in {
  max-width: 1180px; margin: 0 auto; padding: .7rem 1.2rem;
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
}
.marca { color: var(--creme2); font-weight: 600; text-decoration: none; letter-spacing: -.01em; }
.topo nav { display: flex; gap: 1.1rem; margin-right: auto; }
.topo nav a { color: #CBD3C6; text-decoration: none; font-size: .92rem; }
.topo nav a:hover, .topo nav a.on { color: var(--creme2); }
.topo nav a.on { box-shadow: inset 0 -2px 0 var(--ocre); padding-bottom: 2px; }
.sair { display: flex; align-items: center; gap: .7rem; }
.quem { font-size: .82rem; color: #CBD3C6; text-decoration: none; }
.quem:hover { color: var(--creme2); }
.sair button {
  background: transparent; border: 1px solid #5C6B58; color: #CBD3C6;
  padding: .25rem .7rem; border-radius: 6px; cursor: pointer; font-size: .82rem;
}
.sair button:hover { border-color: var(--ocre); color: var(--creme2); }

/* ---------- faixas de estado ---------- */
.faixa { padding: .6rem 1.2rem; font-size: .9rem; text-align: center; }
.faixa-atencao { background: var(--ocre-suave); color: var(--ocre-texto); border-bottom: 1px solid #EBD9C3; }
.faixa-erro    { background: var(--terracota-suave); color: #8C3A1B; border-bottom: 1px solid #F0D2C7; }
.faixa-parado  { background: #E8E6E1; color: var(--texto-suave); border-bottom: 1px solid var(--borda); }
.faixa a { color: inherit; }

/* ---------- layout ---------- */
.pagina { max-width: 1180px; margin: 0 auto; padding: 1.6rem 1.2rem 3rem; }
.cabecalho-pagina { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.cabecalho-pagina h1 { margin: 0; }
.migalha { margin: 0 0 .8rem; font-size: .88rem; }

.cartao {
  background: var(--creme2); border: 1px solid var(--borda); border-radius: var(--radius);
  padding: 1.15rem 1.3rem; margin-bottom: 1.1rem;
}
.cartao.estreito { max-width: 560px; }
.cartao.perigo { border-color: #E8C4B6; background: #FEFAF8; }
.destaque-atencao { border-color: #E5CDA9; background: var(--ocre-suave); }
.destaque-ok { border-color: #C3D0BC; background: var(--salvia-suave); }

.grade-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem; margin-bottom: 1.1rem; }
.dois-lados { display: flex; gap: 2rem; flex-wrap: wrap; }

/* ---------- métricas ---------- */
.metrica .rotulo { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-mudo); }
.metrica .numero { display: block; font-size: 2rem; font-weight: 600; line-height: 1.15; margin: .15rem 0 .4rem; color: var(--verde); }
.metrica .numero small { font-size: .85rem; font-weight: 400; color: var(--texto-mudo); }
.barra { height: 6px; background: var(--salvia-suave); border-radius: 3px; overflow: hidden; margin-bottom: .6rem; }
.barra-fill { height: 100%; background: var(--salvia); }

/* ---------- tabela ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th {
  text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-mudo); font-weight: 600; padding: .4rem .6rem; border-bottom: 1px solid var(--borda);
}
.tabela td { padding: .5rem .6rem; border-bottom: 1px solid #F0EBE1; vertical-align: top; }
.tabela tr:last-child td { border-bottom: none; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-apagada td { opacity: .5; }
.detalhe { max-width: 380px; overflow-wrap: anywhere; }

/* ---------- etiquetas e situações ---------- */
.etiqueta {
  display: inline-block; font-size: .7rem; padding: .1rem .45rem; border-radius: 4px;
  background: var(--salvia-suave); color: var(--verde); margin-left: .35rem; white-space: nowrap;
}
.etiqueta-aviso { background: var(--ocre-suave); color: var(--ocre-texto); }
.etiqueta-erro  { background: var(--terracota-suave); color: #8C3A1B; }
.etiqueta-fraca { background: #EEEAE2; color: var(--texto-mudo); }

.situacao { font-size: .75rem; padding: .12rem .5rem; border-radius: 4px; text-transform: lowercase; }
.situacao-ativo     { background: var(--salvia-suave); color: var(--verde); }
.situacao-arquivado { background: #EEEAE2; color: var(--texto-suave); }
.situacao-sumido    { background: var(--ocre-suave); color: var(--ocre-texto); }
.situacao-removido  { background: var(--terracota-suave); color: #8C3A1B; }

/* ---------- formulários ---------- */
label { display: block; margin-bottom: .8rem; font-size: .88rem; color: var(--texto-suave); }
input[type=text], input[type=email], input[type=password], input[type=search], select, textarea {
  width: 100%; padding: .5rem .65rem; margin-top: .25rem;
  border: 1px solid var(--borda); border-radius: 7px; background: #fff;
  font: inherit; color: var(--tinta);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--salvia-claro); outline-offset: 1px; border-color: var(--salvia); }
input:disabled, select:disabled { background: #F2EFE9; color: var(--texto-mudo); }

.linha-form { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.linha-form input, .linha-form select { margin-top: 0; width: auto; flex: 1 1 200px; }
.filtros { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.1rem; }
.filtros input, .filtros select { margin-top: 0; width: auto; }
.link-limpar { font-size: .85rem; }

.botao {
  display: inline-block; padding: .45rem 1rem; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--borda); background: #fff; color: var(--verde);
  font: inherit; font-size: .9rem; text-decoration: none; white-space: nowrap;
}
.botao:hover { border-color: var(--salvia); background: var(--salvia-suave); color: var(--verde); }
.botao.primario { background: var(--verde); border-color: var(--verde); color: var(--creme2); }
.botao.primario:hover { background: var(--salvia); border-color: var(--salvia); color: #fff; }
.botao.perigoso { background: var(--terracota); border-color: var(--terracota); color: #fff; }
.botao.perigoso:hover { background: #9C4526; border-color: #9C4526; color: #fff; }
.botao.largo { width: 100%; text-align: center; margin-top: .4rem; }
.botao.pequeno { padding: .2rem .6rem; font-size: .8rem; }
.botao:disabled { opacity: .45; cursor: not-allowed; }
.acoes-linha { display: flex; gap: .4rem; }
.acoes-linha form { display: inline; }

.grade-checkbox { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .3rem .9rem; margin-bottom: 1rem; }
.checkbox-item { display: flex; gap: .5rem; align-items: baseline; margin: 0; padding: .25rem 0; font-size: .9rem; color: var(--tinta); }
.checkbox-item input { width: auto; margin: 0; }
.checkbox-item small { display: block; color: var(--texto-mudo); font-size: .78rem; }

/* ---------- ficha ---------- */
.ficha { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: .4rem 1.2rem; margin: 0; }
.ficha dt { color: var(--texto-mudo); font-size: .85rem; }
.ficha dd { margin: 0; }

/* ---------- diversos ---------- */
.nota { font-size: .84rem; color: var(--texto-mudo); margin: .5rem 0 0; }
.nota a { color: var(--salvia); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.pequeno { font-size: .82rem; }
.lista-simples { margin: .5rem 0 0; padding-left: 1.1rem; }
.lista-simples li { margin-bottom: .3rem; }
.alerta { padding: .6rem .8rem; border-radius: 7px; font-size: .9rem; }
.alerta.erro { background: var(--terracota-suave); color: #8C3A1B; }
.mensagem-erro { color: var(--texto-suave); overflow-wrap: anywhere; }
.paginacao { display: flex; gap: .6rem; }
.senha-provisoria {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.3rem; letter-spacing: .04em; background: #fff;
  border: 1px dashed var(--salvia); border-radius: 7px; padding: .7rem 1rem; display: inline-block;
}

.rodape {
  max-width: 1180px; margin: 0 auto; padding: 1.4rem 1.2rem 2.4rem;
  font-size: .8rem; color: var(--texto-mudo); border-top: 1px solid var(--borda);
}

/* ---------- login ---------- */
.login-wrap { min-height: 82vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.cartao.login { width: 100%; max-width: 380px; }
.cartao.login h1 { font-size: 1.3rem; }
.cartao.login .sub { color: var(--texto-mudo); font-size: .86rem; margin: 0 0 1.2rem; }

@media (max-width: 640px) {
  .topo-in { gap: .8rem; }
  .quem { display: none; }
  .ficha { grid-template-columns: 1fr; gap: .1rem .6rem; }
  .ficha dd { margin-bottom: .5rem; }
  .cartao { padding: 1rem; }
}

/* ---------- Fase 1: compositor, balão e estados de envio ---------- */

.pilula {
  display: inline-block; min-width: 1.1rem; padding: 0 .3rem; border-radius: 9px;
  background: var(--ocre); color: var(--verde); font-size: .7rem; font-weight: 600; text-align: center;
}

.compositor { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; align-items: start; }
.compositor textarea {
  min-height: 320px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem; line-height: 1.5; resize: vertical;
}
.rotulo-previa {
  display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-mudo); margin-bottom: .4rem;
}

/* Balão parecido com o do WhatsApp — a equipe precisa julgar o texto como a leitora vai ver,
   não como markdown cru. */
.balao {
  background: #E7FFDB; border: 1px solid #CFEFC0; border-radius: 8px 8px 8px 2px;
  padding: .7rem .85rem; min-height: 90px; max-width: 460px;
  font-size: .93rem; line-height: 1.5; color: #111B21; overflow-wrap: anywhere;
}
.balao code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(0,0,0,.06); padding: 0 .2rem; border-radius: 3px;
}
.balao .vazio { color: #7A8B77; font-style: italic; }

.cru { margin-top: .9rem; }
.cru summary { cursor: pointer; font-size: .84rem; color: var(--texto-mudo); }
.texto-cru {
  background: #F2EFE9; border: 1px solid var(--borda); border-radius: 7px; padding: .7rem .85rem;
  font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: .5rem;
}

.atalhos { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4rem 0 1rem; }
.acoes-grandes { flex-wrap: wrap; gap: .6rem; align-items: flex-start; }
.acoes-grandes form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.acoes-grandes input[type=text] { margin-top: 0; width: auto; min-width: 200px; }

/* Estados de envio. O vocabulário está em routes/avisos.js — "entregue", "recebido" e "lido"
   são proibidos, porque esta integração não devolve confirmação de entrega. */
.envio { font-size: .86rem; display: inline-block; }
.envio-ok        { color: var(--verde); }
.envio-ok-fraco  { color: var(--salvia); }
.envio-atencao   { color: var(--ocre-texto); }
.envio-erro      { color: #8C3A1B; font-weight: 500; }
.envio-neutro    { color: var(--texto-mudo); }

.aviso-entrega {
  border-top: 1px solid var(--borda); margin-top: 1rem; padding-top: .8rem;
}

/* Status de campanha */
.st-rascunho             { background: #EEEAE2; color: var(--texto-suave); }
.st-aguardando_aprovacao { background: var(--ocre-suave); color: var(--ocre-texto); }
.st-agendado             { background: var(--salvia-suave); color: var(--verde); }
.st-enviando             { background: var(--ocre); color: var(--verde); }
.st-concluido            { background: var(--salvia); color: #fff; }
.st-parcial              { background: var(--ocre-suave); color: var(--ocre-texto); }
.st-falhou               { background: var(--terracota-suave); color: #8C3A1B; }
.st-cancelado            { background: #EEEAE2; color: var(--texto-mudo); }

.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li {
  padding: .35rem 0 .35rem .9rem; border-left: 2px solid var(--borda);
  display: flex; gap: .7rem; flex-wrap: wrap; align-items: baseline;
}

@media (max-width: 860px) {
  .compositor { grid-template-columns: 1fr; }
  .balao { max-width: none; }
}

/* ---------- Fase 2: anexo, modelos, recorrência ---------- */
.inline-check { display: inline-flex; gap: .35rem; align-items: center; margin: 0; font-size: .84rem; }
.inline-check input { width: auto; margin: 0; }
.sub-titulo { font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-mudo); margin: 1.2rem 0 .5rem; }
.anexo-linha { border-left: 3px solid var(--ocre); padding-left: .7rem; margin-top: .8rem; }
input[type=file] {
  width: 100%; padding: .45rem; margin-top: .25rem;
  border: 1px dashed var(--borda); border-radius: 7px; background: #fff; font: inherit; font-size: .88rem;
}