.note-toolbar {
    padding: 8px 10px;
}

.note-btn-group .note-btn {
    padding: 6px 8px;
    margin-right: 2px;
}

.note-btn-group .note-btn:hover {
    background-color: #f0f0f0;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 20px;
    vertical-align: middle;
    pointer-events: none;
}

.toolbar {
    margin-bottom: 20px;
}

/* Estilos para o editor */
.note-editor.note-frame {
    border: 1px solid #ddd;
    border-radius: 4px;
}


/* Estilos para a paginação com Paged.js */
@media screen {
    .pagedjs_page {
        background: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        margin: 20px auto;
    }
}

.modal-body {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 130px);
    /* Ajuste se necessário */
    padding: 0;
}

#editor {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* .note-editor.note-frame {
  flex: 1;
  display: flex;
  flex-direction: column;
} */

/* .note-editing-area {
  flex: 1;
  display: flex;
  flex-direction: column;
} */

/* .note-editable {
  flex: 1;
  overflow: auto;
} */

/* Fixar toolbar no topo do editor */
.note-editor.note-frame {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.note-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
    border-bottom: 1px solid #ddd;
}

.note-editing-area {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* .note-editable {
  
  overflow-y: auto;
  
  background-color: white;
} */

/* Simula páginas A4 na visualização */
.note-editable {
    flex: 1;
    position: relative;
    padding: 0;
    background: #ccc;
    overflow-y: auto;
    padding: 20px;
}

.note-editable .page {
    background: white;
    width: 210mm;
    min-height: 297mm;
    padding: 2cm;
    margin: 10px auto;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    page-break-after: always;
}

/* Visualização de separador de página (não interfere na edição) */
.page-separator {
    width: 100%;
    height: 0;
    border-bottom: 2px dashed #aaa;
    margin: 20px 0;
    position: relative;
}

.page-separator::after {
    content: "Quebra de página (visual)";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #f5f5f5;
    font-size: 12px;
    color: #555;
    padding: 0 6px;
}

@media print {
    .page-separator {
        display: none !important;
    }

    .note-editable {
        background: white;
    }

    @page {
        size: A4;
        margin: 2cm;
    }
}

.note-editable .page {
    min-height: 297mm;
    padding: 2cm;
    width: 210mm;
    margin: 10px auto;
    background: white;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    page-break-after: always;
    overflow: hidden;
}

.note-editable {
    white-space: normal;
}