@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;
  }

/* Evita vazamento lateral em qualquer layout */
html, body, #app-content {
  max-width: 100vw;
  overflow-x: hidden;
}

  

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-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;
}

@media (max-width: 770px){
  .editor-container {
    height: auto !important;
    min-height: calc(100dvh - 210px) !important;
    overflow: visible !important;
  }
}




.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;
    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);

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 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: 100001;
  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;
}

/* tornar visível quando o mouse estiver sobre o item do TCC */
.tcc-item:hover .trash-icon {
  visibility: visible;
}

/* (opcional) manter a lixeira vermelha mesmo com o hover azul do item */
.tcc-item:hover .trash-icon {
  color: #f1eff0 !important;
}

/* --- PLUS do Ref. Teórico (sempre visível e em linha com o texto) --- */
.sidebar .secao-item .plus-ref-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;         /* espaço entre o texto e o + */
  font-size: 13px;
  color: #6b7280;           /* cinza discreto */
  background: transparent;
  border: 0;
  padding: 0 2px;
  cursor: pointer;
  opacity: 1;               /* sempre visível */
  pointer-events: auto;
}

/* feedback no hover só do botão (opcional) */
.sidebar .secao-item .plus-ref-btn:hover {
  color: #111827;
}




/* ============================================================== */
/* 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 */
}

#btnAssinarProSide{
  max-width: 90%;
}


/* style-new-front.css (adicione no final) */
.refine-panel { width: 100%; background-color: #f8f7f7; padding: 20px; display: flex; flex-direction: column; }
.refine-panel-title { font-size: 16px; font-weight: bold; margin-bottom: 15px; }
.refine-panel-content { display: flex; flex-direction: column; gap: 10px; }
.refine-panel-content label { font-weight: 500; font-size: 14px; }
.refine-panel-content textarea, .refine-panel-content input { width: 100%; padding: 8px; border-radius: 5px; border: 1px solid #ccc; font-family: 'Roboto', sans-serif; }
#refine-section-name {
    display: block;           
    background-color: #e9e8e8;
    padding: 5px 8px;
    border-radius: 5px;
    text-align: center;
    margin-top: 5px;          
    margin-bottom: 15px;      
}

/* Botão "+" fixo ao lado de "Ref. Teórico" */
.section-list .secao-item .plus-ref-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 13px;
  line-height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.section-list .secao-item .plus-ref-btn i{ pointer-events: none; }
.section-list .secao-item .plus-ref-btn:hover{ transform: scale(1.05); }

/* Termos de Uso – área rolável dentro do card */
.modal-card .modal-body {
  max-height: 65vh;
  overflow-y: auto;
  margin-top: 10px;
  padding-right: 8px; /* espaço da barra de rolagem */
}

/* ===== Tipografia e espaçamento para modais (Termos, etc.) ===== */
.modal-card {
  line-height: 1.6;                 /* texto mais respirado */
  letter-spacing: 0.1px;            /* leve melhora de leitura */
}

.modal-card .modal-body {
  padding: 20px 28px 24px;          /* mais “respiro” nas bordas internas */
  overflow-y: auto;                  /* garante rolagem suave dentro do modal */
  max-height: calc(100vh - 140px);   /* evita estourar a tela */
}

/* Títulos e hierarquia */
.modal-card h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 14px;
  text-align: center;                /* como no seu print */
}

.modal-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 22px 0 10px;
}

/* Parágrafos e listas */
.modal-card p { 
  margin: 0 0 12px;                 /* separação entre parágrafos */
}

.modal-card ul,
.modal-card ol { 
  margin: 10px 0 14px 20px;         /* recuo e espaço das listas */
  padding-left: 18px;
}

.modal-card li { 
  margin: 4px 0;                    /* itens menos grudados */
}

/* Pequenos detalhes */
.modal-card b, 
.modal-card strong { 
  font-weight: 700; 
}

.modal-card .modal-close,
.modal-card .btn-close,
.modal-card .close {                 /* cobre variações do botão X */
  top: 10px; 
  right: 12px;
}

/* Escopo exclusivo para Termos (quando houver .terms-doc) */
.modal-card .terms-doc, .about-doc {
  max-width: 920px;
  margin: 0 auto;
}

.modal-card .terms-doc h2, .about-doc h2 { margin-bottom: 16px; }
.modal-card .terms-doc h3, .about-doc h3 { margin-top: 24px; }
.modal-card .terms-doc p, .about-doc p  { margin-bottom: 12px; }
.modal-card .terms-doc ul, .about-doc ul
.modal-card .terms-doc ol, .about-doc ol  { margin-left: 22px; }

/* ===== Suporte (segue a mesma estética dos outros modais) ===== */
.support-doc { max-width: 920px; margin: 0 auto; }
.support-hero { display: flex; gap: 16px; align-items: center; }
.support-mascot { width: 140px; height: auto; flex: 0 0 auto; }
.support-doc p { margin: 0 0 12px; }
.support-doc a { color: #007bff; font-weight: 600; text-decoration: underline; }

/* Evitar que a topbar herde o "selecionado" do menu lateral */
.barra-total-topo .sidebar-title {
  background: transparent;
  color: #222;
  border: none;
}
.barra-total-topo .sidebar-title:hover {
  background: rgba(61, 134, 243, 0.5);
}
.barra-total-topo .sidebar-title.selected,
.barra-total-topo .sidebar-title.active {
  background: transparent !important;
  color: #222 !important;
  box-shadow: none !important;
}
.barra-total-topo .sidebar-title:focus {
  outline: none;
}

/* ====== DESKTOP (default) — esconder UI mobile ====== */
#mobileDock,
#mobileBackdrop {
  display: none;                 /* invisíveis por padrão */
}

/* Garantia extra para telas largas */
@media (min-width: 771px) {
  #mobileDock,
  #mobileBackdrop {
    display: none !important;
  }
}


.export-tcc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  max-height: 320px;
  overflow-y: auto;
}

.export-tcc-item {
  width: 100%;
  text-align: left;
  padding: 16px;
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: 0.2s ease;
}

.export-tcc-item:hover {
  border-color: #007bff;
  background: #f7fbff;
}

.export-tcc-item.selected {
  border-color: #007bff;
  background: #eef6ff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.08);
}

.export-tcc-item-title {
  font-size: 16px;
  font-weight: 700;
  color: #222;
  margin-bottom: 4px;
}

.export-tcc-item-sub {
  font-size: 13px;
  color: #666;
}


/************ajuste no export********************/
.export-tcc-item {
  position: relative;
}

.export-tcc-item::after {
  content: "›";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #9aa4af;
  transition: 0.2s ease;
}

.export-tcc-item:hover::after {
  color: #007bff;
  transform: translateY(-50%) translateX(2px);
}

/********************** folha de rosto *******************/
/* =========================
   Wizard exportação - folha de rosto
   ========================= */
/********************** folha de rosto *******************/
#export-pass-rosto {
  overflow: hidden;
  min-height: 0;
}

#export-pass-rosto .editor-title,
#export-pass-rosto > p {
  flex-shrink: 0;
}

#exportRostoForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 12px;
}

#exportRostoForm input,
#exportRostoForm textarea {
  width: 100%;
  max-width: 100%;
}

#exportRostoForm textarea {
  resize: vertical;
  min-height: 90px;
}

#exportRostoForm textarea#export-texto-institucional {
  min-height: 110px;
}

#exportRostoForm .btn {
  min-width: 120px;
}

#exportRostoForm::-webkit-scrollbar {
  width: 6px;
}

#exportRostoForm::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

#exportRostoForm {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}



/* ===== Wizard desktop da metodologia: header fixo + opções roláveis + footer fixo ===== */
#metodologia-pass-1,
#metodologia-pass-2,
#metodologia-pass-3,
#metodologia-pass-4,
#metodologia-pass-5 {
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

.metod-step-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.metod-step-header {
  flex: 0 0 auto;
  padding-right: 10px;
}

.metod-step-header p {
  margin: 0;
  line-height: 1.4;
}

.metod-step-options {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 10px;
  padding-bottom: 6px; /* 👈 evita grudar no footer */

  margin-top: 10px;
  margin-bottom: 12px;

  scrollbar-width: thin;
}

.metod-step-options::-webkit-scrollbar {
  width: 6px;
}

.metod-step-options::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

.metod-option {
  display: block;
  margin-bottom: 12px;
  line-height: 1.35;
  cursor: pointer;
}

.metod-option input[type="radio"] {
  margin-right: 8px;
  vertical-align: top;
}

.metod-step-footer {
  flex: 0 0 auto;
  border-top: 1px solid #e9e9e9;

  padding-top: 14px;
  padding-bottom: 14px; 

  background: #fff;
  position: relative;
  z-index: 2;
}

.metod-step-footer .btn {
  width: 100%;
  margin: 0;
}


.metod-option {
  display: block;
  margin-bottom: 16px; 
  line-height: 1.45;   
  cursor: pointer;
  font-size: 15px;
}

.metod-step-header .editor-title {
  margin-bottom: 6px;
}