/* block-editor.css — secções do "Configurar Bloco" (painel direito):
   Posição, Layout Interno, Fundo, Animação. Cada uma com título + ícone
   próprios, visualmente separadas por um cartão com fundo/borda leve, em
   vez de campos soltos empilhados com <hr> — mais fácil de escanear. */

/* Abas Bloco/Media — evitam um "lençol gigante" de campos empilhados: a
   aba Bloco tem Posição/Grelha/Layout Interno/Background/Animações do
   BLOCO; a aba Media tem a lista de media items + editor do item
   selecionado. Só uma .nv-tab-pane fica visível de cada vez (ver
   app.js: initBlockTabs).
   Estilo "ligado ao painel debaixo" — sem gap entre as abas nem fundo
   cheio na ativa, uma linha contínua por baixo de toda a barra com só o
   sublinhado da aba ativa a destacar-se dela (mesmo idioma visual de
   abas tipo "Primary/Effects/Customize"), não dois botões separados. */
.nv-tabs {
    display: flex;
    margin: 12px 0 14px;
    border-bottom: 1px solid var(--border);
}

.nv-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 8px;
    margin-bottom: -1px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.nv-tab:hover {
    color: var(--text-primary);
}

.nv-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Aba desativada (ver app.js: toggleSpecialBlockSections — Media
   desativada para bloco Slider, que não usa media items normais) —
   esmaecida, cursor a indicar que não é clicável (o próprio JS já ignora
   o clique, isto é só o feedback visual). */
.nv-tab--disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.nv-tab--disabled:hover {
    color: var(--text-secondary);
}

.nv-tab-pane {
    display: none;
}

.nv-tab-pane.active {
    display: block;
}

.nv-section {
    padding: 12px;
    margin-bottom: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.nv-section:last-child {
    margin-bottom: 0;
}

.nv-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    padding: 0;
    line-height: 1;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.nv-section-title i:first-child {
    color: var(--accent);
    font-size: 12px;
    line-height: 1;
}

/* .nv-section.collapsed sem .nv-section-content visível: título fica
   sozinho no cartão — sem a margem pensada para separar do conteúdo
   abaixo, que aqui não existe. Padding do cartão (topo E baixo) mantém-se
   sempre igual, aberto ou colapsado. */
.nv-section.collapsed .nv-section-title {
    margin-bottom: 0;
}

/* Chevron para fechar/abrir cada secção — mesmo mecanismo de
   .collapsible/.section-toggle (ver panels.css), só que aqui o toggle é o
   próprio .nv-section-title (h4), sem precisar de uma classe .collapsible
   à parte no wrapper: toda .nv-section já é colapsável por defeito. */
.nv-section-toggle-icon {
    margin-left: auto;
    transition: transform 0.2s;
    font-size: 10px;
}

.nv-section.collapsed .nv-section-toggle-icon {
    transform: rotate(-90deg);
}

.nv-section.collapsed .nv-section-content {
    display: none;
}

.nv-section .hint {
    margin-bottom: 10px;
}

.nv-section hr {
    display: none; /* secções já separam visualmente, <hr> interno é redundante */
}