@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
  }
  

body {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
}

#textArea h1,
#textArea h2,
#textArea h3,
#textArea h4 {
    line-height: 1.5 !important;
    margin-bottom: 1.5em !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

#textArea p,
#textArea li {
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
    padding: 0 !important;
}


.barra-total-topo {
    width: 100%;
    height: 60px;       /* ou a altura que preferir */
    background-color: #f3f3f3; /* cor de fundo, se quiser */
    flex-shrink: 0;    /* evita que o flex encolha essa barra */
    display: flex;
    flex-direction: row;
    flex: 1;
    background-color: #e5ecf5;
  }

  .btt-logo{
    width: 15%;
  }

  .btt-main{
    width: 65%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    
  }
  .btt-esquerda {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin-bottom: -15px;
    cursor: pointer;
    color: #7d7a7a;
}

.btt-direita {
    width: 15%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    cursor: pointer;
    color: #7d7a7a;
}
 

  .btt-rigth-user{
    width: 20%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  
  .btt-user-profile {
    display: flex;
    align-items: center;
    gap: 10px; /* Espaço entre o ícone e o nome */
    font-size: 18px;
    padding: 10px;
    cursor: pointer;
    color: #202020;
    flex-direction: row;
    width: 100%;
    }

.container {
    display: flex;
    width: 100%;
    flex: 1;
}
.space-bottom{
    margin-bottom: 10px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px; /* Espaço entre o ícone e o nome */
    font-size: 14px;
    padding: 10px;
    cursor: pointer;
    color: #202020;
    flex-direction: row;
    width: 100%;
}

.profile-img {
    width: 20px;  /* Aumentei um pouco o tamanho */
    height: 20px;
    border-radius: 50%; /* Deixa a imagem circular */
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorção */
}

/* Estilo para o item atualmente selecionado */
.selected-item {
    background-color: #007bff;  /* Um tom mais escuro que o hover */
    border-radius: 10px;
    color: #ffffff;
   /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);*/
}

.buttonNewDocument{
    color: #278efc;
}

.buttonNewDocument:hover {
    background-color: #007bff;  /* Um tom mais escuro que o hover */
    border-radius: 10px;
    color: #ffffff;
   /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);*/
}

/* Sidebar esquerda */
.sidebar {
    width: 16%;
    background-color: #f8f7f7;
    padding: 15px 0 15px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - 50px);
   /* height: 100%;*/
    overflow-y: auto; /* <- ESSENCIAL: ativa rolagem vertical */
    position: relative;
}
/*   scrool bar*/
.sidebar::-webkit-scrollbar {
    width: 6px;
}
.sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
.sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/*//////////////////////////////////*/

.sidebar-up-content{
    width: 100%;

}

.sidebar-dw-content{
    width: 100%;
    
}

.sidebar-title-novo-btn{
    font-size: 14px;
    font-weight: bold;
    /*margin-bottom: 10px;*/
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    cursor: pointer;
    color: #007bff;
}

.sidebar-title-novo-btn:hover {
    background-color: #007bff;
    border-radius: 10px;
    color: #f7f5f5;
  }

.sidebar-title-novo-btn.selected-item {
    background-color: #007bff;
    border-radius: 10px;
    color: #f7f5f5;
  }

.sidebar-title {
    font-size: 14px;
    font-weight: bold;
    /*margin-bottom: 10px;*/
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    cursor: pointer;
    color: #7d7a7a;
}

.sidebar-title.selected-item {
    background-color: #007bff;
    border-radius: 10px;
    color: #f7f5f5;
  }

/*
.sidebar-title.sidebar-active {
    background-color: #e0e0e0;
    border-radius: 4px;
    padding: 6px 10px;
    color: #333;
}*/


.sidebar-list {
    list-style: none;
}

/* Esconde a lista ao iniciar */
.hidden {
    display: none;
}

/* Formatação das seções aninhadas */
.section-list {
    padding-left: 30px; /* Recuo maior para indicar hierarquia dentro do TCC */
    list-style: none;
    padding-left: 20px; /* Para indicar que é um filho */
}

.section-list .secao-item {
    font-size: 14px;
    padding: 5px 10px;
    cursor: pointer;
    color: #6d6b6b;
}

.section-list .secao-item:hover {
    background-color: #51a4fd;
    border-radius: 10px;
    color: #ffffff;
}

.secao-item.selected-item {
    background-color: #007bff;
    border-radius: 10px;
    color: #f7f5f5;
  }
  

/* Ajuste para exibir TCCs como filhos de "Documentos" */
.tcc-container {
    padding-left: 20px; /* Recuo para indicar hierarquia */
}


.tcc-item {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.3s;
    font-size: 14px;
    color: #6d6b6b;
}

.secao-item {
    cursor: pointer;
    padding: 8px 15px;
    color: #6d6b6b;
    font-size: 14px;
    transition: background 0.3s;
}

.tcc-item i, .secao-item i {
    margin-right: 10px;
    color: #6d6b6b;
    padding-right: 12px;
}

/* ==================== Ícones brancos em itens selecionados ou hover ==================== */
.sidebar-title.selected-item i,
.sidebar-title:hover i,
.tcc-item.selected-item i,
.tcc-item:hover i,
.secao-item.selected-item i,
.secao-item:hover i {
  color: #f7f5f5;
}
/* ====================================================================================== */


.tcc-item.selected-item {
    background-color: #007bff;
    border-radius: 10px;
    color: #f7f5f5;
  }

 .secao-item.selected-item .clickable-section {
    color: white;
}


.space-icon{
    padding-right: 10px;
}

.tcc-item:hover, .secao-item:hover, .sidebar-title:hover {
    background-color: #007bff;
    border-radius: 10px;
    color: #f8f7f7;
}

.tcc-titulo {
    font-size: 24px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #333;
    text-align: left;
}

.tcc-paragrafo {
    font-size: 16px;
    line-height: 1.4;        /* era 1.6 */
    margin-bottom: 8px;      /* era 14px */
    color: #444;
    text-align: justify;
}




/* Área principal */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.topbar {
    width: 100%;
    background-color: #f3f3f3;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.content {
    width: 100%; /*antes era 80*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    /*height: 100vh;*/
}

.editor-container-old {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);

}

.editor-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 210px); /* Calcula altura dinâmica */
    overflow: hidden;
    background: white;
}

.editor-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #6d6b6b;
    text-align: center;
    justify-items: center;
}

.textoContainerInicial{
    size: 16px;
    color: #6d6b6b;
    text-align: center;
    justify-items: center;
    padding-bottom: 15px;
}

.iconeDoc{
    color: #007bff;
    cursor: pointer;
}

.iconeDoc:hover {
    color: #313efd;
}

.editor-textarea {
    flex: 1;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    padding: 20px;
    outline: none;
    white-space: pre-wrap;
    /*white-space: normal;*/
    word-wrap: break-word;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    text-align: justify;
}

.folha {
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 60px 70px;
}

/*
.editor-textarea p {
    margin-bottom: 2px;     Diminuir o espaçamento entre parágrafos 
    line-height: 1.2;      Um pouco mais compacto 
}*/

/* aplica indentação só na primeira linha de cada <p> */
.editor-textarea p {
    margin-bottom: 2px;
    line-height: 1.5;
  text-indent: 1.25cm;       /* ajuste o valor a gosto */
  text-align: justify;    /* mantém o texto justificado */
  margin: 1em 0;          /* espaçamento vertical entre parágrafos */
  
}

/* mas, _quando_ estivermos _na_ seção de referências, zera o indent */
.editor-textarea.is-referencias p {
  text-indent: 0 !important;
}


.editor-textarea h3 {
    font-size: 20px;
    font-weight: bold;
    margin-top: 14px;       /* Reduz o espaço antes do título */
   /*margin-bottom: 26px;  /* ou o valor que você quiser */
}


.editor-textarea ul {
    margin-top: 0;
    margin-bottom: 4px;    /* Reduz o espaço após a lista */
    padding-left: 20px;
}

.editor-textarea li {
    margin-bottom: 2px;     /* Reduz o espaço entre itens da lista */
    line-height: 1.2;
}

  

/*/////////////////////////barra de edição//////////////////////////*/
.editor-toolbar {
    width: 100%;
    background-color: #fcf9f9;
    padding: 8px 12px;
    border-radius: 8px 8px 0 0;
    border: 1px solid #ddd;
    display: flex;
    gap: 10px;
    justify-content: space-between;
  }

  .editor-toolbar-esquerda {
    width: 30%;    
    display: flex;
    gap: 5px;
    justify-content: space-between;
  }

  .editor-toolbar-direita {
    color: #202020;
    width: 20%;    
    display: flex;
    gap: 5px;
    justify-content: flex-end;
  }
  
  .editor-toolbar button {
    background-color: #fcf9f9;
    border: none; /* remove as bordas padrão */
    border-right: 1px solid #ccc; /* mantém apenas a direita */
    border-radius: 0; /* se quiser remover o arredondamento */
    padding: 6px 30px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

  
  .editor-toolbar button:hover {
    background-color: #eee;
  }
  

/*/////////////////////////////////////////////////////////////////*/

/*///////////////////barra de rolagem /////////////////////////*/

/* Scrollbar mais discreta */
.editor-textarea::-webkit-scrollbar {
    width: 6px;
  }
  
  .editor-textarea::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .editor-textarea::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }
  
  /* Para Firefox (opcional, suporte parcial) */
  .editor-textarea {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }
  


/* Opcional: deixe a “folha” menos espaçosa para quem ainda usar sem páginas */
.folha {
  padding: 60px 70px; /* era 60px 70px; ajuste a gosto */
}


/* MANTÉM a largura/centro da folha mesmo com páginas */
.editor-textarea.has-pages {
  padding: 20px;                    /* mesmo padrão do editor */
}
.editor-textarea.folha.has-pages {
  padding: 60px 70px;               /* 24 48 mesmo da .folha */
}

/* Opcional: sobe só a PRIMEIRA página (a capa) um tiquinho */
.editor-textarea.folha.has-pages .page:first-child {
  margin-top: -102px;                /* ajuste fino: -8px a -24px */
}



/*////////////////////////////////////////////////////////////*/
.fechar-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    z-index: 1002; /* mais alto que o overlay */
    transition: color 0.2s;
}


.fechar-btn:hover {
    color: #000;
}


.actions {
    margin-top: 20px;
}

.btn {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 14px;
    border-radius: 8px;
    
}

.blue { background-color: #007bff; }
.yellow { background-color: #ffc107; }
.red { background-color: #dc3545; }
.green { background-color: #28a745; }

/* Sidebar direita (Chatbot) */
.chatbot {
    width: 20%;
    background-color: #f1f1f1;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.chatbot-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.chatbot-messages {
    flex: 1;
    background: white;
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

.chatbot-input {
    display: flex;
}

.chatbot-input input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
}

.chatbot-input button {
    padding: 8px 12px;
    border: none;
}

/*     formulario para inserir estrutura do tcc              */

.new-doc-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 600px;
}

.new-doc-form label {
    font-weight: 500;
    margin-top: 10px;
}

.new-doc-form input, .new-doc-form select {
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.output {
    margin-top: 20px;
    white-space: pre-wrap;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

#newTccFormContainer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0, 0, 0, 0.7); /* fundo escuro */
    background-color: rgba(0, 0, 0, 0.822);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

#newTccFormContainer .left-side {
    position: relative; /* necessário para posicionar corretamente o botão dentro */
    background: white;
    padding: 30px;
    border-radius: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    max-width: 300px;
    height: 450px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

#newTccFormContainer .new-doc-form-wrapper {
    position: relative; /* necessário para posicionar corretamente o botão dentro */
    background: white;
    padding: 30px;
    border-radius: 10px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    max-width: 600px;
    width: 90%;
    height: 450px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Wizard da Capa: manter label à esquerda e input ocupando o resto */
#capa-info .new-doc-form label {
  display: flex;           /* linha: texto do label + input */
  align-items: center;
  gap: 10px;               /* espaço entre texto e campo */
  width: 100%;
}

#capa-info .new-doc-form label input,
#capa-info .new-doc-form label select,
#capa-info .new-doc-form label textarea {
  flex: 1 1 auto;          /* ocupa todo o espaço livre */
  min-width: 0;            /* evita “quebras” por overflow */
  width: auto;             /* ignora larguras fixas */
  padding: 12px;           /* opcional: conforto */
  font-size: 16px;         /* opcional: leitura melhor */
  height: 30px;            /* opcional: campo mais alto */
  box-sizing: border-box;
}



.botao-salvo {
    background-color: #69a6f7 !important; /* verde */
    color: white !important;
    transition: all 0.3s ease;
    
  }
  #btn-save.botao-salvo {
    background-color: #69a6f7 !important; /* Verde de confirmação */
    color: white !important;
    border-color: #4f98f8;
    transition: all 0.3s ease;    
   
  }
  
  #btn-save i.fa-check-circle {
    margin-right: 6px;
  }
  



/*   //////////////////////////////////////////       */

#outputSugestao {
    max-height: 250px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
  }
  .sugestao-titulo {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 8px;
    background-color: #f1f1f1;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .sugestao-titulo:hover {
    background-color: #b1e0fc;
  }
  
  .sugestao-titulo.selecionado {
    background-color: #9cc3ec;
    color: white;
    font-weight: bold;
  }

  
  button:disabled {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
  }
  

  textarea {
    resize: vertical; /* permite o redimensionamento vertical, se quiser */
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Roboto', sans-serif;
    line-height: 1.5;
  }

  
  /*////////////loading stuff //////////////////*/

  .loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.822);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.loading-overlay .loading-spinner {
  background: white;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.loading-overlay .loading-spinner i {
  font-size: 32px;
  color: #007bff;
  margin-bottom: 10px;
}

.loading-overlay .loading-spinner p {
  color: #333;
  font-size: 16px;
}

.hidden {
  display: none !important;
}

/*///////////////////////////////////////////////*/

.sugestao-titulo {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #e9e8e8;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 14px;
    line-height: 1.2;
    align-items: flex-start;
}

.sugestao-titulo strong {
    color: #333;
    font-size: 14px;
}

.sugestao-titulo em {
    color: #555;
    font-style: italic;
    font-size: 12px;
}

.sugestao-titulo small {
    color: #666;
    display: block;
    margin-top: 6px;
}

.sugestao-titulo a {
    color: #007bff;
    font-size: 13px;
    text-decoration: underline;
}


.caixaAviso{
    margin-top: 20px;
    background-color: #a7e1f3;
    color: rgb(20, 20, 20);
    font-size: 16px;
    padding: 10px;
    text-align: center;
    width: 70%;
}

/* ==============================
   Ajuste de espaçamento só para Metodologia
   ============================== */
#textArea.is-metodologia h3 {
  /* margem: cima | direita | baixo | esquerda */
  margin: 0 0 1.5em 0 !important;
}

/* ===================== Ícone de lixeira ===================== */
.trash-icon {
  visibility: hidden;
  color: #dc3545;
  margin-left: auto;
  cursor: pointer;
}
.tcc-item.selected-item .trash-icon {
  visibility: visible;
}
.trash-icon:hover {
  color: #ff6b6b;
}

.tcc-item:hover .trash-icon:hover,
.tcc-item.selected-item .trash-icon:hover {
  color: #ff6b6b !important;
}
/* ============================================================== */
/* keyword checklist – uma por linha */
.checkbox-item {
  display: block;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 16px;
}
.checkbox-item input {
  margin-right: 6px;
}

/*------------sidebar do ref-----------*/
/* trilho de sub-níveis na sidebar */
.section-list > li > ul           {          /* ul interno */
  margin: 4px 0 4px 12px;
  padding-left: 12px;
  border-left: 1px dashed #c8c8c8;
}
.section-list > li > ul .secao-item {
  padding-left: 18px;                         /* alinha texto ao trilho */
}
.section-list > li > ul .space-icon {
  opacity: 0.6;                               /* ícone mais suave */
}

/* O código atual que vamos ajustar */

/* retira o azul do <li> de seções 
.secao-item.selected-item {
  background: none;
}


.clickable-section.selected-item {
  background-color: #007bff;
  color: #fff;
  border-radius: 10px;
  padding: 4px 10px;
  display: inline-block;
}
*/

/* EM: style-new-front.css */

/* Remove a regra antiga e adicione estas: */

/* Estilo de HOVER (mouse em cima) para itens de PRIMEIRO NÍVEL */
.section-list > .secao-item:hover {
  background-color: #51a4fd;
  border-radius: 10px;
  color: #ffffff;
}

/* Estilo de SELEÇÃO para itens de PRIMEIRO NÍVEL */
.section-list > .secao-item.selected-item {
  background-color: #007bff;
  border-radius: 10px;
  color: #f7f5f7;
}

/* Estilo de HOVER para SUB-ITENS (dentro de Ref. Teórico) */
.section-list ul .secao-item:hover {
  background-color: #51a4fd;
  border-radius: 10px;
  color: #ffffff;
}

/* Estilo de SELEÇÃO para SUB-ITENS (dentro de Ref. Teórico) */
.section-list ul .secao-item.selected-item {
  background-color: #007bff;
  border-radius: 10px;
  color: #f7f5f7;
}

/* Adicione este código no final de style-new-front.css */

#download-link-container a {
  color: #007bff;
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
  
  /* --- A MÁGICA ACONTECE AQUI --- */
  /* Permite que o navegador quebre uma palavra longa para evitar que ela transborde */
  overflow-wrap: break-word;
  word-wrap: break-word; /* Compatibilidade com navegadores mais antigos */
  word-break: break-all; /* Força a quebra, se necessário */

  display: block; /* Garante que o link ocupe a largura e centralize corretamente */
  padding: 10px;
  line-height: 1.5;
}

#download-link-container a:hover {
  color: #0056b3;
}

/* SUBSTITUA O SEU CÓDIGO ANTERIOR POR ESTE BLOCO COMPLETO */

/* Primeiro, definimos o espaçamento no container, sem a borda */
.tcc-container:not(:last-child) {
  position: relative; /* Necessário para o posicionamento do pseudo-elemento */
  padding-bottom: 5px;
  margin-bottom: 5px;
}

/* Agora, criamos a linha divisória usando o pseudo-elemento ::after */
.tcc-container:not(:last-child)::after {
  content: ''; /* Obrigatório para o pseudo-elemento aparecer */
  display: block; /* Transforma em um bloco para podermos definir largura/altura */
  
  width: 50%; /* A largura que você queria para a linha! */
  height: 1px; /* A espessura da linha */
  background-color: #d6d6d6; /* A cor da linha */

  position: absolute; /* Posiciona a linha em relação ao container */
  bottom: 0; /* Coloca a linha na parte inferior do espaço do padding */
  left: 25%; /* Centraliza a linha (100% - 90% = 10%. Metade para cada lado) */
}


/* style-new-front.css */

.page {
    background: white;
    padding: 0.5cm;
    padding: 0.3cm 0.5cm 0.5cm;
    margin-bottom: 20px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    page-break-after: always; /* Para impressão */
}

.cover-page {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 21.7cm; /* Altura de uma folha A4 */
    box-sizing: border-box;
}

.cover-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

/* Sobe levemente o miolo da capa */
.cover-page .cover-content {
  transform: translateY(-2.5cm);
}


.cover-universidade, .cover-curso {
    font-weight: bold;
    font-size: 22px;
}
.cover-aluno {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 1px;
}

.cover-title {
    /*font-weight: bold;*/
    font-size: 16px;
    margin: 0 auto;
    max-width: 90%;
}

.cover-subtitle, .cover-orientador {
    font-size: 14px;
    margin: 20px auto 0 auto;
    max-width: 60%;
}

/* Rodapé da capa: autor e cidade/ano */
.cover-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;            /* << controla a distância entre as duas linhas */
  text-align: center;
  margin-bottom: 1.7cm; /* mantém a distância do fim da página */
}

/* Zera margens internas das linhas e compacta line-height */
.cover-footer .cover-aluno,
.cover-footer .cover-cidade {
  margin: 0;
  line-height: 1.2;
}




.cover-cidade, .cover-ano {
    font-size: 16px;
    font-weight: bold;
}

.page-break {
    display: block;
    page-break-before: always;
    height: 0;
}

/* Aviso acima da estrutura */
#textArea .callout-estrutura {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  margin: 6px 0 22px;
  border: 1px solid #cfe5ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #f6fbff 0%, #eef6ff 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  text-align: left;
}

#textArea .callout-estrutura .icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #007bff33;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #007bff;
  font-size: 18px;
}

#textArea .callout-estrutura .callout-title {
  font-weight: 700;
  margin-bottom: 6px;
  color: #2b2b2b;
}

#textArea .callout-title {
  font-weight: 700;
  margin-bottom: 6px;
  color: #2b2b2b;
  font-size: 20px;
}

#textArea .callout-estrutura p {
  text-align: justify;        /* << o que você pediu */
  line-height: 1.35;          /* um pouco mais compacto */
  font-size: 16px;            /* levemente menor = menos linhas */
  hyphens: auto;              /* melhora a hifenização em PT */
  margin: 0;
  text-indent: 0 !important;  /* mantém sem recuo */
  word-break: normal;
}

#textArea .callout-estrutura .text {
  flex: 1 1 auto;             /* ocupa todo o espaço disponível ao lado do ícone */
  min-width: 0;               /* evita quebra precoce de linha por overflow */
  width: 100%;
}

/* Callout: ignora o pre-wrap do editor e remove recuos */
#textArea .callout-estrutura,
#textArea .callout-estrutura * {
  white-space: normal !important;   /* << chave do conserto */
}

#textArea .callout-estrutura p {
  text-align: justify;
  line-height: 1.35;
  font-size: 16px;
  hyphens: auto;
  margin: 0;
  text-indent: 0 !important;
}


/*************************************/
/* ===== Escopo só da seção Estrutura ===== */
.estrutura-content, .estrutura-content * {
  white-space: normal;            /* neutraliza o pre-wrap do editor aqui */
}

.estrutura-content h3 {
  margin-top: 22px;               /* << respiro acima do título */
  margin-bottom: 2px;            /* já tinha “pra baixo”, mantém aqui */
  font-weight: 700;
}

.estrutura-content p {            /* parágrafos da estrutura */
  margin: 8px 0 12px;
  text-indent: 0;                 /* estrutura é esqueleto, sem recuo */
}

.estrutura-content ul {
  margin: 6px 0 12px 20px;
  padding-left: 0;
}

.estrutura-content ul + h3,
.estrutura-content p + h3 {
  margin-top: 26px;               /* extra quando vem depois de texto/lista */
}

#textArea .estrutura-content h3 {
  text-align: justify;
  line-height: 1.35;
  font-size: 22px;
  hyphens: auto;  
  text-indent: 0 !important;
 padding-top: 30px !important;
 margin-bottom: 15px !important;
}

/* Box icon para as seções */
.box-icon{
  display:inline-block;
  width:14px;
  height:14px;
  border:2px solid #bdbdbd;
  border-radius:3px;        /* pode ser 0 se quiser quadrado puro */
  margin-right:10px;
  vertical-align:middle;
  position:relative;
  top:-1px;                 /* ajuste fino opcional */
}

/* Estado checado: fundo verde + check branco */
.box-icon.checked{
  background:#22c55e;       /* verde */
  border-color:#22c55e;
}
.box-icon.checked::after{
  content:"";
  position:absolute;
  left:3px; top:0px;
  width:4px; height:8px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* ====== Checkbox minimalista nas seções da sidebar ====== */

/* 1) some o ícone antigo (doc) quando existir */
.section-list .secao-item > i.space-icon { 
  display: none !important; 
}

/* 2) desenha a caixinha antes do texto da seção */
.section-list .secao-item .clickable-section::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #b9b9b9;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: -2px;
  background: transparent;
}

/* 3) quando a seção tiver conteúdo, pintamos a caixa de verde com o ✓ */
.section-list .secao-item.secao-ok .clickable-section::before {
  background: #277ad8;      /* verde  22c55e*/
  border-color: #277ad8;
  content: '✓';
  color: white;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
}

/* 4) garantir contraste em hover/seleção */
.section-list .secao-item:hover .clickable-section::before,
.section-list .secao-item.selected-item .clickable-section::before {
  border-color: #ffffffcc;
}

/* creditos exemplo  */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index: 9999; }
.modal-overlay.hidden { display:none; }
.modal-card {  position: relative; background:#fff; max-width: 70%;  border-radius: 12px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.modal-card .packs { display:flex; gap: 10px; margin-top: 10px; }


#btnAssinarProTop,
#btnAssinarProSide {
  font-size: 14px;     /* aumenta número e ícone juntos */
  padding: 10px 12px;  /* ajusta espaçamento interno */
}

#btnAssinarProTop i,
#btnAssinarProSide i {
  font-size: 14px;     /* aumenta só o ícone */
}