/* ===========================================================================
   Card de demanda — v3, enxuto
   ---------------------------------------------------------------------------
   Substitui o visual antigo (chips coloridos, gradientes, halo pulsando,
   entrada deslizante e pilha de baloes). Ver o cabecalho de
   partials/card-demanda.php para o porque de cada decisao.

   Regra que organiza o arquivo: UM acento por card — a prioridade, na var
   --prio. Todo o resto e tom neutro. Cor extra so aparece quando significa
   urgencia de verdade (prazo vencido, parada longa).
   =========================================================================== */

.dbcard {
    position: relative;
    display: block;
    padding: 10px 12px 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .028);
    border: 1px solid rgba(255, 255, 255, .07);
    color: inherit;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.dbcard + .dbcard { margin-top: 8px; }

.dbcard:hover {
    background: rgba(255, 255, 255, .055);
    border-color: rgba(255, 255, 255, .14);
    transform: translateY(-1px);
}

/* O filete da PRIORIDADE. Unico acento forte do card — a coluna do kanban ja
   diz o status, entao a tinta vai para o que ela nao carrega. */
.dbcard::before {
    content: '';
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: var(--prio, #52525b);
}

.dbcard.is-compacto { padding: 8px 10px 8px 12px; }

/* ─── linha 1: codigo + data ─────────────────────────────────────────────── */
.dbcard-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}
.dbcard-codigo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(228, 228, 231, .42);
    font-variant-numeric: tabular-nums;
}
/* Precisa de acao: ponto solido. Substitui o halo que pulsava — sinal parado
   que voce nota vale mais que sinal animado que voce aprende a ignorar. */
.dbcard-acao {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, .18);
    flex-shrink: 0;
}
/* A data que faltava. Sempre visivel, alinhada em coluna. */
.dbcard-data {
    font-size: 10px;
    font-weight: 600;
    color: rgba(228, 228, 231, .5);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ─── titulo ─────────────────────────────────────────────────────────────── */
.dbcard-titulo {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.32;
    color: rgba(244, 244, 245, .93);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dbcard.is-compacto .dbcard-titulo { font-size: 12px; }

/* ─── linha de contexto: tipo · prioridade · solicitante ─────────────────── */
.dbcard-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-size: 10.5px;
    color: rgba(212, 212, 216, .5);
    min-width: 0;
}
.dbcard-meta > i { font-size: 9px; opacity: .55; flex-shrink: 0; }
/* A prioridade herda a cor do filete: mesma informacao, dita duas vezes sem
   custo de tinta nova. */
.dbcard-prio {
    color: var(--prio, #a1a1aa);
    font-weight: 600;
    text-transform: lowercase;
    flex-shrink: 0;
}
.dbcard-sep { opacity: .3; flex-shrink: 0; }
/* Rotulo do chamado ("Automacao", "Melhoria") quando diz algo. "Chamado" some:
   nao informa nada num sistema de chamados. */
.dbcard-rotulo {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .06);
    color: rgba(212, 212, 216, .62);
    flex-shrink: 0;
}
/* Origem: veio de um chamado de TI do LosungWeb. Substitui o "[Chamado TI]"
   que ocupava 13 caracteres do titulo em 160 demandas. */
.dbcard-origem { font-size: 8px; opacity: .38; margin-left: 1px; }
.dbcard-solicitante {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ─── progresso: uma linha fina, sem gradiente ───────────────────────────── */
.dbcard-progresso {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
}
.dbcard-progresso-trilho {
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}
.dbcard-progresso-trilho > span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: rgba(228, 228, 231, .55);
}
.dbcard-progresso-num {
    font-size: 9px;
    color: rgba(212, 212, 216, .45);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ─── rodape: sinais + pessoas ───────────────────────────────────────────── */
.dbcard-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}
.dbcard-sinais {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    flex-wrap: wrap;
}
.dbcard-sinal {
    display: inline-flex;
    align-items: center;
    gap: 3.5px;
    font-size: 10px;
    color: rgba(212, 212, 216, .48);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dbcard-sinal > i { font-size: 9px; opacity: .8; }

/* Cor SO onde significa urgencia. Fora daqui, tudo neutro. */
.dbcard-sinal.e-warn,
.dbcard-sinal.e-soon     { color: #fbbf24; }
.dbcard-sinal.e-danger,
.dbcard-sinal.e-overdue  { color: #f87171; font-weight: 600; }

/* ─── avatares: chapados, sem gradiente ──────────────────────────────────── */
.dbcard-pessoas {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.dbcard-pessoas > .dbcard-avatar + .dbcard-avatar { margin-left: -5px; }
.dbcard-avatar {
    width: 19px; height: 19px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: var(--a, #52525b);
    box-shadow: 0 0 0 1.5px #17171b;
}
.dbcard-avatar.e-resto { background: #3f3f46; color: #d4d4d8; }

/* ─── botao de acao rapida ───────────────────────────────────────────────── */
.dbcard-botao {
    position: absolute;
    top: 7px; right: 7px;
    width: 21px; height: 21px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    border: 1px solid transparent;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease;
}
/* So aparece no hover: e atalho, nao informacao — nao deve competir com a
   leitura do card. Em toque, onde nao ha hover, fica sempre visivel. */
.dbcard:hover .dbcard-botao,
.dbcard-botao:focus-visible { opacity: 1; }
@media (hover: none) { .dbcard-botao { opacity: 1; } }

.dbcard-botao.e-despachar {
    background: rgba(34, 211, 238, .16);
    border-color: rgba(34, 211, 238, .38);
    color: #67e8f9;
}
.dbcard-botao.e-despachar:hover { background: rgba(34, 211, 238, .28); }
.dbcard-botao.e-recusar {
    background: rgba(248, 113, 113, .14);
    border-color: rgba(248, 113, 113, .34);
    color: #fca5a5;
}
.dbcard-botao.e-recusar:hover { background: rgba(248, 113, 113, .26); }

/* Quando ha botao, o titulo nao passa por baixo dele. */
.dbcard:has(.dbcard-botao) .dbcard-topo { padding-right: 24px; }

/* ─── tema claro ─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .dbcard {
        background: #fff;
        border-color: rgba(0, 0, 0, .09);
    }
    :root:not([data-theme="dark"]) .dbcard:hover { background: #fafafa; }
    :root:not([data-theme="dark"]) .dbcard-titulo      { color: #18181b; }
    :root:not([data-theme="dark"]) .dbcard-codigo,
    :root:not([data-theme="dark"]) .dbcard-data,
    :root:not([data-theme="dark"]) .dbcard-meta,
    :root:not([data-theme="dark"]) .dbcard-sinal       { color: #71717a; }
    :root:not([data-theme="dark"]) .dbcard-avatar      { box-shadow: 0 0 0 1.5px #fff; }
}

/* ─── chegada ao vivo, domada ────────────────────────────────────────────────
   O pulse-engine.js marca com .pulse-incoming a demanda que acabou de chegar.
   O efeito herdado do motion.css e `infinite` e so para quando alguem
   interage — ou seja, um card esquecido pulsa a tarde inteira. Movimento
   perpetuo deixa de ser aviso e vira ruido de fundo.
   Aqui ele avisa TRES vezes e para. E anima transform/opacity num ::after, nao
   box-shadow: sombra e repintada a cada quadro pela CPU. */
.dbcard.pulse-incoming { animation: none; }
.dbcard.pulse-incoming::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 11px;
    border: 1.5px solid var(--prio, #22d3ee);
    pointer-events: none;
    animation: dbcard-chegou 1.1s ease-out 3;
}
@keyframes dbcard-chegou {
    0%   { opacity: .85; transform: scale(1); }
    70%  { opacity: 0;   transform: scale(1.035); }
    100% { opacity: 0;   transform: scale(1.035); }
}

/* A entrada deslizante some: 20 cards subindo e desfocando a cada carga da
   tela e movimento que nao informa nada — so atrasa a leitura. */
.dbcard.slide-in { animation: none; }

/* Quem pediu menos movimento nao recebe movimento. */
@media (prefers-reduced-motion: reduce) {
    .dbcard, .dbcard-botao { transition: none; }
    .dbcard:hover { transform: none; }
    .dbcard.pulse-incoming::after { animation: none; opacity: .7; }
}