/* kipus-demandas.css — componentes kp-* da área (demandas de 12/10/2026). Modo noturno em [data-bs-theme=dark]. */

/* ===== Organização pessoal de Minhas Atividades (frente das atividades, dono 12/10/2026) =====
   Etiqueta colorida (kipus/etiqueta_cor), selo de prioridade (kipus/selo_prioridade), os grupos
   Atrasadas / No prazo / Sem prazo dos quadros e o arrastar da ordem manual. */

/* A cor da etiqueta é do usuário: chega como variável (`--kp-etiqueta-cor`, só `#rrggbb`) e vira
   tinta clara de fundo + borda + bolinha — o texto fica na cor do tema, legível no claro e no escuro. */
.kp-etiqueta-cor {
    --kp-etiqueta-cor: #6c757d;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .5rem;
    border: 1px solid color-mix(in srgb, var(--kp-etiqueta-cor) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--kp-etiqueta-cor) 14%, transparent);
    color: var(--bs-body-color);
    font-size: .75rem;
    line-height: 1.35;
    white-space: nowrap;
    text-decoration: none;
}
.kp-etiqueta-cor::before {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--kp-etiqueta-cor);
    flex-shrink: 0;
}
a.kp-etiqueta-cor:hover,
a.kp-etiqueta-cor:focus-visible {
    background: color-mix(in srgb, var(--kp-etiqueta-cor) 26%, transparent);
    color: var(--bs-body-color);
}
.kp-etiqueta-cor.kp-etiqueta-ativa {
    background: color-mix(in srgb, var(--kp-etiqueta-cor) 32%, transparent);
    font-weight: 600;
}

/* Prioridade pessoal: alta na cor da marca, média em âmbar, baixa apagada. */
.kp-prioridade {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}
.kp-prioridade-alta { color: var(--kp-red, #991b1b); }
.kp-prioridade-media { color: #b45309; }
.kp-prioridade-baixa { color: var(--bs-secondary-color); }
[data-bs-theme=dark] .kp-prioridade-alta { color: #f87171; }
[data-bs-theme=dark] .kp-prioridade-media { color: #fbbf24; }

/* Os GRUPOS de um quadro de abertos: uma linha-título por grupo, discreta. */
.kp-grupo-titulo > td {
    padding: .35rem .75rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.kp-grupo-titulo.kp-grupo-atrasadas > td {
    color: var(--kp-red, #991b1b);
    background: color-mix(in srgb, var(--kp-red, #991b1b) 7%, var(--bs-body-bg));
}
[data-bs-theme=dark] .kp-grupo-titulo.kp-grupo-atrasadas > td {
    color: #f87171;
    background: color-mix(in srgb, #f87171 10%, var(--bs-body-bg));
}

/* ORDEM MANUAL: a alça aparece no hover da linha; a linha arrastada fica apagada e o alvo ganha
   um fio em cima. */
.kp-arrastar {
    cursor: grab;
    color: var(--bs-tertiary-color);
    opacity: .35;
    padding: 0 .25rem;
    border: 0;
    background: transparent;
}
tr:hover > td > .kp-arrastar,
.kp-arrastar:focus-visible { opacity: 1; }
.kp-arrastando { opacity: .45; }
.kp-soltar-aqui > td { box-shadow: inset 0 2px 0 var(--kp-red, #991b1b); }
[data-bs-theme=dark] .kp-soltar-aqui > td { box-shadow: inset 0 2px 0 #f87171; }

/* Modal das etiquetas: o seletor de cor do navegador num quadradinho. */
.kp-etiqueta-paleta {
    width: 2.25rem;
    min-width: 2.25rem;
    height: calc(1.5em + .5rem + 2px);
    padding: .15rem;
}
.kp-grupo-titulo .kp-grupo-aviso {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* ===== Gestão de Demandas › Colaboradores: Conferência e rotinas (frente da gestão, dono 12/10/2026) =====
   kipus/medidor_percentual (o «% já conferido» da Conferência) e a lista de «Minhas rotinas»
   (cell MinhasRotinas, sobre a kipus/linha_compacta). */

/* MEDIDOR: rótulo à esquerda, percentual grande à direita, barra fina embaixo. A largura chega como
   variável (`--kp-medidor-feito`) — a barra não leva cor de status, é a cor da marca. */
.kp-medidor {
    padding: .6rem .85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-body-bg);
}
.kp-medidor-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}
.kp-medidor-rotulo {
    font-size: .8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}
.kp-medidor-valor {
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--bs-body-color);
}
.kp-medidor-barra {
    height: .4rem;
    margin: .35rem 0 .3rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
}
.kp-medidor-barra > span {
    display: block;
    width: var(--kp-medidor-feito, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--kp-red, #991b1b);
}
.kp-medidor-legenda {
    display: block;
    font-size: .72rem;
    color: var(--bs-secondary-color);
}
[data-bs-theme=dark] .kp-medidor-barra > span { background: #f87171; }

/* MINHAS ROTINAS: a desligada fica apagada (não some — religar é um clique). */
.kp-rotinas-vazio {
    padding: .75rem 0;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}
.kp-linha.kp-rotina--desligada > :not(.kp-linha-acoes) { opacity: .55; }