/* Nexus — sistema interno do Nous. Tema operacional escuro, sem dependencias externas
   (funciona atras de auth, offline). Fontes do sistema; densidade alta e legivel. */

:root {
  --nx-bg:        #0f1216;
  --nx-panel:     #161b22;
  --nx-panel-2:   #1b222c;
  --nx-line:      #283041;
  --nx-text:      #e6e9ef;
  --nx-muted:     #8a93a6;
  --nx-accent:    #c9a14a;   /* dourado discreto, eco da marca */
  --nx-pendente:  #d99a2b;
  --nx-agendado:  #4f8cf0;
  --nx-publicado: #3fae6f;
  --nx-erro:      #e0575b;
  --nx-radius:    10px;
  /* Serifada do sistema (sem @import/@font-face: Nexus roda offline, atras de
     auth). So para titulo/marca, nunca em tabela/formulario (densidade > estilo
     ali). Eco discreto do brand-voice editorial do Nous (Lora/Cormorant no
     site publico), sem dependencia externa. */
  --nx-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, Cambria, serif;
  /* Cores que antes eram fixas no meio do arquivo: viraram token pra o tema
     claro poder trocar (Configuracao > Aparencia, John 2026-10-01). */
  --nx-on-accent:   #1a1407;   /* texto sobre fundo dourado */
  --nx-accent-2:    #e0c074;   /* dourado claro: inicial do logo, fim do gradiente */
  --nx-mono:        #cdd6e4;
  --nx-alert-text:  #ffd9da;
  --nx-ok:          #7dc383;
  --nx-roxo:        #b48ae0;
  --nx-neutro:      #aab2c2;
  --nx-laranja:     #e0a45a;
  --nx-pago-bg:     rgba(124,63,0,.28);
  --nx-col-youtube:   #eba9a9;
  --nx-col-instagram: #f0b6d8;
  --nx-col-clube:     #a8dfbc;
  --nx-col-linkedin:  #aecdf2;
  --nx-sombra:      rgba(0, 0, 0, .45);
  --nx-backdrop:    rgba(8, 10, 14, .68);
}

/* Tema claro: papel quente, eco do site publico. Mesmos papeis de cor do
   escuro, tons escurecidos ate passar contraste 4.5:1 sobre o branco.
   Ativado por <html data-tema="claro">, gravado em no_usuario.tema. */
:root[data-tema="claro"] {
  --nx-bg:        #f5f3ee;
  --nx-panel:     #ffffff;
  --nx-panel-2:   #efece5;
  --nx-line:      #dcd6ca;
  --nx-text:      #1d2129;
  --nx-muted:     #5f6675;
  --nx-accent:    #8a6720;
  --nx-pendente:  #96630c;
  --nx-agendado:  #2563c9;
  --nx-publicado: #23804f;
  --nx-erro:      #c0383c;
  --nx-on-accent:   #ffffff;
  --nx-accent-2:    #b08a3a;
  --nx-mono:        #2b3445;
  --nx-alert-text:  #8a1f23;
  --nx-ok:          #23804f;
  --nx-roxo:        #7a4fb0;
  --nx-neutro:      #5f6675;
  --nx-laranja:     #9a5a12;
  --nx-pago-bg:     rgba(224,164,90,.16);
  --nx-col-youtube:   #b23a3a;
  --nx-col-instagram: #a8357a;
  --nx-col-clube:     #2b7d4f;
  --nx-col-linkedin:  #2d68ad;
  --nx-sombra:      rgba(40, 32, 18, .14);
  --nx-backdrop:    rgba(30, 26, 20, .38);
}

* { box-sizing: border-box; }

html { color-scheme: dark; }
:root[data-tema="claro"] { color-scheme: light; }

html, body {
  margin: 0;
  background: var(--nx-bg);
  color: var(--nx-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* Navegacao por teclado: anel de foco visivel em tudo que e interativo
   (:focus-visible nao dispara no clique do mouse). */
a:focus-visible, button:focus-visible, .nx-input:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--nx-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link: invisivel ate receber foco (Tab). */
.nx-skip {
  position: absolute; left: -9999px; top: 10px; z-index: 100;
  background: var(--nx-accent); color: var(--nx-on-accent);
  padding: 8px 14px; border-radius: 8px; font-weight: 600;
}
.nx-skip:focus { left: 10px; text-decoration: none; }

a { color: var(--nx-agendado); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;
  background: var(--nx-panel-2);
  padding: 1px 5px;
  border-radius: 5px;
  font-size: .9em;
}

/* ----------------------------------------------------------- topo / nav */
.nx-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 24px;
  border-bottom: 1px solid var(--nx-line);
  background: var(--nx-panel);
}
.nx-brand { display: flex; align-items: baseline; gap: 10px; }
.nx-brand-icone { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.nx-logo {
  font-family: var(--nx-font-serif);
  font-weight: 700; font-size: 20px; letter-spacing: .01em;
  color: var(--nx-accent);
}
/* Assinatura unica: inicial "N" tratada como iluminura discreta de manuscrito,
   aparece so aqui (sidebar), nao se repete pela tela. */
.nx-logo::first-letter {
  font-size: 1.35em;
  color: var(--nx-accent-2);
}
.nx-sub { color: var(--nx-muted); font-size: 12.5px; letter-spacing: .02em; }
.nx-link {
  color: var(--nx-muted); padding: 6px 12px; border-radius: 8px;
  font-size: 14px; text-decoration: none;
}
.nx-link:hover { background: var(--nx-panel-2); color: var(--nx-text); text-decoration: none; }
.nx-link.is-active { color: var(--nx-text); background: var(--nx-panel-2); }

/* Trilho de icones (estilo Canva): botao com icone + rotulo embaixo; clique
   abre um flyout flutuante ao lado com as telas do grupo. */
.nx-rail { display: flex; flex-direction: column; gap: 4px; }
.nx-railgrupo { position: relative; }
.nx-railbtn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; padding: 10px 4px 8px; border-radius: 10px; cursor: pointer;
  background: none; border: none; color: var(--nx-muted); font: inherit;
}
.nx-railbtn svg { width: 20px; height: 20px; }
.nx-railbtn .nx-raillabel { font-size: 10.5px; letter-spacing: .02em; line-height: 1.1; text-align: center; }
.nx-railbtn:hover { background: var(--nx-panel-2); color: var(--nx-text); }
.nx-railbtn.is-active { color: var(--nx-accent); }
.nx-railbtn.is-open { background: var(--nx-panel-2); color: var(--nx-text); }
.nx-navflyout {
  display: none; position: absolute; left: calc(100% + 10px); top: -8px; z-index: 40;
  min-width: 190px; background: var(--nx-panel); border: 1px solid var(--nx-line);
  border-radius: 10px; padding: 8px; box-shadow: 0 8px 24px var(--nx-sombra);
}
.nx-railbtn.is-open + .nx-navflyout { display: flex; flex-direction: column; gap: 2px; }
.nx-navflyout-titulo {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--nx-accent); padding: 4px 12px 6px;
}
@media (max-width: 760px) {
  .nx-navflyout { left: 0; top: calc(100% + 6px); }
}

/* ----------------------------------------------------------- shell + sidebar */
.nx-shell { display: flex; align-items: stretch; min-height: 100vh; }
.nx-side {
  flex: 0 0 84px; width: 84px;
  background: var(--nx-panel);
  border-right: 1px solid var(--nx-line);
  padding: 16px 6px;
  position: sticky; top: 0; align-self: flex-start; z-index: 30; /* flyout acima de conteudo posicionado */
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.nx-side .nx-brand { flex-direction: column; align-items: center; gap: 0; text-align: center; }
.nx-side .nx-sub { display: none; }
.nx-side .nx-link { display: block; padding: 8px 12px; border-radius: 8px; }
.nx-usuario {
  margin-top: auto; display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-align: center; padding-top: 12px; border-top: 1px solid var(--nx-line);
  width: 100%;
}
.nx-usuario-sair { font-size: 11px; color: var(--nx-accent); }
.nx-usuario-sair:hover { text-decoration: underline; }
.nx-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* Login (fora do shell nx-side/nx-content: tela isolada, sem menu) */
.nx-login-tela {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.nx-login-card {
  width: 100%; max-width: 340px; background: var(--nx-panel); border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius); padding: 28px 26px;
}
.nx-login-titulo {
  font-family: var(--nx-font-serif); color: var(--nx-accent); font-size: 22px; margin: 0 0 4px;
}
.nx-login-sub { color: var(--nx-muted); font-size: 12.5px; margin: 0 0 22px; }
.nx-login-campo { margin-bottom: 14px; }
.nx-login-campo label { display: block; font-size: 12.5px; color: var(--nx-muted); margin-bottom: 5px; }
.nx-login-campo input {
  width: 100%; box-sizing: border-box; background: var(--nx-panel-2); border: 1px solid var(--nx-line);
  border-radius: 8px; padding: 9px 11px; color: var(--nx-text); font: inherit;
}
.nx-login-campo input:focus { outline: 2px solid var(--nx-accent); }
.nx-login-erro { color: var(--nx-erro); font-size: 12.5px; margin: 0 0 14px; }
.nx-login-btn {
  width: 100%; background: var(--nx-accent); color: var(--nx-on-accent); border: none; border-radius: 8px;
  padding: 10px; font: inherit; font-weight: 600; cursor: pointer; margin-top: 6px;
}
.nx-login-btn:hover { opacity: .92; }
@media (max-width: 760px) {
  .nx-shell { flex-direction: column; }
  .nx-side {
    flex: none; width: auto; height: auto; position: static; overflow: visible;
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 14px;
    border-right: none; border-bottom: 1px solid var(--nx-line);
  }
  .nx-side .nx-rail { flex-direction: row; flex-wrap: wrap; }
}

/* ----------------------------------------------------------- main */
.nx-main { max-width: 1180px; margin: 0 auto; width: 100%; padding: 26px 24px 60px; }
.nx-h1 { font-family: var(--nx-font-serif); font-weight: 700; font-size: 25px; margin: 6px 0 4px; letter-spacing: .002em; }
.nx-h2 { font-family: var(--nx-font-serif); font-weight: 700; font-size: 17px; margin: 0 0 14px; color: var(--nx-text); }
.nx-lead { color: var(--nx-muted); margin: 0 0 22px; }
.nx-voltar { color: var(--nx-accent); }

/* Texto corrido de verdade (sinopse, bio): nx-lead e' subtitulo curto e apagado
 * da pagina, nao serve pra paragrafo de conteudo (ficava "embolado": cinza
 * apagado + linha apertada). John 2026-07-08. */
.nx-corpo { color: var(--nx-text); margin: 0; max-width: 65ch; line-height: 1.7; }
.nx-muted { color: var(--nx-muted); }

.nx-alert {
  background: rgba(224, 87, 91, .12);
  border: 1px solid var(--nx-erro);
  color: var(--nx-alert-text);
  padding: 12px 14px; border-radius: var(--nx-radius); margin-bottom: 20px;
}

/* ----------------------------------------------------------- stats */
.nx-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.nx-stat {
  flex: 1 1 120px;
  background: var(--nx-panel);
  border: 1px solid var(--nx-line);
  border-top: 3px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.nx-stat.is-pendente  { border-top-color: var(--nx-pendente); }
.nx-stat.is-agendado  { border-top-color: var(--nx-agendado); }
.nx-stat.is-publicado { border-top-color: var(--nx-publicado); }
.nx-stat.is-erro      { border-top-color: var(--nx-erro); }
.nx-stat.is-accent    { border-top-color: var(--nx-accent); }
.nx-stat-n { font-size: 26px; font-weight: 700; }
.nx-stat-l { color: var(--nx-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }

/* ----------------------------------------------------------- cards / tabela */
.nx-card {
  background: var(--nx-panel);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: 18px 18px 8px;
  margin-bottom: 22px;
}
.nx-table-wrap { overflow-x: auto; }
.nx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nx-table th, .nx-table td {
  text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--nx-line);
  white-space: nowrap;
}
.nx-table th {
  color: var(--nx-muted); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em;
  position: sticky; top: 0; background: var(--nx-panel);
}
.nx-table tbody tr:hover { background: var(--nx-panel-2); }
.nx-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.nx-table .mono { font-family: ui-monospace, Consolas, monospace; color: var(--nx-mono); }
.nx-table .ell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.nx-table .nx-col-combinacao { width: 64px; white-space: nowrap; }
.nx-table .ell-sm { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.nx-table .nowrap { white-space: nowrap; }
.nx-yt { font-family: ui-monospace, Consolas, monospace; }
.nx-empty { text-align: center; color: var(--nx-muted); padding: 22px; }
.nx-hint { color: var(--nx-muted); font-size: 12.5px; margin: -6px 0 14px; }
.nx-prev { color: var(--nx-pendente); font-style: italic; }

/* ----------------------------------------------------------- badges */
.nx-badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  border: 1px solid transparent;
}
.nx-badge.is-pendente   { color: var(--nx-pendente);  background: rgba(217,154,43,.13);  border-color: rgba(217,154,43,.4); }
.nx-badge.is-agendado   { color: var(--nx-agendado);  background: rgba(79,140,240,.13);  border-color: rgba(79,140,240,.4); }
.nx-badge.is-publicado  { color: var(--nx-publicado); background: rgba(63,174,111,.13);  border-color: rgba(63,174,111,.4); }
.nx-badge.is-erro       { color: var(--nx-erro);      background: rgba(224,87,91,.13);   border-color: rgba(224,87,91,.4); }
.nx-badge.is-comunidade { color: var(--nx-roxo); background: rgba(180,138,224,.13); border-color: rgba(180,138,224,.4); }
.nx-badge.is-privado    { color: var(--nx-neutro); background: rgba(170,178,194,.12); border-color: rgba(170,178,194,.35); }
.nx-badge.is-pago       { color: var(--nx-laranja); background: var(--nx-pago-bg);    border-color: rgba(224,164,90,.45); text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; vertical-align: middle; margin-left: 8px; }
.nx-badge.is-nao_listado{ color: var(--nx-neutro); background: rgba(170,178,194,.12); border-color: rgba(170,178,194,.35); }

/* ----------------------------------------------------------- funil organico (SEO) */
.nx-funil {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px;
  margin: 4px 0 16px;
}
.nx-funil-etapa {
  flex: 1 1 110px;
  background: var(--nx-panel-2);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.nx-funil-etapa.is-foco { border-color: var(--nx-accent); }
.nx-funil-n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nx-funil-l { color: var(--nx-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.nx-funil-seta { align-self: center; color: var(--nx-muted); font-size: 16px; }
.nx-chips-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.nx-alerta-idade { color: var(--nx-pendente); font-weight: 700; }
.nx-paginacao { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.nx-paginacao .is-disabled { pointer-events: none; opacity: 0.4; }

/* frescor dos coletores */
.nx-fresh { font-size: 12px; font-weight: 600; }
.nx-fresh.is-ok      { color: var(--nx-publicado); }
.nx-fresh.is-atencao { color: var(--nx-pendente); }
.nx-fresh.is-fixo    { color: var(--nx-agendado); }
.nx-fresh.is-velho   { color: var(--nx-erro); }
.nx-fresh.is-neutro  { color: var(--nx-muted); }

/* tipo de conteudo */
.nx-tipo { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.nx-tipo.is-video { color: var(--nx-agendado); }
.nx-tipo.is-short { color: var(--nx-accent); }
/* categorias do Instagram (instagram-conteudo-lista.php) */
.nx-tipo.is-carrosseis { color: var(--nx-agendado); }
.nx-tipo.is-reels      { color: var(--nx-accent); }
.nx-tipo.is-feed       { color: var(--nx-muted); }

/* filtros (chips) */
.nx-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.nx-chip {
  padding: 5px 12px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--nx-line); color: var(--nx-muted); text-decoration: none;
}
.nx-chip:hover { background: var(--nx-panel-2); color: var(--nx-text); text-decoration: none; }
.nx-chip.is-active { background: var(--nx-panel-2); color: var(--nx-text); border-color: var(--nx-agendado); }

/* Gerenciar vinculos de material (materiais.php, modal Editar): chips
   removiveis de livros/ciclos + seletor de adicionar. John 2026-07-16. */
.nx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.nx-chips:empty::before { content: "Nenhum ainda."; color: var(--nx-muted); font-size: 12.5px; }
.nx-chip-x {
  background: none; border: 0; color: var(--nx-muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 0 0 2px;
}
.nx-chip-x:hover { color: var(--nx-erro, #d05); }
.nx-vinc-bloco { margin-top: 6px; }
.nx-vinc-titulo { font-size: 12.5px; color: var(--nx-muted); display: block; }
.nx-vinc-add { margin-top: 2px; }
.nx-busca-form { display: flex; gap: 6px; align-items: center; margin-left: auto; }

/* filtro de idioma (chip como botao, ex.: artigos relacionados na modal de
   editar conteudo) + lista com altura travada e rolagem */
.nx-idioma-chip {
  padding: 5px 12px; border-radius: 999px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--nx-line); background: transparent; color: var(--nx-muted); cursor: pointer;
}
.nx-idioma-chip:hover { background: var(--nx-panel-2); color: var(--nx-text); }
.nx-idioma-chip.is-active { background: var(--nx-panel-2); color: var(--nx-text); border-color: var(--nx-agendado); }
.nx-lista-scroll {
  max-height: 190px; overflow-y: auto;
  border: 1px solid var(--nx-line); border-radius: 8px;
}
.nx-lista-vazio { padding: 9px 10px; color: var(--nx-muted); font-size: 13px; }
.nx-artigo-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-bottom: 1px solid var(--nx-line);
}
.nx-artigo-item:last-child { border-bottom: none; }
.nx-artigo-item a { color: var(--nx-text); font-size: 13px; font-weight: 600; text-decoration: none; }
.nx-artigo-item a:hover { text-decoration: underline; }
.nx-artigo-meta { font-size: 11.5px; color: var(--nx-muted); }
.nx-busca-input { width: 220px; }

/* ----------------------------------------------------------- descricao / botao mini */
.nx-table .nx-desc { max-width: 300px; }
.nx-desc-cell { display: flex; align-items: center; gap: 6px; }
.nx-desc-cell .nx-trunc {
  color: var(--nx-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.nx-desc-cell .nx-btn-mini { flex: 0 0 auto; margin-left: 0; }
.nx-btn-mini {
  display: inline-block; cursor: pointer;
  background: var(--nx-panel-2); color: var(--nx-accent);
  border: 1px solid var(--nx-line); border-radius: 6px;
  font-size: 11px; font-weight: 600; line-height: 1.4;
  padding: 1px 8px; margin-left: 4px; vertical-align: baseline;
}
.nx-btn-mini:hover { border-color: var(--nx-accent); color: var(--nx-text); }

/* botao so-icone (Editar/Buscar), mesmo vocabulario visual do trilho de icones do menu */
.nx-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; background: var(--nx-panel-2); color: var(--nx-accent);
  border: 1px solid var(--nx-line); border-radius: 6px;
  width: 26px; height: 26px; padding: 0; vertical-align: middle;
}
.nx-btn-icon svg { width: 15px; height: 15px; }
.nx-btn-icon:hover { border-color: var(--nx-accent); color: var(--nx-text); }

/* ----------------------------------------------------------- modal (dialog) */
.nx-modal {
  width: min(760px, 92vw);
  max-height: 82vh;
  padding: 0;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  background: var(--nx-panel);
  color: var(--nx-text);
  box-shadow: 0 18px 60px var(--nx-sombra);
  /* Flex coluna + overflow:hidden aqui: so o nx-modal-body rola por dentro.
     Sem isso, cabecalho que quebra em 2 linhas (titulo longo) empurra o total
     acima de max-height e o proprio <dialog> ganha um 2o scroll (bug visto
     2026-07-05, modal Etapas com titulo grande). */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* display:flex acima e regra de AUTOR: vence a regra padrao do navegador
   "dialog:not([open]) { display:none }" (autor sempre vence UA, mesmo com
   especificidade menor). Sem isso, close() zera o atributo [open] mas o
   dialog continua display:flex e some visualmente (bug visto 2026-07-05,
   botao X parava de fechar a modal Etapas). */
.nx-modal:not([open]) { display: none; }
.nx-modal::backdrop { background: var(--nx-backdrop); }
.nx-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--nx-line);
  flex: none;
  background: var(--nx-panel);
}
.nx-modal-title { font-size: 15px; }
.nx-modal-x {
  cursor: pointer; background: transparent; border: 0;
  color: var(--nx-muted); font-size: 16px; line-height: 1; padding: 4px 6px;
}
.nx-modal-x:hover { color: var(--nx-text); }
.nx-modal-body { padding: 16px 18px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.nx-modal-body.is-pre {
  white-space: pre-wrap; word-break: break-word;
  font-size: 13.5px; line-height: 1.6; color: var(--nx-text);
}
.nx-modal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.nx-modal-table th, .nx-modal-table td {
  text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--nx-line);
  vertical-align: top;
}
.nx-modal-table th {
  color: var(--nx-muted); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .04em;
}
.nx-modal-amostra { font-family: ui-monospace, Consolas, monospace; color: var(--nx-mono); }
.nx-pendencias-lista { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.nx-pendencias-lista li { color: var(--nx-text); font-size: 13.5px; }
.nx-tags-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.nx-chip-tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--nx-panel-2); color: var(--nx-text);
  border: 1px solid var(--nx-line); font-size: 12.5px;
}

/* ----------------------------------------------------------- flash + form (editar titulo) */
.nx-flash {
  padding: 11px 14px; border-radius: var(--nx-radius); margin-bottom: 18px;
  font-size: 13.5px; border: 1px solid var(--nx-line);
  transition: opacity .6s ease;
}
.nx-flash.is-ok  { border-color: var(--nx-publicado); background: rgba(63, 174, 111, .12); }
.nx-flash.is-erro { border-color: var(--nx-erro); background: rgba(224, 87, 91, .12); }
.nx-flash-fade { opacity: 0; }

.nx-form { display: flex; flex-direction: column; gap: 8px; }
.nx-label { color: var(--nx-muted); font-size: 12.5px; }
.nx-input {
  width: 100%; box-sizing: border-box;
  background: var(--nx-panel-2); color: var(--nx-text);
  border: 1px solid var(--nx-line); border-radius: 8px;
  padding: 9px 11px; font-size: 14px;
}
.nx-input:focus { border-color: var(--nx-accent); }

/* Combobox pesquisavel (video-pai no modal Cadastrar shorts) */
.nx-combo { position: relative; }
.nx-combo-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  margin: 0; padding: 4px; list-style: none;
  max-height: 260px; overflow: auto;
  background: var(--nx-panel-2); border: 1px solid var(--nx-line);
  border-radius: 8px; box-shadow: 0 12px 32px var(--nx-sombra);
}
.nx-combo-lista[hidden] { display: none; }
.nx-combo-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.nx-combo-item[hidden] { display: none; }
.nx-combo-item:hover, .nx-combo-item.is-ativo { background: var(--nx-panel); }
.nx-combo-tit {
  color: var(--nx-text); font-size: 13.5px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.nx-combo-id {
  flex: none; color: var(--nx-muted);
  font-family: ui-monospace, Consolas, monospace; font-size: 12px;
}
.nx-combo-vazio { padding: 10px; color: var(--nx-muted); font-size: 13px; }
.nx-combo-vazio[hidden] { display: none; }
.nx-form-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nx-form-modal { display: flex; flex-direction: column; gap: 12px; min-width: 340px; }
.nx-form-modal label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--nx-muted); }
.nx-form-modal .nx-input { width: 100%; box-sizing: border-box; }
.nx-form-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.nx-fieldset {
  border: 1px solid var(--nx-line); border-radius: 8px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
}
.nx-fieldset legend {
  font-size: 11px; color: var(--nx-muted); padding: 0 6px;
  text-transform: uppercase; letter-spacing: .05em;
}
.nx-form-row { display: flex; gap: 10px; }
.nx-form-row > label { flex: 1 1 0; min-width: 0; }
.nx-check-list { display: flex; flex-direction: column; }
.nx-check-list .nx-check-row {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--nx-line);
  color: var(--nx-text); font-size: 13px; line-height: 1.3; cursor: pointer; text-align: left;
}
.nx-check-list .nx-check-row:last-child { border-bottom: none; }
.nx-check-list .nx-check-row:hover { background: var(--nx-panel-2); }
/* Destaque de "marcado" tem que ser visivelmente diferente do hover, senao
   parece que passar o mouse ja "seleciona" o nome (John, 2026-07-16). */
.nx-check-list .nx-check-row:has(input:checked) {
  background: rgba(193, 154, 63, 0.14);
  font-weight: 600;
}
.nx-check-list .nx-check-row input[type="checkbox"] {
  width: 16px; height: 16px; flex: none; accent-color: var(--nx-accent);
}
/* Seletor de responsaveis (chips + busca com sugestao pra adicionar): so
   mostra quem JA esta selecionado, nunca a lista inteira de pessoas (John,
   2026-07-16, sustenta qualquer numero de pessoas cadastradas sem deformar
   o modal). Buscar filtra quem AINDA NAO foi adicionado; clicar adiciona. */
.nx-resp-picker { display: flex; flex-direction: column; gap: 8px; position: relative; }
.nx-resp-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 18px; }
.nx-resp-chips:empty::after {
  content: 'Ninguém selecionado ainda'; color: var(--nx-muted); font-size: 12.5px;
}
.nx-resp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(193, 154, 63, 0.16); border: 1px solid rgba(193, 154, 63, 0.4);
  border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px; font-weight: 600;
  color: var(--nx-text);
}
.nx-resp-chip-x {
  border: none; background: transparent; color: var(--nx-muted); cursor: pointer;
  width: 18px; height: 18px; border-radius: 50%; line-height: 1; font-size: 15px; padding: 0;
}
.nx-resp-chip-x:hover { background: rgba(0, 0, 0, .25); color: var(--nx-text); }
.nx-resp-sugestoes {
  display: none; flex-direction: column; border: 1px solid var(--nx-line); border-radius: 8px;
  max-height: 190px; overflow-y: auto; background: var(--nx-panel);
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  box-shadow: 0 8px 20px var(--nx-sombra);
}
.nx-resp-sugestoes.is-aberta { display: flex; }
.nx-resp-sugestao {
  display: block; width: 100%; text-align: left; background: transparent; border: none;
  border-bottom: 1px solid var(--nx-line); padding: 9px 10px; font-size: 13px; color: var(--nx-text);
  cursor: pointer;
}
.nx-resp-sugestao:last-child { border-bottom: none; }
.nx-resp-sugestao:hover { background: var(--nx-panel-2); }
.nx-resp-sugestao.is-vazia { color: var(--nx-muted); cursor: default; }
.nx-resp-sugestao.is-vazia:hover { background: transparent; }
.nx-hora-par { display: flex; gap: 6px; }
.nx-hora-par .nx-input { flex: 1 1 0; min-width: 0; }

/* Dois controles lado a lado DENTRO de uma celula de tabela.
   Sem isto cada .nx-input pede `width:100%` da celula e os dois se sobrepoem: foi
   o que quebrou a tela Rotinas do servidor em producao (John, 2026-08-16). A celula
   e' `nowrap`, entao a saida nao e' deixar quebrar linha, e' dar largura fixa a cada
   controle e deixar a tabela crescer dentro do `.nx-table-wrap`, que ja rola sozinho. */
.nx-par-campo { display: inline-flex; gap: 6px; align-items: center; }
.nx-par-campo .nx-input { min-width: 0; }
.nx-par-campo.is-cadencia select.nx-input { flex: 0 0 132px; }
.nx-par-campo.is-cadencia input.nx-input  { flex: 0 0 116px; }
.nx-par-campo.is-hora input.nx-input      { flex: 0 0 104px; }
/* Acoes em colunas fixas: cada slot tem largura propria, botoes alinham entre linhas */
/* Especificidade tem que bater ".nx-table td" (classe+tag) senao o text-align:left
   generico vence e o right nunca aplica (bug real, John apontou 2026-07-10). */
/* `width: 1%` encolhe a coluna ate' o conteudo: sem isso ela absorve a sobra da
   tabela e os botoes ficam a direita de um vao enorme (275px de coluna pra 169px
   de botao, John 2026-07-30). O espaco liberado vai pro Titulo/tema. */
.nx-table td.nx-acoes { text-align: right; white-space: nowrap; width: 1%; }
.nx-acoes form { display: inline; }
.nx-acao-slot { display: inline-block; text-align: center; }
/* Min-width SO' no slot 1: ele e' o unico que pode estar VAZIO (a linha sem etapa
   pendente nao tem "concluir"), e sem a reserva o lapis escorrega pra esquerda e
   desalinha a coluna. Os slots 2 e 3 tem conteudo identico em toda linha, entao
   alinham sozinhos: reservar largura neles so' abria vao (o 2 guardava 64px pra
   um icone de 30px). Medido no prototipo: 84px cabe o "concluir" de 72px. */
.nx-acao-slot:nth-child(1) { min-width: 84px; }   /* concluir (pode faltar) */
/* Coluna de acoes SO' com icone (backlog de temas): nao usa nx-acao-slot, cujos
   min-width existem pra alinhar botao de TEXTO no pipeline. Com os slots, dois
   icones de 26px reservavam 152px, abrindo um vao enorme e alargando a tabela
   ate' forcar scroll horizontal (John 2026-07-29). */
.nx-acoes-icones { display: inline-flex; gap: 6px; align-items: center; }

/* ----------------------------------------------------------- agenda */
/* Sobrescreve o nowrap generico da .nx-table: aqui o texto tem que quebrar
   linha dentro da coluna, nao estourar largura e forcar scroll horizontal. */
.nx-agenda-table th, .nx-agenda-table td { white-space: normal; }
.nx-agenda-table td { vertical-align: top; }
.nx-agenda-table .nx-slot { white-space: normal; word-break: break-word; }
.nx-agenda-dia { white-space: nowrap; font-weight: 600; }
.nx-agenda-dia .nx-muted { font-weight: 400; }

/* Largura proporcional por coluna (Dia curto e fixo; canais dividem o resto). */
.nx-agenda-table th:first-child, .nx-agenda-table td:first-child { width: 9%; white-space: nowrap; }
.nx-agenda-table th.nx-col-youtube,   .nx-agenda-table td.nx-col-youtube   { width: 38%; }
.nx-agenda-table th.nx-col-instagram, .nx-agenda-table td.nx-col-instagram { width: 27%; }
.nx-agenda-table th.nx-col-clube,     .nx-agenda-table td.nx-col-clube     { width: 26%; }

/* Cor pastel por canal (tom baixo p/ manter a harmonia do dark) */
.nx-agenda-table td.nx-col-youtube   { background-color: rgba(235, 111, 111, .055); }
.nx-agenda-table td.nx-col-instagram { background-color: rgba(240, 130, 190, .055); }
.nx-agenda-table td.nx-col-clube     { background-color: rgba(120, 210, 150, .055); }
.nx-agenda-table td.nx-col-linkedin  { background-color: rgba(110, 165, 235, .055); }
.nx-agenda-table th.nx-col-youtube   { color: var(--nx-col-youtube); box-shadow: inset 0 -2px 0 rgba(235, 111, 111, .45); }
.nx-agenda-table th.nx-col-instagram { color: var(--nx-col-instagram); box-shadow: inset 0 -2px 0 rgba(240, 130, 190, .45); }
.nx-agenda-table th.nx-col-clube     { color: var(--nx-col-clube); box-shadow: inset 0 -2px 0 rgba(120, 210, 150, .45); }
.nx-agenda-table th.nx-col-linkedin  { color: var(--nx-col-linkedin); box-shadow: inset 0 -2px 0 rgba(110, 165, 235, .45); }

/* Domingo = inicio do ciclo: faixa dourada por cima do tom da coluna */
tr.is-domingo td {
  border-top: 2px solid rgba(230, 195, 110, .55);
  background-image: linear-gradient(rgba(230, 195, 110, .10), rgba(230, 195, 110, .10));
}
tr.is-domingo .nx-agenda-dia { color: var(--nx-accent); }

/* Hoje: azul suave por cima do tom da coluna */
tr.is-hoje td {
  background-image: linear-gradient(rgba(122, 162, 247, .12), rgba(122, 162, 247, .12));
}

/* Hoje na linha do tempo da Producao Instagram: verde suave (John 2026-07-27,
   achar o dia atual de batida) */
tr.is-hoje-verde td {
  background-image: linear-gradient(rgba(125, 195, 131, .16), rgba(125, 195, 131, .16));
  border-top: 2px solid rgba(125, 195, 131, .5);
}

/* Dias passados (filtro -7/-28): realizado, esmaecido */
tr.is-passado td { opacity: .62; }
.nx-slot { display: block; font-size: 13px; margin: 2px 0; }
.nx-slot .mono { font-size: 12px; }
.nx-slot.is-planejado { color: var(--nx-muted); }
.nx-slot.is-feito { color: var(--nx-ok); }
.nx-count { color: var(--nx-muted); font-size: 11.5px; text-align: right; }
.nx-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.nx-btn {
  cursor: pointer; background: var(--nx-accent); color: var(--nx-on-accent);
  border: 1px solid var(--nx-accent); border-radius: 8px;
  font-size: 13px; font-weight: 600; padding: 7px 16px;
}
.nx-btn:hover { filter: brightness(1.08); }

/* ----------------------------------------------------------- funil */
.nx-stat-sub { color: var(--nx-muted); font-size: 12px; margin-top: 2px; }
.nx-d { font-weight: 700; font-size: 12px; }
.nx-d.is-up   { color: var(--nx-publicado); }
.nx-d.is-down { color: var(--nx-erro); }
.nx-d.is-flat { color: var(--nx-muted); }

.nx-funnel { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.nx-fn-row { display: flex; flex-direction: column; gap: 5px; }
.nx-fn-head { display: flex; justify-content: space-between; align-items: baseline; }
.nx-fn-rot { font-size: 13.5px; font-weight: 600; }
.nx-fn-val { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; }
.nx-fn-bar { height: 14px; background: var(--nx-panel-2); border-radius: 7px; overflow: hidden; }
.nx-fn-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--nx-accent), var(--nx-accent-2));
  border-radius: 7px; min-width: 6px;
}
.nx-fn-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.nx-fn-taxa { color: var(--nx-agendado); font-weight: 600; white-space: nowrap; }

.nx-kpis {
  display: flex; flex-wrap: wrap; gap: 18px 28px;
  border-top: 1px solid var(--nx-line); padding-top: 16px; margin-top: 4px;
}
.nx-kpis > div { display: flex; flex-direction: column; gap: 2px; }
.nx-kpi-l { color: var(--nx-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.nx-kpi-v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

.nx-trends { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.nx-trend {
  background: var(--nx-panel-2); border: 1px solid var(--nx-line);
  border-radius: 8px; padding: 12px 14px;
}
.nx-trend-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.nx-trend-rot { color: var(--nx-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.nx-trend-now { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.nx-spark { display: block; width: 100%; height: 30px; }

/* ----------------------------------------------------------- grupo (piloto lista->detalhe) */
.nx-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--nx-panel-2); color: var(--nx-accent); font-weight: 700;
  font-family: var(--nx-font-serif); font-size: 16px; overflow: hidden;
}
.nx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nx-avatar.is-sm { width: 28px; height: 28px; font-size: 12px; }
.nx-avatar.is-lg { width: 56px; height: 56px; font-size: 22px; }

/* Capa de livro: retrato (2:3), nao circulo, pra nao distorcer a capa real. */
.nx-capa {
  width: 40px; height: 60px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--nx-panel-2); color: var(--nx-accent); font-weight: 700;
  font-family: var(--nx-font-serif); font-size: 16px; overflow: hidden;
}
.nx-capa img { width: 100%; height: 100%; object-fit: cover; }
.nx-capa.is-sm { width: 32px; height: 48px; font-size: 13px; }
.nx-capa.is-lg { width: 96px; height: 144px; font-size: 34px; }

.nx-grupo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; margin-bottom: 24px;
}
.nx-grupo-card {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px;
  background: var(--nx-panel); border: 1px solid var(--nx-line); border-radius: var(--nx-radius);
  text-decoration: none; color: inherit; transition: border-color .15s ease;
}
.nx-grupo-card:hover { border-color: var(--nx-accent); }
.nx-grupo-card-nome { font-weight: 700; color: var(--nx-text); margin: 0 0 3px; }
.nx-grupo-card-meta { color: var(--nx-muted); font-size: 12.5px; display: flex; gap: 10px; flex-wrap: wrap; }
.nx-nowrap-meta { flex-wrap: nowrap; white-space: nowrap; }

/* Marca: 3 colunas fixas (John 2026-07-08), cards mais largos que a grade generica de grupos */
.nx-marca-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-bottom: 24px;
}
@media (max-width: 900px) {
  .nx-marca-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .nx-marca-grid { grid-template-columns: 1fr; }
}

.nx-ficha-head { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.nx-ficha-titulo { font-family: var(--nx-font-serif); font-size: 26px; margin: 0; }
.nx-ficha-sub { color: var(--nx-muted); font-size: 13.5px; margin: 4px 0 0; }

.nx-membro-linha { display: flex; align-items: center; gap: 10px; }
.nx-form-foto-atual { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }

/* ----------------------------------------------------------- aparencia (tema) */
/* Escolha entre 2 temas: cartao clicavel com miniatura do proprio tema. As cores
   da miniatura sao fixas de proposito: cada uma mostra o SEU tema, qualquer que
   seja o tema ativo na tela. */
.nx-tema-opcoes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px; margin-bottom: 16px;
}
.nx-tema-opcao {
  position: relative; display: flex; flex-direction: column; gap: 6px; cursor: pointer;
  padding: 12px; border: 1px solid var(--nx-line); border-radius: var(--nx-radius);
  background: var(--nx-panel-2); transition: border-color .15s ease;
}
.nx-tema-opcao:hover { border-color: var(--nx-muted); }
.nx-tema-opcao:has(input:checked) { border-color: var(--nx-accent); box-shadow: 0 0 0 1px var(--nx-accent); }
.nx-tema-opcao:has(input:focus-visible) { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
.nx-tema-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.nx-tema-rotulo { font-weight: 700; color: var(--nx-text); }
.nx-tema-desc { font-size: 12.5px; color: var(--nx-muted); }
.nx-tema-amostra {
  display: flex; height: 96px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--nx-line); margin-bottom: 4px;
}
.nx-tema-amostra-side { flex: 0 0 22%; }
.nx-tema-amostra-main { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 12px; }
.nx-tema-amostra-titulo { height: 9px; width: 55%; border-radius: 3px; }
.nx-tema-amostra-linha { height: 6px; width: 85%; border-radius: 3px; }
.nx-tema-amostra-linha.is-curta { width: 60%; }
.nx-tema-amostra-btn { margin-top: auto; height: 12px; width: 34%; border-radius: 4px; align-self: flex-end; }
.nx-tema-amostra.is-escuro { background: #0f1216; }
.nx-tema-amostra.is-escuro .nx-tema-amostra-side { background: #161b22; border-right: 1px solid #283041; }
.nx-tema-amostra.is-escuro .nx-tema-amostra-titulo { background: #e6e9ef; }
.nx-tema-amostra.is-escuro .nx-tema-amostra-linha { background: #3a4356; }
.nx-tema-amostra.is-escuro .nx-tema-amostra-btn { background: #c9a14a; }
.nx-tema-amostra.is-claro { background: #f5f3ee; }
.nx-tema-amostra.is-claro .nx-tema-amostra-side { background: #ffffff; border-right: 1px solid #dcd6ca; }
.nx-tema-amostra.is-claro .nx-tema-amostra-titulo { background: #1d2129; }
.nx-tema-amostra.is-claro .nx-tema-amostra-linha { background: #d3cdc0; }
.nx-tema-amostra.is-claro .nx-tema-amostra-btn { background: #8a6720; }

/* ----------------------------------------------------------- rodape */
.nx-foot {
  max-width: 1180px; margin: 0 auto; padding: 18px 24px 30px;
  display: flex; justify-content: space-between;
  color: var(--nx-muted); font-size: 12.5px;
  border-top: 1px solid var(--nx-line);
}

@media (max-width: 560px) {
  .nx-main { padding: 18px 14px 50px; }
  .nx-stat-n { font-size: 22px; }
}