/* ==========================================================
   ALÇA LATERAL DE BLOCO ESTILO NOTION (+ e ⋮⋮)
   ========================================================== */
.bloco-hover-handle {
    position: absolute;
    display: none;
    align-items: center;
    gap: 2px;
    z-index: 25;
    background: transparent;
    user-select: none;
    transform: translateX(-100%);
    padding-right: 6px;
}

.bloco-hover-handle.visivel {
    display: flex;
}

.btn-handle-acao {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--raio-sm);
    color: var(--texto-suave);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transicao);
}

.btn-handle-acao:hover {
    background: var(--bg-elevado);
    color: var(--texto-principal);
}

.btn-handle-adicionar {
    font-weight: 700;
    font-size: 15px;
}

.btn-handle-opcoes {
    font-size: 13px;
    letter-spacing: -1px;
}

/* Menu de Opções do Bloco (Ao clicar em ⋮⋮) */
.menu-bloco-opcoes {
    position: absolute;
    background: var(--bg-superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg);
    width: 240px;
    max-height: 380px;
    overflow-y: auto;
    z-index: 160;
    display: none;
    flex-direction: column;
    padding: 6px;
    gap: 2px;
    animation: surgimentoRapido 0.15s ease;
}

.menu-bloco-opcoes.visivel {
    display: flex;
}

/* Selects da Toolbar Flutuante */
.toolbar-select-estilo {
    background: transparent;
    border: none;
    color: var(--texto-principal);
    font-size: 12.5px;
    font-weight: 600;
    padding: 2px 4px;
    outline: none;
    cursor: pointer;
    border-radius: var(--raio-sm);
    font-family: var(--fonte-principal);
}

.toolbar-select-estilo:hover {
    background: var(--bg-hover);
}

.toolbar-select-estilo option {
    background: var(--bg-superficie);
    color: var(--texto-principal);
}

/* Header de Busca no Slash Menu */
.slash-busca-header {
    padding: 4px 6px 8px;
    border-bottom: 1px solid var(--borda-suave);
    margin-bottom: 4px;
}

.slash-filtro-input {
    width: 100%;
    background: var(--bg-painel);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    padding: 6px 8px;
    font-size: 12.5px;
    color: var(--texto-principal);
    outline: none;
}

.slash-filtro-input:focus {
    border-color: var(--primaria);
}

/* Corpo do Editor */
.editor-conteudo {
    width: 100%;
    min-height: 450px;
    outline: none;
    font-family: var(--fonte-principal);
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--texto-principal);
    word-break: break-word;
    position: relative;
    padding-bottom: 40px;
    margin-bottom: 20px;
}

.editor-conteudo:empty::before {
    content: "Digite '/' para comandos ou clique no '+' ao lado...";
    color: var(--texto-suave);
    pointer-events: none;
    position: absolute;
}

/* Tipografia e Parágrafos */
.editor-conteudo p {
    margin-bottom: 12px;
}

.editor-conteudo h1 {
    font-family: var(--fonte-destaque);
    font-size: 2rem;
    font-weight: 700;
    margin-top: 28px;
    margin-bottom: 12px;
    line-height: 1.3;
    color: var(--texto-principal);
}

.editor-conteudo h2 {
    font-family: var(--fonte-destaque);
    font-size: 1.55rem;
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 10px;
    line-height: 1.35;
    color: var(--texto-principal);
}

.editor-conteudo h3 {
    font-family: var(--fonte-destaque);
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 8px;
    line-height: 1.4;
    color: var(--texto-principal);
}

/* ==========================================================
   ALINHAMENTOS DE TEXTO (A maior funcionalidade solicitada!)
   ========================================================== */
.editor-conteudo [style*="text-align: center"],
.editor-conteudo .alinhar-centro {
    text-align: center !important;
}

.editor-conteudo [style*="text-align: right"],
.editor-conteudo .alinhar-direita {
    text-align: right !important;
}

.editor-conteudo [style*="text-align: justify"],
.editor-conteudo .alinhar-justificado {
    text-align: justify !important;
}

.editor-conteudo [style*="text-align: left"],
.editor-conteudo .alinhar-esquerda {
    text-align: left !important;
}

/* Citações (Blockquotes) */
.editor-conteudo blockquote {
    border-left: 3px solid var(--primaria);
    padding: 8px 16px;
    margin: 16px 0;
    color: var(--texto-secundario);
    font-style: italic;
    background: var(--bg-hover);
    border-radius: 0 var(--raio-md) var(--raio-md) 0;
}

/* Caixas de Destaque (Callouts) */
.bloco-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin: 16px 0;
    border-radius: var(--raio-md);
    background: var(--bg-painel);
    border: 1px solid var(--borda);
}

.bloco-callout-info {
    border-left: 4px solid var(--primaria);
    background: rgba(99, 102, 241, 0.08);
}

.bloco-callout-sucesso {
    border-left: 4px solid var(--sucesso);
    background: var(--sucesso-bg);
}

.bloco-callout-aviso {
    border-left: 4px solid var(--aviso);
    background: var(--aviso-bg);
}

.bloco-callout-perigo {
    border-left: 4px solid var(--perigo);
    background: var(--perigo-bg);
}

.callout-icone {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.callout-texto {
    flex: 1;
}

/* Listas e To-dos */
.editor-conteudo ul, .editor-conteudo ol {
    padding-left: 24px;
    margin-bottom: 14px;
}

.editor-conteudo li {
    margin-bottom: 4px;
}

.lista-tarefas {
    list-style: none;
    padding-left: 0 !important;
}

.lista-tarefas li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.lista-tarefas input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin-top: 3px;
    cursor: pointer;
    accent-color: var(--primaria);
}

/* Blocos de Código */
.editor-conteudo pre {
    background: #090d13;
    border: 1px solid var(--borda);
    border-radius: var(--raio-md);
    padding: 14px 18px;
    margin: 16px 0;
    overflow-x: auto;
    font-family: var(--fonte-mono);
    font-size: 13.5px;
    color: #e6edf3;
    line-height: 1.6;
}

.editor-conteudo code {
    font-family: var(--fonte-mono);
    font-size: 88%;
    background: var(--bg-hover);
    padding: 2px 6px;
    border-radius: var(--raio-sm);
    color: var(--rosa);
}

/* Linha Divisória */
.editor-conteudo hr {
    border: none;
    height: 1px;
    background: var(--borda);
    margin: 28px 0;
}

/* Tabelas */
.editor-conteudo table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
}

.editor-conteudo th, .editor-conteudo td {
    border: 1px solid var(--borda);
    padding: 9px 14px;
    text-align: left;
}

.editor-conteudo th {
    background: var(--bg-painel);
    font-weight: 600;
}

/* Links Bidirecionais no Editor */
.link-bidirecional {
    color: var(--primaria);
    text-decoration: none;
    font-weight: 600;
    background: var(--primaria-luz);
    padding: 1px 6px;
    border-radius: var(--raio-sm);
    cursor: pointer;
    transition: var(--transicao);
}

.link-bidirecional:hover {
    background: var(--primaria);
    color: #ffffff;
}

/* ==========================================================
   BARRA FLUTUANTE DE FORMATAÇÃO (Floating Toolbar)
   ========================================================== */
.toolbar-flutuante {
    position: absolute;
    background: var(--bg-superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-lg);
    display: none;
    align-items: center;
    padding: 4px;
    gap: 2px;
    z-index: 100;
    backdrop-filter: blur(8px);
    animation: surgimentoRapido 0.15s ease;
}

.toolbar-flutuante.visivel {
    display: flex;
}

@keyframes surgimentoRapido {
    from { transform: translateY(6px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.toolbar-btn {
    background: transparent;
    border: none;
    color: var(--texto-secundario);
    width: 28px;
    height: 28px;
    border-radius: var(--raio-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transicao);
}

.toolbar-btn:hover, .toolbar-btn.ativo {
    background: var(--bg-hover);
    color: var(--texto-principal);
}

.toolbar-btn.ativo {
    color: var(--primaria);
    background: var(--bg-ativo);
}

.toolbar-divisor {
    width: 1px;
    height: 18px;
    background: var(--borda);
    margin: 0 4px;
}

/* Seletor de Cores na Toolbar */
.toolbar-cor-container {
    position: relative;
    display: flex;
    align-items: center;
}

.color-picker-invisivel {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    left: 0;
    top: 0;
}

/* ==========================================================
   MENU DE COMANDOS DE BARRA (Slash Menu `/`)
   ========================================================== */
.menu-slash {
    position: absolute;
    background: var(--bg-superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg);
    width: 280px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 150;
    display: none;
    flex-direction: column;
    padding: 6px;
    gap: 2px;
}

.menu-slash.visivel {
    display: flex;
}

.slash-grupo-titulo {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--texto-suave);
    padding: 6px 8px 3px;
}

.slash-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--raio-md);
    cursor: pointer;
    color: var(--texto-secundario);
    transition: var(--transicao);
    font-size: 13px;
}

.slash-item:hover, .slash-item.selecionado {
    background: var(--bg-ativo);
    color: var(--texto-principal);
}

.slash-item-icone {
    width: 24px;
    height: 24px;
    border-radius: var(--raio-sm);
    background: var(--bg-painel);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--primaria);
}

.slash-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.slash-item-titulo {
    font-weight: 600;
}

.slash-item-desc {
    font-size: 11px;
    color: var(--texto-suave);
}

/* ==========================================================
   AUTOCOMPLETE DE LINKS BIDIRECIONAIS `[[`
   ========================================================== */
.menu-autocomplete-link {
    position: absolute;
    background: var(--bg-superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg);
    width: 260px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 150;
    display: none;
    flex-direction: column;
    padding: 6px;
    gap: 2px;
}

.menu-autocomplete-link.visivel {
    display: flex;
}

/* Rodapé de Backlinks e Conexões da Nota */
.rodape-nota-info {
    clear: both;
    margin-top: 60px;
    padding-top: 24px;
    border-top: 1px dashed var(--borda);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 10;
}

.secao-backlinks-titulo {
    font-size: 13px;
    font-weight: 700;
    color: var(--texto-secundario);
    display: flex;
    align-items: center;
    gap: 6px;
}

.grade-backlinks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.card-backlink {
    padding: 10px 14px;
    background: var(--bg-painel);
    border: 1px solid var(--borda-suave);
    border-radius: var(--raio-md);
    cursor: pointer;
    transition: var(--transicao);
}

.card-backlink:hover {
    border-color: var(--primaria);
    background: var(--bg-elevado);
    transform: translateY(-2px);
}

.card-backlink-titulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-principal);
    margin-bottom: 4px;
}

.card-backlink-resumo {
    font-size: 11.5px;
    color: var(--texto-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}