/* =====================================================================================
   EFICÁCIA CRM — Workflows
   O diagrama é SVG e traz a sua própria geometria; isto é só a moldura à volta.
   ===================================================================================== */

.wf-pagina { padding: 2px 0 6px; }

/* O pedido do dono foi «que dê só para ver nesta tela»: o cabeçalho põe o título e o
   aviso na MESMA linha para não gastar altura que o desenho precisa. */
.wf-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 16px; }
.wf-cab h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--neutral-800, #1B1618);
    margin: 0;
}
.wf-cab p { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--neutral-500, #6E6668); }

/* O aviso é discreto mas está SEMPRE lá: este ecrã mistura o que existe com o que é
   intenção, e quem o abrir tem de saber disso antes de olhar para o desenho. */
.wf-aviso {
    flex: 0 1 auto;
    display: inline-block;
    margin: 0 !important;
    padding: 5px 11px;
    border-radius: 8px;
    background: rgba(245, 158, 11, .1);
    color: #92400E !important;
    font-size: 12.5px;
}

.wf-legenda { display: flex; flex-wrap: wrap; gap: 18px; margin: 8px 0 8px; }
.wf-legenda-item strong { color: var(--neutral-800, #1B1618); }
.wf-legenda-item {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--neutral-600, #4b5563);
}
.wf-bolha {
    width: 13px; height: 13px; border-radius: 4px;
    border: 1.5px solid var(--neutral-300); display: inline-block;
}

.wf-quadro {
    border: 1px solid var(--neutral-200, #e5e7eb);
    border-radius: 14px;
    padding: 12px 16px 14px;
    background: var(--white, #fff);
}
.wf-quadro-tit {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-500, #DA0A0D);
}

/* O diagrama tem largura própria: em ecrãs estreitos ROLA, não encolhe até ficar
   ilegível. Um fluxograma espremido não se lê — e um que rola, lê-se. */
.wf-scroll { overflow-x: auto; overflow-y: hidden; }
.wf-svg { display: block; max-width: 100%; height: auto; }
@media (max-width: 900px) {
    .wf-svg { max-width: none; }        /* deixa rolar em vez de encolher */
}

/* O que falta ligar. Fora do desenho de propósito: uma caixa não tem espaço para uma
   instrução, e isto é o que alguém vai ter de FAZER. */
.wf-falta {
    margin-top: 12px;
    padding: 12px 16px 14px;
    border: 1px solid var(--neutral-200, #e5e7eb);
    border-left: 3px solid #3B82F6;
    border-radius: 12px;
    background: var(--white, #fff);
}
.wf-falta h2 { margin: 0 0 2px; font-size: 15px; font-weight: 800; color: var(--neutral-800, #1B1618); }
.wf-falta-sub { margin: 0 0 8px; font-size: 12.5px; color: var(--neutral-500, #6E6668); }
/* Os três lado a lado, e não em lista: em lista empurravam o desenho para fora do
   ecrã, e o pedido do dono foi justamente «que dê só para ver nesta tela». */
.wf-falta ul {
    margin: 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.wf-falta li {
    margin: 0; font-size: 12.5px; line-height: 1.45;
    color: var(--neutral-700, #374151);
    padding-left: 11px; border-left: 2px solid var(--neutral-200, #e5e7eb);
}
.wf-como { display: block; margin-top: 2px; font-size: 11.5px; color: var(--neutral-500, #6E6668); }
@media (max-width: 900px) {
    .wf-falta ul { grid-template-columns: 1fr; }
}