/* ==========================================================================
   Módulo SOLICITAÇÕES (18/09/2026)

   O quadro usa as classes `cm-*` do kanban padrão (comercial/funil.css) — este
   arquivo só tem o que é próprio daqui, com o prefixo `sol-`:
   a escolha do destino, o botão de avançar na miniatura e a faixa de "entregue".
   ========================================================================== */

/* A ponte de tokens: as classes cm-* precisam das variáveis do tema, e elas só
   valem dentro de .cm-scope. Ver o mesmo bloco em funil.css. */
.page-solicitacoes #solRoot { min-height: 60vh; }


/* ─── ícone do menu ────────────────────────────────────────────────────────── */
/* Bandeja de saída com a seta para cima: o pedido que sai da sua mesa e vai
   para a área. Fica aqui, e não no style.css, seguindo o dashboards.css — o
   ícone de um módulo pertence ao CSS do módulo. */
.ni-solicitacoes {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14h5l1.5 2.5h5L16 14h5'/%3E%3Cpath d='M3 14v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5'/%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M9 6l3-3 3 3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14h5l1.5 2.5h5L16 14h5'/%3E%3Cpath d='M3 14v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5'/%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M9 6l3-3 3 3'/%3E%3C/svg%3E");
}

/* ─── escolher a área de destino ───────────────────────────────────────────── */
.sol-destinos { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.sol-destino {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e0ddd0);
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}
.sol-destino:hover { border-color: var(--accent, #6c4cd6); transform: translateX(2px); }
/* Destino travado: cinza e sem clique, igual aos cartões de hub. O time vê o
   que está previsto sem precisar perguntar duas vezes. */
.sol-destino.is-travado {
    opacity: .55;
    cursor: not-allowed;
    background: var(--surface-2, #f4f2ea);
    transform: none;
    border-color: var(--border, #e0ddd0);
}
.sol-destino-ico { font-size: 22px; line-height: 1; }
.sol-destino-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sol-destino-txt b { font-size: 14px; color: var(--ink, #2c3344); }
.sol-destino-txt span { font-size: 12px; color: var(--text-secondary, #7a7a70); line-height: 1.45; }
.sol-destino-seta { color: var(--text-secondary, #7a7a70); font-size: 14px; }

/* ─── miniatura: o botão de avançar ────────────────────────────────────────── */
/* O `»` move o card para a próxima coluna sem abrir nada — padrão do
   Construtor para todo quadro novo. Fica discreto até o mouse chegar no card. */
.sol-card .sol-av {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--text-secondary, #7a7a70);
    font-size: 13px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s, background .12s;
}
.sol-card:hover .sol-av, .sol-card:focus-within .sol-av { opacity: 1; }
.sol-card .sol-av:hover { background: var(--surface-2, #f4f2ea); color: var(--ink, #2c3344); }

.sol-chip--urg { background: #f6e7e4; color: #8c3b2c; border-color: #e6cdc7; }

/* ─── modal ────────────────────────────────────────────────────────────────── */
/* Sem o rail de e-mails do jurídico: aqui o card é curto, e uma coluna vazia à
   esquerda só empurraria o formulário para o canto. */
.sol-modal.cm-modal-split { grid-template-columns: 1fr; }

.sol-entregue {
    margin: 0 20px 10px;
    padding: 9px 12px;
    border-radius: 6px;
    background: var(--surface-2, #f4f2ea);
    border: 1px solid var(--border, #e0ddd0);
    font-size: 12px;
    color: var(--text-secondary, #7a7a70);
}
.sol-entregue b { color: var(--ink, #2c3344); }
.sol-entregue a { color: var(--accent, #6c4cd6); }

.sol-urg-btn {
    border: 1px solid var(--border, #e0ddd0);
    background: none;
    color: var(--text-secondary, #7a7a70);
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 999px;
    cursor: pointer;
}
.sol-urg-btn.is-on { background: #f6e7e4; color: #8c3b2c; border-color: #e6cdc7; }