/* ============================================================
   Painel de conteúdo — folha de estilo única
   Paleta: areia / off-white, acento verde-acinzentado e terracota
   Tema claro apenas.
   ============================================================ */

:root {
  /* superfícies */
  --areia-0:      #FAF8F4;   /* fundo da página */
  --areia-1:      #FFFDF9;   /* cartões */
  --areia-2:      #F3EFE7;   /* preenchimento sutil */
  --areia-3:      #EAE4D8;   /* trilhos, barras vazias */
  --borda:        #E4DDD1;
  --borda-forte:  #D2C8B7;

  /* tinta */
  --tinta:        #2C2822;
  --tinta-media:  #5F5749;
  --tinta-suave:  #8A8071;

  /* acentos */
  --sage:         #6B7F6E;
  --sage-escuro:  #4F6352;
  --sage-claro:   #E7EDE6;
  --terracota:    #B06A47;
  --terracota-claro: #F5E8E0;
  --alerta:       #A3402A;
  --alerta-fundo: #FBEDE9;
  --alerta-borda: #E2BCAE;
  --atencao:      #8A6D1F;
  --atencao-fundo:#FCF4E2;
  --atencao-borda:#E5D2A4;

  /* blocos de conteúdo — os mesmos em todas as telas */
  --bloco-1: #B06A47;   /* Identificação  */
  --bloco-2: #5B7A8C;   /* Desmistificação */
  --bloco-3: #6B7F6E;   /* ACP traduzida  */
  --bloco-4: #9C8340;   /* Você           */
  --bloco-5: #8A6478;   /* Convite        */

  /* status */
  --st-planejado:   #8B8272;
  --st-em_producao: #9C8340;
  --st-pronto:      #6B7F6E;
  --st-agendado:    #5B7A8C;
  --st-publicado:   #4E6B4F;

  --raio:   10px;
  --raio-s: 7px;
  --sombra: 0 1px 2px rgba(44, 40, 34, .05), 0 4px 14px rgba(44, 40, 34, .045);

  --serifa: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--areia-0);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sage-escuro); }
a:hover { color: var(--terracota); }

h1, h2, h3, h4 { font-family: var(--serifa); font-weight: 600; line-height: 1.25; color: var(--tinta); }

hr { border: 0; border-top: 1px solid var(--borda); margin: 2rem 0; }

::selection { background: var(--sage-claro); }

:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: 3px; }

/* --------------------------------------------------------------- layout -- */
.envelope { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem 4rem; }
.envelope--estreito { max-width: 860px; }

/* -------------------------------------------------------------- cabeçalho -- */
.topo {
  background: var(--areia-1);
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 40;
}
.topo__interno {
  max-width: 1120px; margin: 0 auto; padding: .7rem 1.25rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.marca {
  font-family: var(--serifa); font-size: 1.06rem; font-weight: 600;
  text-decoration: none; color: var(--tinta); white-space: nowrap;
}
.marca span { color: var(--tinta-suave); font-weight: 400; }
.menu { display: flex; gap: .25rem; flex-wrap: wrap; margin-left: auto; }
.menu-usuario { display: flex; align-items: center; gap: .7rem; white-space: nowrap; }
.menu-usuario a { color: var(--tinta-media); text-decoration: none; }
.menu-usuario a:hover { color: var(--sage-escuro); }
.menu a {
  text-decoration: none; color: var(--tinta-media); padding: .38rem .78rem;
  border-radius: var(--raio-s); font-size: .93rem; white-space: nowrap;
}
.menu a:hover { background: var(--areia-2); color: var(--tinta); }
.menu a.ativo { background: var(--sage-claro); color: var(--sage-escuro); font-weight: 600; }

.cabecalho-pagina { padding: 2rem 0 1.4rem; }
.cabecalho-pagina h1 { margin: 0; font-size: 1.75rem; letter-spacing: -.01em; }
.cabecalho-pagina p { margin: .35rem 0 0; color: var(--tinta-suave); font-size: .95rem; }

/* --------------------------------------------------------------- cartões -- */
.cartao {
  background: var(--areia-1); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 1.25rem 1.4rem; box-shadow: var(--sombra);
}
.cartao > h2, .cartao > h3 { margin: 0 0 .9rem; }
.cartao__titulo {
  font-family: var(--sans); font-size: .76rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-suave);
  margin: 0 0 .9rem;
}
.grade { display: grid; gap: 1.1rem; }
.grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ------------------------------------------------------------- progresso -- */
.progresso__numeros { display: flex; align-items: baseline; gap: .55rem; margin-bottom: .7rem; }
.progresso__grande { font-family: var(--serifa); font-size: 2.5rem; line-height: 1; }
.progresso__resto { color: var(--tinta-suave); font-size: .97rem; }
.barra { height: 10px; background: var(--areia-3); border-radius: 999px; overflow: hidden; }
.barra__preenchida { height: 100%; background: var(--sage); border-radius: 999px; transition: width .4s ease; }

/* ---------------------------------------------------------------- badges -- */
.badge {
  display: inline-flex; align-items: center; gap: .34rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  padding: .2rem .58rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent; line-height: 1.5;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.badge--sem-ponto::before { display: none; }

.status-planejado   { color: var(--st-planejado);   background: #F2F0EA; border-color: #E2DDD0; }
.status-em_producao { color: var(--st-em_producao); background: #FBF4E2; border-color: #E9DCB4; }
.status-pronto      { color: var(--st-pronto);      background: var(--sage-claro); border-color: #CFDACD; }
.status-agendado    { color: var(--st-agendado);    background: #EAF0F4; border-color: #CBDAE3; }
.status-publicado   { color: #FFFFFF;               background: var(--st-publicado); border-color: var(--st-publicado); }

.bloco-tag {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .76rem; color: var(--tinta-media); white-space: nowrap;
}
.bloco-tag::before {
  content: ""; width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto;
  background: var(--cor-bloco, var(--tinta-suave));
}
.bloco-1 { --cor-bloco: var(--bloco-1); }
.bloco-2 { --cor-bloco: var(--bloco-2); }
.bloco-3 { --cor-bloco: var(--bloco-3); }
.bloco-4 { --cor-bloco: var(--bloco-4); }
.bloco-5 { --cor-bloco: var(--bloco-5); }

.formato-tag {
  font-size: .76rem; color: var(--tinta-suave);
  background: var(--areia-2); border-radius: var(--raio-s);
  padding: .12rem .5rem; white-space: nowrap;
}

/* ---------------------------------------------------------------- listas -- */
.lista { display: flex; flex-direction: column; }
.lista__item {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: .72rem 0; border-bottom: 1px solid var(--borda);
  text-decoration: none; color: inherit;
}
.lista__item:last-child { border-bottom: 0; }
.lista__item:hover { background: var(--areia-2); }
.lista__data {
  flex: 0 0 3.2rem; text-align: center; font-variant-numeric: tabular-nums;
  line-height: 1.15; padding-top: .12rem;
}
.lista__data b { display: block; font-family: var(--serifa); font-size: 1.22rem; font-weight: 600; }
.lista__data span { font-size: .68rem; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .06em; }
.lista__corpo { min-width: 0; flex: 1; }
.lista__titulo { font-size: .96rem; line-height: 1.45; }
.lista__meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; }

.item-atrasado .lista__data b { color: var(--alerta); }
.item-atrasado { border-left: 3px solid var(--alerta); padding-left: .7rem; margin-left: -.7rem; }

.vazio { color: var(--tinta-suave); font-size: .92rem; font-style: italic; padding: .6rem 0; }

/* ----------------------------------------------------------- contadores -- */
.contadores { display: flex; flex-wrap: wrap; gap: .55rem; }
.contador {
  flex: 1 1 7rem; background: var(--areia-2); border: 1px solid var(--borda);
  border-radius: var(--raio-s); padding: .6rem .75rem; text-decoration: none; color: inherit;
}
.contador:hover { border-color: var(--borda-forte); background: var(--areia-1); }
.contador__n { font-family: var(--serifa); font-size: 1.45rem; line-height: 1.1; display: block; }
.contador__r { font-size: .76rem; color: var(--tinta-suave); }

/* barras de bloco (real x meta) */
.bloco-linha { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: .7rem; align-items: center; padding: .3rem 0; }
.bloco-linha__nome { font-size: .86rem; display: flex; align-items: center; gap: .4rem; }
.bloco-linha__nome::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--cor-bloco); flex: 0 0 auto; }
.bloco-linha__trilho { height: 8px; background: var(--areia-3); border-radius: 999px; position: relative; }
.bloco-linha__barra { height: 100%; border-radius: 999px; background: var(--cor-bloco); opacity: .85; }
.bloco-linha__meta {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--tinta-suave); opacity: .5;
}
.bloco-linha__n { font-size: .8rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; min-width: 4.4rem; text-align: right; }

/* --------------------------------------------------------------- filtros -- */
.filtros {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end;
  background: var(--areia-1); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .9rem 1rem; margin-bottom: 1.4rem;
}
.campo { display: flex; flex-direction: column; gap: .22rem; }
.campo > label, .rotulo {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinta-suave);
}
.campo--cresce { flex: 1 1 12rem; }

input[type="text"], input[type="url"], input[type="date"], input[type="search"],
select, textarea {
  font-family: inherit; font-size: .92rem; color: var(--tinta);
  background: var(--areia-1); border: 1px solid var(--borda-forte);
  border-radius: var(--raio-s); padding: .42rem .6rem; width: 100%;
}
textarea { line-height: 1.6; resize: vertical; }
select { cursor: pointer; }
input:focus, select:focus, textarea:focus { border-color: var(--sage); outline: none; box-shadow: 0 0 0 3px rgba(107,127,110,.15); }

/* --------------------------------------------------------------- botões -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  padding: .48rem .95rem; border-radius: var(--raio-s);
  border: 1px solid var(--borda-forte); background: var(--areia-1); color: var(--tinta);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--areia-2); color: var(--tinta); }
.btn--principal { background: var(--sage); border-color: var(--sage); color: #fff; }
.btn--principal:hover { background: var(--sage-escuro); border-color: var(--sage-escuro); color: #fff; }
.btn--perigo { color: var(--alerta); border-color: var(--alerta-borda); }
.btn--perigo:hover { background: var(--alerta-fundo); color: var(--alerta); }
.btn--pequeno { font-size: .8rem; padding: .3rem .62rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------- tabelas -- */
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th {
  text-align: left; font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinta-suave); padding: .5rem .6rem;
  border-bottom: 1px solid var(--borda-forte);
}
.tabela td { padding: .6rem; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr:hover { background: var(--areia-2); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

/* mês no calendário */
.mes-cabecalho { margin: 2.2rem 0 .5rem; }
.mes-cabecalho:first-child { margin-top: .5rem; }
.mes-cabecalho h2 { margin: 0; font-size: 1.22rem; }
.mes-cabecalho p { margin: .1rem 0 0; color: var(--tinta-suave); font-size: .9rem; font-style: italic; }

.linha-atrasada td:first-child { box-shadow: inset 3px 0 0 var(--alerta); }
.linha-atrasada .cal__data { color: var(--alerta); font-weight: 600; }
.cal__data { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal__ideia { line-height: 1.45; }
.cal__ideia small { display: block; color: var(--tinta-suave); font-size: .8rem; margin-top: .12rem; }
.select-status { font-size: .8rem; padding: .24rem .4rem; width: auto; min-width: 8.2rem; }
.contagem-midia { font-size: .8rem; color: var(--tinta-suave); white-space: nowrap; }
.contagem-midia.zero { color: var(--borda-forte); }

/* --------------------------------------------------------------- avisos -- */
.aviso {
  border-radius: var(--raio-s); padding: .7rem .95rem; font-size: .9rem;
  border: 1px solid var(--atencao-borda); background: var(--atencao-fundo); color: var(--atencao);
  margin: .6rem 0;
}
.aviso--erro { border-color: var(--alerta-borda); background: var(--alerta-fundo); color: var(--alerta); }
.aviso--ok { border-color: #CFDACD; background: var(--sage-claro); color: var(--sage-escuro); }
.aviso--info { border-color: #C7D3DA; background: #EAF0F3; color: #3F5C6C; }

/* ----------------------------------------------------- alertas CFP (Etapa 2) -- */
.cfp-alerta {
  border-radius: var(--raio-s); border: 1px solid var(--borda); border-left-width: 4px;
  padding: .7rem .9rem; margin-bottom: .6rem; font-size: .88rem;
}
.cfp-alerta--bloqueante { border-left-color: var(--alerta); background: var(--alerta-fundo); }
.cfp-alerta--atencao    { border-left-color: var(--atencao); background: var(--atencao-fundo); }
.cfp-alerta--informativo{ border-left-color: #5B7A8C; background: #EAF0F3; }
.cfp-alerta.aceito { opacity: .55; }
.cfp-alerta__topo { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; flex-wrap: wrap; }
.cfp-badge {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: .12rem .5rem; border-radius: 999px; white-space: nowrap;
}
.cfp-badge--bloqueante { background: var(--alerta); color: #fff; }
.cfp-badge--atencao    { background: var(--atencao); color: #fff; }
.cfp-badge--informativo{ background: #5B7A8C; color: #fff; }
.cfp-alerta__titulo { font-weight: 600; }
.cfp-alerta__termo { font-style: italic; color: var(--tinta-media); }
.cfp-alerta__motivo { margin: .3rem 0; }
.cfp-alerta__sugestao { color: var(--tinta-media); }
.cfp-alerta__sugestao strong { color: var(--tinta); }
.cfp-alerta__rodape { margin-top: .5rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cfp-alerta__aceito-info { font-size: .82rem; color: var(--tinta-suave); }

/* --------------------------------------------------------- detalhe do post -- */
.detalhe { display: grid; grid-template-columns: minmax(0,1fr) 20rem; gap: 1.4rem; align-items: start; }
.pilha { display: flex; flex-direction: column; gap: 1.1rem; }
.campo-bloco { margin-bottom: 1.1rem; }
.campo-bloco:last-child { margin-bottom: 0; }
.campo-bloco > label { display: block; margin-bottom: .3rem; }
.contador-chars { font-size: .78rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.contador-chars.excedeu { color: var(--alerta); font-weight: 600; }

.nav-posts { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1.4rem; }
.nav-posts .btn { max-width: 48%; overflow: hidden; }
.nav-posts .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------------------------------------------------- uploads -- */
.zona-solta {
  border: 2px dashed var(--borda-forte); border-radius: var(--raio);
  padding: 1.5rem 1rem; text-align: center; color: var(--tinta-suave);
  background: var(--areia-2); cursor: pointer; transition: border-color .15s, background .15s;
}
.zona-solta:hover { border-color: var(--sage); }
.zona-solta.arrastando { border-color: var(--sage); background: var(--sage-claro); color: var(--sage-escuro); }
.zona-solta strong { display: block; color: var(--tinta); font-size: .95rem; margin-bottom: .18rem; }
.zona-solta small { font-size: .8rem; }

.grade-midias { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .65rem; margin-top: .9rem; }
.midia {
  position: relative; border: 1px solid var(--borda); border-radius: var(--raio-s);
  overflow: hidden; background: var(--areia-2); aspect-ratio: 1; cursor: grab;
}
.midia img, .midia video { width: 100%; height: 100%; object-fit: cover; display: block; }
.midia.arrastando-item { opacity: .35; }
.midia.alvo { outline: 2px solid var(--sage); outline-offset: -2px; }
.midia__ordem {
  position: absolute; top: 4px; left: 4px; background: rgba(44,40,34,.75); color: #fff;
  font-size: .68rem; font-weight: 600; border-radius: 999px;
  min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px;
  /* no toque, este número é a alça de arrastar */
  touch-action: none; cursor: grab; user-select: none;
}
.midia__ordem:active { cursor: grabbing; }
@media (pointer: coarse) {
  .midia__ordem { min-width: 26px; height: 26px; font-size: .78rem; }
}
.midia__x {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px;
  border: 0; border-radius: 50%; background: rgba(44,40,34,.75); color: #fff;
  font-size: .8rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.midia__x:hover { background: var(--alerta); }
.midia__video { position: absolute; bottom: 4px; left: 4px; background: rgba(44,40,34,.75); color:#fff; font-size:.62rem; padding: .05rem .3rem; border-radius: 3px; letter-spacing:.04em; }

/* -------------------------------------------------------------- perguntas -- */
.pergunta {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .62rem .1rem; border-bottom: 1px solid var(--borda);
}
.pergunta:last-child { border-bottom: 0; }
.pergunta input[type="checkbox"] { margin-top: .32rem; width: 15px; height: 15px; accent-color: var(--sage); flex: 0 0 auto; cursor: pointer; }
.pergunta__texto { flex: 1; line-height: 1.5; font-size: .95rem; }
.pergunta.usada .pergunta__texto { color: var(--tinta-suave); text-decoration: line-through; text-decoration-color: var(--borda-forte); }
.btn-copiar { flex: 0 0 auto; opacity: 0; transition: opacity .12s; }
.pergunta:hover .btn-copiar, .btn-copiar:focus-visible { opacity: 1; }

/* ----------------------------------------------------------- página plano -- */
.plano-layout { display: grid; grid-template-columns: 15.5rem minmax(0,1fr); gap: 2rem; align-items: start; }
.indice { position: sticky; top: 4.2rem; max-height: calc(100vh - 6rem); overflow-y: auto; font-size: .88rem; }
.indice ul { list-style: none; margin: 0; padding: 0; }
.indice a {
  display: block; padding: .26rem .55rem; text-decoration: none; color: var(--tinta-media);
  border-left: 2px solid var(--borda); border-radius: 0 var(--raio-s) var(--raio-s) 0; line-height: 1.4;
}
.indice a:hover { background: var(--areia-2); color: var(--tinta); }
.indice a.ativo { border-left-color: var(--sage); color: var(--sage-escuro); background: var(--sage-claro); font-weight: 600; }
.indice .nivel-3 { padding-left: 1rem; font-size: .84rem; }

.markdown { font-family: var(--serifa); font-size: 1.02rem; line-height: 1.75; max-width: 44rem; }
.markdown h1 { font-size: 1.75rem; margin: 0 0 1rem; }
.markdown h2 { font-size: 1.38rem; margin: 2.6rem 0 .8rem; padding-bottom: .35rem; border-bottom: 1px solid var(--borda); }
.markdown h3 { font-size: 1.12rem; margin: 1.9rem 0 .6rem; }
.markdown h4 { font-size: 1rem; margin: 1.4rem 0 .5rem; }
.markdown p { margin: 0 0 1rem; }
.markdown ul, .markdown ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.markdown li { margin-bottom: .35rem; }
.markdown blockquote {
  margin: 1.2rem 0; padding: .7rem 1.1rem; border-left: 3px solid var(--terracota);
  background: var(--terracota-claro); border-radius: 0 var(--raio-s) var(--raio-s) 0;
}
.markdown blockquote p:last-child { margin-bottom: 0; }
.markdown code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .86em;
  background: var(--areia-2); padding: .1rem .32rem; border-radius: 4px;
}
.markdown pre {
  background: var(--areia-2); border: 1px solid var(--borda); border-radius: var(--raio-s);
  padding: .85rem 1rem; overflow-x: auto; font-size: .88rem; line-height: 1.55;
}
.markdown pre code { background: none; padding: 0; }
.markdown table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: .9rem; margin: 0 0 1.2rem; }
.markdown th { text-align: left; background: var(--areia-2); padding: .5rem .65rem; border: 1px solid var(--borda); }
.markdown td { padding: .5rem .65rem; border: 1px solid var(--borda); vertical-align: top; }
.markdown hr { margin: 2.2rem 0; }
.markdown img { max-width: 100%; height: auto; }
.rolagem-x { overflow-x: auto; }

/* --------------------------------------------------------------- utilidades -- */
.pilha-linha { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.suave { color: var(--tinta-suave); }
.pequeno { font-size: .84rem; }
.mt { margin-top: 1rem; }
.esconde { display: none !important; }

/* toast */
#toast {
  position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%) translateY(1.5rem);
  background: var(--tinta); color: var(--areia-0); padding: .58rem 1.1rem;
  border-radius: 999px; font-size: .88rem; box-shadow: var(--sombra);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 90; max-width: 90vw;
}
#toast.aparece { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.erro { background: var(--alerta); }

/* ======================================================== painel editável == */

/* selos de divergência em relação ao plano */
.selo-editado, .selo-manual {
  display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .03em;
  padding: .06rem .4rem; border-radius: 4px; vertical-align: middle; white-space: nowrap;
  margin-left: .3rem;
}
.selo-editado { color: var(--atencao); background: var(--atencao-fundo); border: 1px solid var(--atencao-borda); }
.selo-manual  { color: var(--sage-escuro); background: var(--sage-claro); border: 1px solid #CFDACD; }

/* contador no menu */
.pilula {
  display: inline-block; margin-left: .3rem; min-width: 1.05rem; padding: 0 .28rem;
  font-size: .68rem; font-weight: 700; line-height: 1.5; text-align: center;
  border-radius: 999px; background: var(--terracota); color: #fff;
}

/* desvio da meta no painel */
.desvio { font-size: .7rem; font-weight: 700; margin-left: .25rem; }
.desvio--acima  { color: var(--terracota); }
.desvio--abaixo { color: var(--alerta); }
.texto-alerta { color: var(--alerta); }

.barra--fina { height: 6px; }
.barra__preenchida--falhou { background: var(--alerta); }
.mes-corrente { background: var(--sage-claro) !important; }
.mes-futuro td { opacity: .55; }
.th-nota { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .75; }

/* ------------------------------------------------------------- diálogos -- */
.dialogo {
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
  background: var(--areia-1); color: var(--tinta); padding: 1.5rem 1.6rem;
  max-width: 34rem; width: calc(100vw - 2rem); box-shadow: 0 12px 40px rgba(44,40,34,.18);
}
.dialogo--largo { max-width: 52rem; }
.dialogo::backdrop { background: rgba(44, 40, 34, .38); }
.dialogo h2 { font-size: 1.15rem; }
.dialogo__acoes {
  display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap;
  margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--borda);
}
.rolagem-y { max-height: 46vh; overflow-y: auto; }

/* ------------------------------------------------------ banco de ideias -- */
.lista-ideias { display: flex; flex-direction: column; gap: .6rem; }
.ideia {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--areia-1); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .85rem 1rem; box-shadow: var(--sombra);
}
.ideia__corpo { flex: 1; min-width: 0; }
.ideia__texto { margin: 0 0 .35rem; line-height: 1.5; }
.ideia__acoes { display: flex; gap: .35rem; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }

/* ------------------------------------------------------------- gráfico -- */
.grafico { width: 100%; height: auto; min-width: 460px; display: block; }
.legenda {
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .9rem;
  padding-top: .8rem; border-top: 1px solid var(--borda);
}
.legenda__item { display: flex; align-items: center; gap: .38rem; font-size: .82rem; }
.legenda__item--destaque { font-weight: 600; }
.legenda__cor { width: 11px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
.legenda__item--destaque .legenda__cor { height: 5px; }
.legenda__nome { color: var(--tinta-media); }
.legenda__valor { font-variant-numeric: tabular-nums; }
.legenda__delta { font-size: .74rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.legenda__delta.sobe  { color: var(--sage-escuro); }
.legenda__delta.desce { color: var(--alerta); }

.tabela-metricas input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-metricas th { white-space: nowrap; }

/* prévia do replanejamento */
.previa-linha {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: .6rem;
  align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--borda);
  font-size: .88rem;
}
.previa-linha:last-child { border-bottom: 0; }
.previa-linha__ideia { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.previa-linha__de { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.previa-linha__seta { color: var(--tinta-suave); }
.previa-linha__para { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sage-escuro); }

/* --------------------------------------------------------------- responsivo -- */
@media (max-width: 900px) {
  .detalhe { grid-template-columns: 1fr; }
  .plano-layout { grid-template-columns: 1fr; }
  .indice { position: static; max-height: none; border-bottom: 1px solid var(--borda); padding-bottom: 1rem; }
  .grade--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 680px) {
  body { font-size: 15px; }
  .dialogo { padding: 1.1rem 1rem; }
  .dialogo__acoes { flex-direction: column-reverse; }
  .dialogo__acoes .btn { width: 100%; }
  .ideia { flex-direction: column; gap: .6rem; }
  .ideia__acoes { justify-content: flex-start; width: 100%; }
  .previa-linha { grid-template-columns: 1fr; gap: .15rem; }
  .topo__interno #btn-novo-post { width: 100%; }
  .envelope { padding: 0 .9rem 3rem; }
  .topo__interno { padding: .6rem .9rem; gap: .6rem; }
  .menu { margin-left: 0; width: 100%; overflow-x: auto; padding-bottom: .15rem; }
  .grade--2, .grade--3 { grid-template-columns: 1fr; }
  .cabecalho-pagina { padding: 1.4rem 0 1rem; }
  .cabecalho-pagina h1 { font-size: 1.4rem; }
  .cartao { padding: 1rem; }
  .bloco-linha { grid-template-columns: 7rem 1fr auto; }

  /* o calendário vira cartões empilhados */
  .tabela-cal thead { display: none; }
  .tabela-cal, .tabela-cal tbody, .tabela-cal tr, .tabela-cal td { display: block; width: 100%; }
  .tabela-cal tr {
    border: 1px solid var(--borda); border-radius: var(--raio);
    background: var(--areia-1); padding: .75rem .9rem; margin-bottom: .65rem;
  }
  .tabela-cal td { border: 0; padding: .16rem 0; }
  .tabela-cal .linha-atrasada { border-left: 3px solid var(--alerta); }
  .tabela-cal .linha-atrasada td:first-child { box-shadow: none; }
  .select-status { width: 100%; }
}

@media print {
  .topo, .filtros, .nav-posts, .zona-solta, #toast { display: none; }
  body { background: #fff; }
}

/* --------------------------------------------------- preview do Instagram (Etapa 3) -- */
.ig-preview {
  display: flex; gap: .9rem; align-items: flex-start;
  background: #FAFAFA; border: 1px solid #DBDBDB; border-radius: 8px; padding: .8rem;
}
.ig-preview__imagem {
  width: 96px; height: 96px; flex: 0 0 auto; border-radius: 6px; overflow: hidden;
  background: var(--areia-3); display: flex; align-items: center; justify-content: center;
}
.ig-preview__imagem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-preview__sem-imagem { font-size: .72rem; color: var(--tinta-suave); text-align: center; padding: 0 .4rem; }
.ig-preview__corpo { min-width: 0; flex: 1 1 auto; }
.ig-preview__cabecalho { font-size: .86rem; margin-bottom: .3rem; color: #262626; }
.ig-preview__texto {
  font-size: .86rem; line-height: 1.35; color: #262626; white-space: pre-wrap; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ig-preview__texto.expandido { -webkit-line-clamp: unset; overflow: visible; }
.ig-preview__mais {
  background: none; border: none; padding: 0; margin-top: .2rem; cursor: pointer;
  font-size: .86rem; color: #8e8e8e; font-family: var(--sans);
}
.ig-preview__mais:hover { color: #262626; }
.ig-metricas { display: flex; gap: 1.2rem; margin-top: .7rem; flex-wrap: wrap; }
.ig-metricas .excedeu { color: var(--alerta); font-weight: 600; }

/* ------------------------------------------------- checklist de publicação (Etapa 4) -- */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.checklist__item {
  display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--tinta-media);
}
.checklist__item.ok { color: var(--tinta); }
.checklist__item label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.checklist__marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem; border-radius: 50%; font-size: .72rem; flex: 0 0 auto;
  background: var(--areia-3); color: var(--tinta-suave);
}
.checklist__item.ok .checklist__marca { background: var(--sage); color: #fff; }
.checklist__rotulo { flex: 1 1 auto; }
.checklist-mini {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--tinta-suave);
  white-space: nowrap;
}
.checklist-mini__barra { width: 3.4rem; height: 5px; background: var(--areia-3); border-radius: 999px; overflow: hidden; }
.checklist-mini__barra span { display: block; height: 100%; background: var(--sage); }
.checklist-mini.completo { color: var(--sage-escuro); font-weight: 600; }

/* ------------------------------------------------------ banco de hashtags (Etapa 7) -- */
.tag-hashtag {
  display: inline-flex; align-items: center; gap: .3rem; background: var(--areia-2);
  border: 1px solid var(--borda); border-radius: 999px; padding: .2rem .65rem; font-size: .82rem;
}
.tag-hashtag em { font-style: normal; color: var(--tinta-suave); font-size: .74rem; }
.hashtag-aplicar { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; flex-wrap: wrap; }

/* --------------------------------------------------- molde de carrossel (Etapa 9) -- */
.molde-layout { display: grid; grid-template-columns: 22rem 1fr; gap: 1.3rem; align-items: start; }
.molde-controles {
  background: var(--areia-1); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1.1rem; position: sticky; top: 4.5rem;
}
.molde-controles input[type="color"] { width: 100%; height: 2rem; border: 1px solid var(--borda); border-radius: 5px; padding: 0; }
#molde-abas-tela .btn.ativo { background: var(--sage-claro); color: var(--sage-escuro); font-weight: 600; }
.molde-preview {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  background: var(--areia-2); border-radius: var(--raio); padding: 1.5rem;
}
#molde-svg-container svg { max-width: 100%; height: auto; box-shadow: var(--sombra); border-radius: 4px; }
#molde-ia-resultado { max-width: 100%; }
#molde-ia-resultado img { max-width: 100%; border-radius: 4px; box-shadow: var(--sombra); }
.molde-ia-marca-dagua {
  display: inline-block; margin-top: .5rem; font-size: .78rem; font-weight: 700;
  color: var(--alerta); background: var(--alerta-fundo); padding: .25rem .6rem; border-radius: 999px;
}

@media (max-width: 900px) {
  .molde-layout { grid-template-columns: 1fr; }
  .molde-controles { position: static; }
}

/* -------------------------------------------------------------- IA (Etapa 8) -- */
.ia-acoes { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.ia-sugestao {
  border: 1px solid var(--borda); border-radius: var(--raio-s); padding: .8rem;
  margin-bottom: .7rem; white-space: pre-wrap; font-size: .9rem;
}
.ia-sugestao__alerta {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--alerta);
  margin-bottom: .4rem; font-weight: 600;
}
.ia-sugestao__acoes { margin-top: .6rem; }
.ia-reescrita-caixa {
  border: 1px solid var(--borda); border-radius: var(--raio-s); padding: .8rem;
  white-space: pre-wrap; font-size: .9rem; background: var(--areia-2);
}

/* ------------------------------------------------------------- alt text (Etapa 6) -- */
.alt-text-lista { display: flex; flex-direction: column; gap: .6rem; }
.alt-text-item { display: flex; gap: .6rem; align-items: flex-start; }
.alt-text-item img {
  width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: 0 0 auto;
  border: 1px solid var(--borda);
}
.alt-text-item__campo { flex: 1 1 auto; min-width: 0; }
.alt-text-campo { width: 100%; resize: vertical; font-size: .84rem; }
.alt-text-contador { display: block; text-align: right; margin-top: .15rem; }
.alt-text-contador.longo { color: var(--atencao); }

/* ------------------------------------------------------- calendário em grade (Etapa 5) -- */
.alterna-visao {
  display: inline-flex; border: 1px solid var(--borda); border-radius: var(--raio-s); overflow: hidden;
  margin-right: .4rem;
}
.alterna-visao__opcao {
  padding: .38rem .8rem; font-size: .87rem; text-decoration: none; color: var(--tinta-media); background: var(--areia-1);
}
.alterna-visao__opcao.ativa { background: var(--sage-claro); color: var(--sage-escuro); font-weight: 600; }
.alterna-visao__opcao + .alterna-visao__opcao { border-left: 1px solid var(--borda); }

.nav-mes {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  margin: .9rem 0; font-family: var(--serifa); font-size: 1.05rem;
}

.grade-cal__cabecalho {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px;
  text-align: center; font-size: .78rem; color: var(--tinta-suave); font-weight: 600;
  margin-bottom: 2px;
}
.grade-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.grade-cal__dia {
  min-height: 6.5rem; background: var(--areia-1); border: 1px solid var(--borda-soft, var(--borda));
  border-radius: 6px; padding: .3rem; display: flex; flex-direction: column; gap: .25rem;
}
.grade-cal__dia.fora-do-mes { background: var(--areia-2); opacity: .55; }
.grade-cal__dia.hoje { border-color: var(--sage); border-width: 2px; }
.grade-cal__dia.arrasta-sobre { background: var(--sage-claro); border-color: var(--sage); }
.grade-cal__numero { font-size: .78rem; color: var(--tinta-suave); font-weight: 600; }
.grade-cal__posts { display: flex; flex-direction: column; gap: .2rem; overflow-y: auto; max-height: 6.5rem; }
.grade-cal__post {
  display: flex; align-items: center; gap: .3rem; padding: .18rem .3rem; border-radius: 5px;
  background: color-mix(in srgb, var(--cor-bloco) 16%, var(--areia-1));
  border-left: 3px solid var(--cor-bloco);
  text-decoration: none; color: var(--tinta); font-size: .74rem; line-height: 1.2;
  cursor: grab;
}
.grade-cal__post:hover { background: color-mix(in srgb, var(--cor-bloco) 28%, var(--areia-1)); }
.grade-cal__post.arrastando { opacity: .4; }
.grade-cal__post-status {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--st-planejado);
}
.grade-cal__post-status.status-em_producao { background: var(--st-em_producao); }
.grade-cal__post-status.status-pronto      { background: var(--st-pronto); }
.grade-cal__post-status.status-agendado    { background: var(--st-agendado); }
.grade-cal__post-status.status-publicado   { background: var(--st-publicado); }
.grade-cal__post-texto { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checklist-mini-pontos { font-size: .55rem; letter-spacing: -1px; color: var(--sage-escuro); white-space: nowrap; flex: 0 0 auto; }

@media (max-width: 720px) {
  .grade-cal__cabecalho, .grade-cal { grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: .7rem; }
  .grade-cal__dia { min-height: 4.2rem; padding: .2rem; }
  .grade-cal__posts { max-height: 3.6rem; }
  .grade-cal__post-texto { display: none; }
}