/* ── DP: Setores e Funções ──────────────────────────────────────────────────── */
.dp-titulo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.dp-titulo-acoes { display: flex; gap: 8px; align-items: center; }
.dp-btn { font-size: 13px; padding: 8px 16px; }
.dp-setores-grade { display: grid; grid-template-columns: 360px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .dp-setores-grade { grid-template-columns: 1fr; } }

.dp-vazio { color: #9CA3AF; font-size: 13px; margin: 0; }
.dp-vazio.pequeno { font-size: 12px; padding: 4px 10px; font-style: italic; }
.dp-erro { color: #b91c1c; font-size: 13px; }
.dp-aviso { background: #FFFBEB; border-left: 3px solid #F59E0B; color: #78350F; font-size: 13px; padding: 8px 12px; border-radius: 6px; margin: 0 0 12px; }

/* Lista de setores por seção */
.dp-setores-lista { padding: 12px; display: flex; flex-direction: column; gap: 12px; }

/* Cada seção é um bloco: cabeçalho colorido em destaque + setores numa área recuada com linha guia.
   As cores são as opções do lápis (setor_secoes.cor; mesma lista em db/setores.js) */
.dp-secao, .dp-cor-opcao { --cor: #245A91; --fundo: #EFF5FB; --borda: #CFE0F1; }
.cor-azul  { --cor: #245A91; --fundo: #EFF5FB; --borda: #CFE0F1; }
.cor-verde { --cor: #0F766E; --fundo: #ECFDF8; --borda: #BFE9DF; }
.cor-roxo  { --cor: #6D28D9; --fundo: #F5F1FE; --borda: #DDD0FB; }
.cor-ambar { --cor: #B45309; --fundo: #FFF8EB; --borda: #F6DDB0; }
.cor-rosa  { --cor: #BE185D; --fundo: #FDF2F7; --borda: #F6CFE0; }
.cor-ciano { --cor: #0E7490; --fundo: #ECFBFE; --borda: #BCE7F2; }
.dp-secao { border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; background: white;
    transition: box-shadow .2s ease, border-color .2s ease, opacity .2s ease, background .2s ease; }
.dp-secao.sem-secao { --cor: #6B7280; --fundo: #F9FAFB; --borda: #E5E7EB; border-style: dashed; }
.dp-secao:hover, .dp-secao.tem-ativo { box-shadow: 0 6px 18px rgba(15,23,42,.07); border-color: var(--cor); }

.dp-secao-topo { display: flex; align-items: center; gap: 6px; padding: 10px 8px 10px 6px; background: var(--fundo); cursor: pointer; user-select: none;
    border-bottom: 1px solid var(--borda); border-left: 4px solid var(--cor); transition: border-color .2s ease; }
.dp-secao.recolhida .dp-secao-topo { border-bottom-color: transparent; }
.dp-secao-icone { width: 28px; height: 28px; border-radius: 8px; background: var(--cor); color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dp-secao-icone svg { width: 16px; height: 16px; }
.dp-secao-nome { flex: 1; min-width: 0; margin: 0 0 0 2px; font-size: 14px; font-weight: 800; color: #0f172a; letter-spacing: -.1px; line-height: 1.25; }
.dp-secao-qtd { background: white; color: var(--cor); border: 1px solid var(--borda); font-size: 11.5px; font-weight: 700; min-width: 22px; text-align: center;
    padding: 1px 7px; border-radius: 99px; }
.dp-icone-btn { border: none; background: none; color: var(--cor, #6B7280); opacity: .7; cursor: pointer; border-radius: 6px; padding: 4px; display: flex;
    transition: background .15s ease, opacity .15s ease, color .15s ease; }
.dp-icone-btn svg { width: 15px; height: 15px; }
.dp-icone-btn:hover { background: white; opacity: 1; }
.dp-icone-btn.perigo:hover { color: #b91c1c; }
.dp-secao-seta { display: flex; color: var(--cor); opacity: .6; transition: transform .2s ease; }
.dp-secao-seta svg { width: 16px; height: 16px; }
.dp-secao.recolhida .dp-secao-seta { transform: rotate(-90deg); }

/* Alça de arrastar (seção e setor) */
.dp-alca { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 26px; border: none; background: none; padding: 0;
    color: var(--cor); opacity: .4; cursor: grab; border-radius: 5px; transition: opacity .15s ease, background .15s ease; }
.dp-alca svg { width: 14px; height: 14px; }
.dp-alca:hover, .dp-alca:focus-visible { opacity: 1; background: white; outline: none; }
.dp-alca:active { cursor: grabbing; }

/* Recolher/expandir suave: a altura vai a zero pelo grid (sem altura fixa), os itens desvanecem e
   descem um pouco, e a seta gira — tudo com a mesma curva. Padrão para todo menu recolhível do portal. */
.dp-secao { --suave: cubic-bezier(.4, 0, .2, 1); }
.dp-secao-corpo { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s var(--suave); }
.dp-secao.recolhida .dp-secao-corpo { grid-template-rows: 0fr; }
.dp-secao-itens { min-height: 0; overflow: hidden; padding: 8px 10px 10px 18px; position: relative;
    transition: padding .32s var(--suave), opacity .22s ease, transform .32s var(--suave); }
.dp-secao.recolhida .dp-secao-itens { padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateY(-6px); }
.dp-secao-topo { transition: border-color .32s var(--suave), background .2s ease; }
.dp-secao-seta { transition: transform .32s var(--suave), opacity .15s ease; }
.dp-secao-topo:hover .dp-secao-seta { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .dp-secao-corpo, .dp-secao-itens, .dp-secao-seta { transition: none; }
}
.dp-secao-itens::before { content: ''; position: absolute; left: 18px; top: 8px; bottom: 46px; width: 2px; background: var(--borda); border-radius: 2px; }

.dp-setor-linha { position: relative; display: flex; align-items: center; gap: 2px; margin-left: 12px; border-radius: 8px; transition: opacity .15s ease; }
/* Traço que liga cada setor à linha guia da seção */
.dp-setor-linha::before { content: ''; position: absolute; left: -12px; top: 50%; width: 9px; height: 2px; background: var(--borda); }
.dp-setor-linha .dp-alca-setor { opacity: 0; }
.dp-setor-linha:hover .dp-alca-setor, .dp-alca-setor:focus-visible { opacity: .65; }
.dp-setor-item { flex: 1; min-width: 0; display: block; text-align: left; border: 1.5px solid transparent; background: none;
    border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px; color: #1f2937; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease; }
.dp-setor-item:hover { background: var(--fundo); border-color: var(--borda); color: var(--cor); transform: translateX(2px); }
.dp-setor-item.ativo { background: var(--fundo); border-color: var(--cor); color: var(--cor); font-weight: 700; }
.dp-setor-linha:has(.ativo)::before { background: var(--cor); }
.dp-secao-itens .dp-vazio.pequeno { margin-left: 12px; }

/* Arrastando: o que vai e para onde pode ir */
/* A cópia que fica grudada no ponteiro e o lugar de origem esmaecido */
.dp-fantasma { position: fixed; z-index: 5000; margin: 0; pointer-events: none; box-sizing: border-box; transform: rotate(1.2deg) scale(1.02);
    box-shadow: 0 18px 40px rgba(15,23,42,.22), 0 2px 6px rgba(15,23,42,.12); opacity: .97; transition: none; }
.dp-fantasma-setor { background: var(--fundo); border: 1.5px solid var(--cor); border-radius: 9px; }
.dp-fantasma-setor::before { display: none; }
.dp-fantasma-setor .dp-setor-item { color: var(--cor); font-weight: 700; transform: none; border-color: transparent; background: none; }
.dp-fantasma-setor .dp-alca-setor { opacity: 1; }
.dp-fantasma-secao { border-color: var(--cor); }
.dp-fantasma-secao .dp-alca-secao { opacity: 1; }
body.dp-arrastando .toby-tooltip { display: none !important; }   /* sem balão de dica durante o arrasto */
.dp-arrastando-origem { opacity: .35; outline: 2px dashed var(--borda); outline-offset: -2px; }
body.dp-arrastando, body.dp-arrastando * { cursor: grabbing !important; user-select: none !important; }
.dp-setor-linha { cursor: grab; touch-action: pan-y; }
.dp-alca { touch-action: none; }
.dp-secao[data-secao]:not([data-secao=""]) > .dp-secao-topo { cursor: grab; }
@media (hover: none) { .dp-setor-linha .dp-alca-setor { opacity: .6; } }
.arrastando-setor .dp-secao:not(.arrastando) { border-style: dashed; }
.dp-secao.alvo { border: 2px dashed var(--cor); background: var(--fundo); box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.dp-secao.alvo.recolhida .dp-secao-topo { border-bottom-color: var(--borda); }
.dp-secao.antes { box-shadow: 0 -4px 0 0 #245A91; }
.dp-secao.depois { box-shadow: 0 4px 0 0 #245A91; }

/* Criar: "+ Novo setor" dentro de cada seção e "+ Nova seção" no fim da lista */
.dp-add { display: flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.dp-add-setor { width: calc(100% - 12px); margin: 6px 0 0 12px; padding: 7px 10px; font-size: 12.5px; color: var(--cor); background: none; border: 1.5px dashed var(--borda); }
.dp-add-setor:hover { background: var(--fundo); border-color: var(--cor); }
.dp-add-secao { width: 100%; padding: 12px; font-size: 13.5px; color: #4B5563; background: #F9FAFB; border: 1.5px dashed #CBD5E1; border-radius: 12px; }
.dp-add-secao:hover { color: #245A91; border-color: #245A91; background: #EFF5FB; transform: translateY(-1px); }

/* Paleta de cores no lápis da seção */
.dp-paleta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dp-cor-opcao { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1.5px solid var(--borda); background: var(--fundo); border-radius: 10px;
    font: inherit; font-size: 13px; color: #1f2937; cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.dp-cor-opcao:hover { border-color: var(--cor); transform: translateY(-1px); }
.dp-cor-amostra { width: 18px; height: 18px; border-radius: 6px; background: var(--cor); flex-shrink: 0; box-shadow: inset 0 0 0 3px var(--fundo); border: 1px solid var(--borda); }
.dp-cor-opcao.escolhida { border-color: var(--cor); box-shadow: 0 0 0 3px var(--borda); font-weight: 700; color: var(--cor); }
.dp-cor-opcao.escolhida .dp-cor-nome::after { content: ' ✓'; }
@media (max-width: 480px) { .dp-paleta { grid-template-columns: repeat(2, 1fr); } }

/* Tela do setor */
.dp-setor-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dp-setor-topo h3 { margin: 0; font-size: 20px; color: #0f172a; }
.dp-setor-secao { font-size: 12px; color: #6B7280; }
.dp-bloco { padding: 18px 20px; margin-bottom: 16px; }
.dp-bloco-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dp-bloco-topo h4 { margin: 0; font-size: 15px; color: #0f172a; display: flex; align-items: center; gap: 8px; }
.dp-contagem { background: #F3F4F6; color: #6B7280; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; }

.dp-lideres { display: grid; gap: 8px; }
.dp-lider { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #E5E7EB; border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease; }
.dp-lider:hover { border-color: #BFDBFE; box-shadow: 0 4px 12px rgba(15,23,42,.05); }
.dp-lider-avatar { width: 36px; height: 36px; border-radius: 50%; background: #245A91; color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.dp-lider-info { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; color: #6B7280; }
.dp-lider-info strong { color: #0f172a; font-size: 14px; }
.dp-alerta { color: #B45309; font-size: 12px; font-weight: 600; }

.dp-tabela-wrap { overflow-x: auto; }
.dp-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.dp-tabela th { text-align: left; font-size: 11px; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px; border-bottom: 2px solid #E5E7EB; background: #F9FAFB; }
.dp-tabela td { padding: 10px; border-bottom: 1px solid #F3F4F6; color: #1f2937; }
.dp-tabela tbody tr { transition: background .12s ease; }
.dp-tabela tbody tr:hover { background: #F8FAFC; }
.dp-selo-lider { background: #DBEAFE; color: #1D4ED8; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; margin-left: 4px; }
.dp-selo-cargo { color: #B45309; }
.dp-selo-cargo.texto { background: #FEF3C7; color: #92400E; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; }

.dp-funcoes { display: grid; gap: 8px; }
.dp-funcao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid #E5E7EB; border-radius: 10px; transition: border-color .15s ease; }
.dp-funcao:hover { border-color: #BFDBFE; }
.dp-funcao-info { flex: 1; min-width: 200px; display: flex; flex-direction: column; font-size: 12.5px; color: #6B7280; }
.dp-funcao-info strong { color: #0f172a; font-size: 14px; }
.dp-funcao-nome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dp-ocupantes { font-size: 12px; color: #6B7280; background: #F3F4F6; padding: 2px 10px; border-radius: 99px; }
.dp-funcao-acoes { display: flex; gap: 6px; }
.dp-link { border: none; background: none; color: #245A91; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background .15s ease, color .15s ease; }
.dp-link:hover { background: #EFF6FF; }
.dp-link.perigo { color: #b91c1c; }
.dp-link.perigo:hover { background: #FEE2E2; }

/* Lista de escolha com busca (promover, vincular) */
.dp-busca { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1.5px solid #E5E7EB; border-radius: 8px; font: inherit; font-size: 13px; margin-bottom: 6px; transition: border-color .15s ease; }
.dp-busca:hover, .dp-busca:focus { border-color: #245A91; outline: none; }
.dp-escolha { max-height: 220px; overflow-y: auto; border: 1px solid #E5E7EB; border-radius: 8px; padding: 4px; }
.dp-escolha-item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; border: 1.5px solid transparent; background: none;
    border-radius: 6px; padding: 7px 10px; font: inherit; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.dp-escolha-item strong { font-size: 13.5px; color: #1f2937; font-weight: 600; }
.dp-escolha-item span { font-size: 12px; color: #6B7280; }
.dp-escolha-item:hover:not(:disabled) { background: #EFF6FF; border-color: #DBEAFE; }
.dp-escolha-item.escolhido { background: #EAF1F9; border-color: #245A91; }
.dp-escolha-item.escolhido strong { color: #245A91; }
.dp-escolha-item:disabled { opacity: .5; cursor: not-allowed; }
.dp-escolha-item[hidden] { display: none; }
.dp-resumo { background: #F0FDF4; border: 1px solid #BBF7D0; color: #14532D; font-size: 13px; padding: 10px 12px; border-radius: 8px; margin: 0 0 8px; }
.dp-resumo[hidden] { display: none; }
.dp-vinculos { display: grid; gap: 4px; margin-bottom: 14px; }
.dp-vinculo { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 6px; font-size: 13px; transition: background .12s ease; }
.dp-vinculo:hover { background: #F8FAFC; }

/* Interruptor (no lugar da caixa de marcar do navegador) */
.toby-switch { display: flex; align-items: flex-start; gap: 10px; width: 100%; border: 1.5px solid #E5E7EB; background: white; border-radius: 10px;
    padding: 10px 12px; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.toby-switch:hover { border-color: #245A91; background: #F8FAFC; }
.toby-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(36,90,145,.2); }
.toby-switch-trilho { flex-shrink: 0; width: 38px; height: 22px; border-radius: 99px; background: #D1D5DB; position: relative; transition: background .2s ease; margin-top: 1px; }
.toby-switch-bola { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s ease; }
.toby-switch.ligado .toby-switch-trilho { background: #245A91; }
.toby-switch.ligado .toby-switch-bola { transform: translateX(16px); }
.toby-switch-texto { display: flex; flex-direction: column; font-size: 13.5px; color: #1f2937; }
.toby-switch-texto small { font-size: 12px; color: #6B7280; margin-top: 2px; }