/*
    O diagrama da cadeia de aprovação.

    Mesma linguagem do diagrama do fluxo — caixa branca, barra de cor à
    esquerda, banda tracejada para o que corre ao mesmo tempo — porque é a mesma
    pergunta noutra escala. A cor é a laranja da aprovação e não o azul do
    fluxo: assim vê-se de que ecrã se trata sem ler o título.
*/

.i9-aprovacoes {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.i9-aprovacoes__tela {
    overflow: auto;
    padding: .25rem;
    border: 1px solid var(--i9-line, rgba(20, 50, 95, .11));
    border-radius: var(--i9-radius, 16px);
    background: var(--i9-card, #fff);
}

.i9-aprovacoes__svg {
    display: block;
    margin: 0 auto;
}

/* ---- a linha de acrescentar --------------------------------------------- */

.i9-aprovacoes__acrescentar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.i9-aprovacoes__grupo-novo {
    flex: 1 1 200px;
    min-width: 170px;
}

.i9-aprovacoes__numero {
    width: 5rem;
    flex: 0 0 auto;
}

.i9-aprovacoes__rotulo {
    font-size: .75rem;
    color: var(--i9-muted, #6b7a90);
}

/* ---- caixas ------------------------------------------------------------- */

.i9-aprovacoes__grupo {
    cursor: pointer;
}

.i9-aprovacoes__caixa {
    fill: var(--i9-card, #fff);
    stroke: var(--i9-line, rgba(20, 50, 95, .18));
    stroke-width: 1;
}

.i9-aprovacoes__grupo:hover .i9-aprovacoes__caixa {
    stroke: var(--i9-warn, #d08700);
    stroke-width: 1.6;
}

.i9-aprovacoes__barra {
    fill: var(--i9-warn, #d08700);
}

/*
    Um grupo que pede mais assinaturas do que tem gente nunca aprova. Vai a
    vermelho porque não é uma opção de parametrização: é um processo que fica
    parado para sempre, e o motor não o impede.
*/
.i9-aprovacoes__grupo--impossivel .i9-aprovacoes__barra {
    fill: var(--i9-danger, #c4453b);
}

.i9-aprovacoes__grupo--impossivel .i9-aprovacoes__caixa {
    stroke: var(--i9-danger, #c4453b);
}

.i9-aprovacoes__nome {
    font-size: 13px;
    font-weight: 600;
    fill: var(--i9-ink, #12233d);
}

.i9-aprovacoes__legenda {
    font-size: 11px;
    fill: var(--i9-muted, #6b7a90);
}

/*
    O x de tirar o grupo do degrau. Como no diagrama do fluxo: so' aparece com o
    rato em cima, para um ecra' com cinco grupos nao ser cinco circulos
    vermelhos permanentes.
*/
.i9-aprovacoes__tirar {
    opacity: 0;
    cursor: pointer;
    transition: opacity .12s ease-in-out;
}

.i9-aprovacoes__grupo:hover .i9-aprovacoes__tirar {
    opacity: 1;
}

.i9-aprovacoes__tirar circle {
    fill: var(--i9-danger, #c4453b);
}

.i9-aprovacoes__tirar path {
    fill: none;
    stroke: var(--i9-card, #fff);
    stroke-width: 2;
    stroke-linecap: round;
}

/* ---- setas e bandas ----------------------------------------------------- */

.i9-aprovacoes__seta {
    fill: none;
    stroke: var(--i9-muted, #6b7a90);
    stroke-width: 1.6;
}

.i9-aprovacoes__depois {
    font-size: 11px;
    font-style: italic;
    fill: var(--i9-muted, #6b7a90);
}

.i9-aprovacoes__banda rect {
    fill: var(--i9-warn-softer, rgba(208, 135, 0, .06));
    stroke: var(--i9-line, rgba(20, 50, 95, .18));
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.i9-aprovacoes__banda text {
    font-size: 11px;
    fill: var(--i9-muted, #6b7a90);
}

.i9-aprovacoes__condicao rect {
    fill: var(--i9-card, #fff);
    stroke: var(--i9-warn, #d08700);
    stroke-width: 1;
}

.i9-aprovacoes__condicao text {
    font-size: 11px;
    font-style: italic;
    fill: var(--i9-warn, #d08700);
}

.i9-aprovacoes__condicao {
    cursor: pointer;
}

/*
    O degrau que corre sempre. Esbatido: tem de se ver que ha' ali onde carregar
    para lhe por uma condicao, sem competir com as condicoes que existem mesmo.
*/
.i9-aprovacoes__condicao--vazia rect {
    stroke: var(--i9-line, rgba(20, 50, 95, .3));
    stroke-dasharray: 3 2;
    opacity: .5;
}

.i9-aprovacoes__condicao--vazia text {
    fill: var(--i9-muted, #6b7a90);
    opacity: .6;
}

.i9-aprovacoes__condicao--vazia:hover rect,
.i9-aprovacoes__condicao--vazia:hover text {
    opacity: 1;
}

/* ---- caminhos ------------------------------------------------------------ */

/*
    O topo de cada caminho: nome e condição. O fundo só se vê no caminho a que
    os botões de cima acrescentam, e só quando há mais de um.
*/
.i9-aprovacoes__cabecalho {
    cursor: pointer;
}

.i9-aprovacoes__cabecalho-fundo {
    fill: transparent;
    stroke: none;
}

.i9-aprovacoes__cabecalho--alvo .i9-aprovacoes__cabecalho-fundo {
    fill: var(--i9-warn-softer, rgba(208, 135, 0, .06));
    stroke: var(--i9-warn, #d08700);
    stroke-width: 1;
}

.i9-aprovacoes__caminho-nome {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    fill: var(--i9-ink, #12233d);
}

.i9-aprovacoes__ou line {
    stroke: var(--i9-line, rgba(20, 50, 95, .18));
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.i9-aprovacoes__ou text {
    font-size: 11px;
    font-style: italic;
    fill: var(--i9-muted, #6b7a90);
    paint-order: stroke;
    stroke: var(--i9-card, #fff);
    stroke-width: 6px;
}

.i9-aprovacoes__dispensa {
    font-size: 12px;
    font-style: italic;
    fill: var(--i9-muted, #6b7a90);
}

.i9-aprovacoes__alerta circle {
    fill: var(--i9-danger, #c4453b);
}

.i9-aprovacoes__alerta path {
    fill: none;
    stroke: var(--i9-card, #fff);
    stroke-width: 2;
    stroke-linecap: round;
}

/* ---- texto -------------------------------------------------------------- */

.i9-aprovacoes__rodape {
    margin: 0;
    font-size: .75rem;
    color: var(--i9-muted, #6b7a90);
}

/*
    Sem regras, o motor dá a atividade por aprovada assim que ela corre. É uma
    decisão silenciosa e vale a pena dizê-la: quem olhasse para um ecrã vazio
    ficava sem saber se faltava parametrizar ou se era mesmo para passar.
*/
.i9-aprovacoes__sozinha {
    margin: 0;
    padding: .6rem .8rem;
    border-radius: var(--i9-radius-sm, 10px);
    background: var(--i9-accent-softer, rgba(47, 111, 184, .05));
    font-size: .75rem;
    color: var(--i9-ink, #12233d);
}

.i9-aprovacoes__aviso {
    margin: 0;
    font-size: .75rem;
    color: var(--i9-danger, #c4453b);
}