/* NexLaw (brandbook v1.0): marinho #1F2A44, dourado #9C7A3C/#CBA25B, papel #F5F2EC */
:root {
  --marinho: #1f2a44;
  --marinho-2: #26334f;
  --teal: #cba25b;        /* acento dourado (nome da var mantido) */
  --teal-claro: #d9b978;
  --fundo: #101b2e;
  --card: #1f2a44;
  --borda: #35405c;
  --texto: #f5f2ec;
  --suave: #9aa3ba;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--fundo); color: var(--texto); font-family: 'Montserrat', sans-serif; min-height: 100vh; }
.oculto { display: none !important; }

/* login */
.tela-login { display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: radial-gradient(ellipse at top, #1f2a44 0%, var(--fundo) 65%); }
.card-login { background: var(--card); border: 1px solid var(--borda); border-radius: 16px; padding: 40px; width: 360px; display: flex; flex-direction: column; gap: 12px; }
.logo-login { font-size: 34px; font-weight: 800; text-align: center; }
.logo-login span, .logo span { color: var(--teal-claro); }
.sub-login { text-align: center; color: var(--suave); font-size: 13px; margin-bottom: 10px; }

/* topo */
.topo { display: flex; align-items: center; justify-content: space-between; padding: 14px 26px; background: var(--marinho); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 5; }
.logo { font-size: 22px; font-weight: 800; }
.logo em { font-size: 12px; font-style: normal; color: var(--suave); font-weight: 600; margin-left: 6px; letter-spacing: 2px; text-transform: uppercase; }
nav { display: flex; gap: 8px; }
.nav-btn { background: none; border: 1px solid transparent; color: var(--suave); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-family: inherit; font-weight: 600; }
.nav-btn.ativo, .nav-btn:hover { color: var(--texto); border-color: var(--borda); background: var(--marinho-2); }

/* base */
.conteudo { max-width: 1240px; margin: 0 auto; padding: 26px 20px 80px; display: flex; flex-direction: column; gap: 20px; }
.card { background: var(--card); border: 1px solid var(--borda); border-radius: 14px; padding: 20px; }
.card h2 { font-size: 15px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--teal-claro); margin-bottom: 14px; }
.card h2 small { color: var(--suave); text-transform: none; letter-spacing: 0; font-weight: 400; }
input, select, textarea { background: var(--marinho-2); border: 1px solid var(--borda); color: var(--texto); border-radius: 8px; padding: 10px 12px; font-family: inherit; font-size: 14px; width: 100%; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); }
.linha-form { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.linha-form > * { flex: 1; min-width: 160px; }
.linha-form > button { flex: 0 0 auto; }
.btn { background: var(--marinho-2); border: 1px solid var(--borda); color: var(--texto); padding: 10px 16px; border-radius: 8px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px; white-space: nowrap; }
.btn:hover { border-color: var(--teal); }
.btn-primario { background: linear-gradient(135deg, #cba25b 0%, #9c7a3c 100%); border: none; color: #1b2130; }
.btn-primario:hover { filter: brightness(1.1); }
.btn[disabled] { opacity: .5; cursor: wait; }
.erro { color: #ff8f8f; font-size: 13px; min-height: 16px; }
.msg { color: var(--teal-claro); font-size: 13px; min-height: 16px; padding: 0 4px; }
.dica { color: var(--suave); font-size: 13px; margin-bottom: 12px; line-height: 1.5; }
.badge { font-size: 11px; padding: 3px 10px; border-radius: 20px; background: var(--marinho-2); border: 1px solid var(--borda); color: var(--suave); margin-left: 8px; letter-spacing: 0; }
.badge.ok { color: #6ee7b7; border-color: #14532d; }
.foto-config { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--teal); flex: 0 0 auto; }

/* lista */
.lista { display: flex; flex-direction: column; gap: 8px; }
.item-carrossel { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 10px; cursor: pointer; }
.item-carrossel:hover { border-color: var(--teal); background: var(--marinho-2); }
.item-carrossel .titulo { font-weight: 700; flex: 1; }
.item-carrossel .meta { color: var(--suave); font-size: 12px; }
.tag { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: var(--marinho-2); border: 1px solid var(--borda); color: var(--suave); text-transform: uppercase; letter-spacing: 1px; }
.tag.aprovado { color: #6ee7b7; } .tag.publicado { color: var(--teal-claro); }
.item-carrossel .apagar { background: none; border: none; color: var(--suave); cursor: pointer; font-size: 16px; }
.item-carrossel .apagar:hover { color: #ff8f8f; }

/* editor */
.editor-topo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.titulo-input { flex: 1; min-width: 220px; font-weight: 700; }
.editor-topo select { width: auto; }
.editor-grid { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(380px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 980px) { .editor-grid { grid-template-columns: 1fr; } }

.slide-form { border: 1px solid var(--borda); border-radius: 10px; padding: 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.slide-form .cab { display: flex; gap: 8px; align-items: center; }
.slide-form .cab select { width: 130px; flex: 0 0 auto; }
.slide-form .cab .num { font-weight: 800; color: var(--teal-claro); width: 26px; }
.slide-form .cab button { background: none; border: none; color: var(--suave); cursor: pointer; font-size: 15px; }
.slide-form .cab button:hover { color: var(--texto); }
.refazer { display: flex; gap: 10px; margin-top: 14px; }
.refazer input { flex: 1; }

/* preview dos slides (1080x1350 em escala) */
.preview { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; }
.slide-view { flex: 0 0 auto; width: 270px; height: 337.5px; border-radius: 6px; overflow: hidden; position: relative; box-shadow: 0 4px 18px rgba(0,0,0,.45); }
.slide-view .sl-page { transform: scale(0.25); transform-origin: top left; }
.sl-page { width: 1080px; height: 1350px; font-family: 'Montserrat', sans-serif; display: flex; flex-direction: column; padding: 70px 80px 60px; position: relative; overflow: hidden; }
/* paletas do slide (brandbook: claro = Papel/Tinta/Dourado, escuro = tokens do modo escuro) */
.sl-claro { background: #f5f2ec; color: #1b2130; --sl-texto: #1b2130; --sl-corpo: #4a5164; --sl-destaque: #9c7a3c; --sl-suave: #666d80; --sl-fantasma: #eae3d3; --sl-borda: #e6dfd0; --sl-caixa: #ffffff; --sl-pilula-texto: #f5f2ec; }
.sl-escuro { background: #101b2e; color: #f5f2ec; --sl-texto: #f5f2ec; --sl-corpo: #c9cfdd; --sl-destaque: #cba25b; --sl-suave: #9aa3ba; --sl-fantasma: #1f2a44; --sl-borda: #35405c; --sl-caixa: #1f2a44; --sl-pilula-texto: #1b2130; }
.sl-page .suave { color: var(--sl-suave); } .sl-page .destaque { color: var(--sl-destaque); }
/* assinatura visual */
.sl-barra-topo { position: absolute; top: 0; left: 0; width: 100%; height: 12px; background: var(--sl-destaque); }
.sl-fantasma { position: absolute; top: 6px; right: 30px; font-weight: 800; font-size: 430px; line-height: 1; color: var(--sl-fantasma); z-index: 0; }
.sl-page > *:not(.sl-fantasma):not(.sl-barra-topo) { position: relative; z-index: 1; }
/* cabecalho "twitter" dos slides de miolo: foto + nome + @ e numero da pagina */
.sl-cab { display: flex; align-items: center; gap: 18px; margin-bottom: 40px; }
.sl-cab .foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 3px solid var(--sl-destaque); }
.sl-cab .foto.iniciais { background: var(--sl-destaque); color: var(--sl-pilula-texto); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 26px; }
.sl-cab .nome { font-weight: 700; font-size: 25px; line-height: 1.15; }
.sl-cab .arroba { font-size: 21px; }
.sl-cab .pag { margin-left: auto; color: var(--sl-destaque); font-weight: 800; font-size: 22px; letter-spacing: 1px; }
/* chip do autor (capa e CTA): foto + nome lado a lado, estilo referencia */
.sl-chip { display: flex; align-items: center; gap: 22px; align-self: center; background: var(--sl-caixa); border: 3px solid var(--sl-borda); border-radius: 90px; padding: 14px 44px 14px 16px; box-shadow: 0 10px 30px rgba(7, 17, 32, .10); }
.sl-chip .foto { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 4px solid var(--sl-destaque); }
.sl-chip .foto.iniciais { background: var(--sl-destaque); color: var(--sl-pilula-texto); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 38px; }
.sl-chip .nome { font-weight: 700; font-size: 29px; line-height: 1.2; }
.sl-chip .arroba { font-size: 22px; }
/* tipografia */
.sl-titulo { font-weight: 800; text-transform: uppercase; line-height: 1.04; }
.sl-etiqueta { display: flex; align-items: center; gap: 16px; font-weight: 800; letter-spacing: 6px; font-size: 26px; text-transform: uppercase; color: var(--sl-destaque); margin-bottom: 22px; }
.sl-etiqueta::before { content: ''; width: 62px; height: 7px; background: var(--sl-destaque); }
.sl-regua { width: 100%; height: 3px; background: var(--sl-borda); margin: 28px 0 24px; }
.sl-sub { font-family: 'Playfair Display', Georgia, serif; font-size: 34px; font-style: italic; color: var(--sl-destaque); }
.sl-corpo { font-size: 34px; line-height: 1.5; margin-top: 30px; white-space: pre-wrap; color: var(--sl-corpo); }
.sl-prompt { background: var(--sl-caixa); border: 3px solid var(--sl-borda); border-left: 12px solid var(--sl-destaque); border-radius: 20px; padding: 36px 42px; font-size: 27px; line-height: 1.45; font-style: italic; margin-top: 30px; white-space: pre-wrap; overflow: hidden; flex: 1; }
.sl-nota { margin-top: 22px; text-align: center; font-weight: 700; font-size: 18px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--sl-suave); }
/* pilulas */
.sl-pilula { align-self: center; background: var(--sl-destaque); color: var(--sl-pilula-texto); font-weight: 800; letter-spacing: 3px; font-size: 24px; text-transform: uppercase; padding: 20px 56px; border-radius: 80px; white-space: nowrap; }
.sl-pilula.vazada { background: transparent; color: var(--sl-destaque); border: 5px solid var(--sl-destaque); font-size: 21px; padding: 12px 44px; }
.sl-pilula.mega { font-size: 34px; letter-spacing: 4px; padding: 24px 70px; }
.sl-risco { width: 70px; height: 6px; background: var(--sl-destaque); margin: 0 auto 20px; }
.sl-subcapa { text-align: center; text-transform: uppercase; font-weight: 700; letter-spacing: 2.5px; font-size: 24px; line-height: 1.35; color: var(--sl-suave); }
.centro { text-align: center; justify-content: center; }

/* ------------------- nota do playbook ------------------- */
.avaliacao { border-left: 3px solid var(--teal); }
.av-cab { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.av-nota { font-size: 30px; font-weight: 800; padding: 10px 16px; border-radius: 12px; background: var(--marinho-2); border: 1px solid var(--borda); }
.av-nota.ok { color: #7fd48f; border-color: #3e6a49; }
.av-nota.meio { color: var(--teal-claro); border-color: var(--teal); }
.av-nota.ruim { color: #e08a8a; border-color: #7a4040; }
.av-acoes { display: flex; flex-direction: column; gap: 8px; }
.av-acao { display: flex; gap: 12px; align-items: flex-start; background: var(--marinho-2); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.av-acao.problema { border-left: 3px solid #a05252; }
.av-acao.falta { border-left: 3px solid var(--teal); }
.av-acao small { color: var(--suave); }
.av-peso { font-weight: 800; color: var(--teal-claro); white-space: nowrap; padding-top: 1px; }
.av-acao.problema .av-peso { color: #e08a8a; }
.av-rodape { margin-top: 12px; font-size: 11px; }

/* ------------------- checklist de gravacao ------------------- */
.checklist { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.checklist li { background: var(--marinho-2); border: 1px solid var(--borda); border-radius: 8px; padding: 9px 12px; font-size: 13px; padding-left: 34px; position: relative; }
.checklist li::before { content: '✓'; position: absolute; left: 12px; color: var(--teal-claro); font-weight: 800; }

/* ------------------- planejamento ------------------- */
.plano-semana { color: var(--teal-claro); text-transform: uppercase; letter-spacing: 2px; font-size: 13px; margin: 18px 0 10px; }
.plano-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pauta-card { background: var(--marinho-2); border: 1px solid var(--borda); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.pauta-topo { display: flex; justify-content: space-between; align-items: center; }
.pauta-tema { font-size: 13.5px; line-height: 1.45; flex: 1; }
.pauta-card .btn { align-self: flex-start; }