/* PCONTROL V2: barra global de atividade em execução (layouts/partials/barra_atividade.blade.php).
   Mesma estrutura da barra de meta (barra_meta.css): card, borda esquerda 4px colorida, fonte 13px, tokens --v2-*.
   Sticky (não fixed): acompanha a rolagem na largura do conteúdo, sem cobrir o menu lateral e sem empurrar o body.
   Estados (barra_atividade.js): verde-petróleo < 30 min, .pc-ativ-alerta >= 30 min, .pc-ativ-atraso >= 60 min.
   --pc-ativ-altura (no <html>, medida pelo JS) desloca cabeçalhos sticky e âncoras para baixo da barra. */

html:has(#pc-ativ) {
    --pc-ativ-altura: 68px; /* valor inicial; o JS grava a altura real */
    scroll-padding-top: var(--pc-ativ-altura);
}

.pc-ativ-wrap {
    position: sticky;
    top: 0;
    z-index: 1020; /* = .sticky-top do Bootstrap: acima do conteúdo; abaixo do fundo do menu do funil (1030), do menu (1040) e dos modais */
    container-type: inline-size;
    padding-top: var(--v2-space-1, 4px);
    padding-bottom: var(--v2-space-3, 12px);
    background: var(--v2-bg, #eef3f3); /* o conteúdo rolado não aparece na folga em volta do card */
}

.pc-ativ {
    --pa-cor: var(--v2-primary-dark, #006d73);
    --pa-fundo: #e6f4f4;

    display: flex;
    align-items: center;
    gap: var(--v2-space-3, 12px);
    min-height: 52px;
    padding: var(--v2-space-2, 8px) var(--v2-space-2, 8px) var(--v2-space-2, 8px) var(--v2-space-4, 16px);
    background: var(--pa-fundo);
    border: 1px solid color-mix(in srgb, var(--pa-cor) 22%, transparent);
    border-left: 4px solid var(--pa-cor);
    border-radius: var(--v2-radius, 8px);
    box-shadow: var(--v2-shadow, 0 1px 3px rgba(0, 0, 0, 0.05));
    color: var(--v2-text, #1f2933);
    font-size: 13px;
    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

/* Grudada no topo (JS): sombra mais forte para separar do conteúdo que passa por baixo */
.pc-ativ-wrap.pc-ativ-fixa .pc-ativ {
    box-shadow: 0 6px 16px -6px rgba(15, 23, 42, 0.22);
}

/* Cores de "importante" e "crítico" do design system (ui-tela.md) */
.pc-ativ.pc-ativ-alerta { --pa-cor: #b54708; --pa-fundo: #fffaeb; }
.pc-ativ.pc-ativ-atraso { --pa-cor: #b42318; --pa-fundo: #fef3f2; }

.pc-ativ-ponto {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pa-cor);
    animation: pc-ativ-pulso 1.8s ease-out infinite;
}

.pc-ativ.pc-ativ-atraso .pc-ativ-ponto { animation-duration: 0.9s; }

@keyframes pc-ativ-pulso {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pa-cor) 40%, transparent); }
    70%  { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.pc-ativ-info {
    display: flex;
    align-items: baseline;
    gap: var(--v2-space-2, 8px);
    flex: 1 1 auto;
    min-width: 0;
}

.pc-ativ-rotulo {
    flex: none;
    color: var(--pa-cor);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.pc-ativ-titulo {
    min-width: 0;
    overflow: hidden;
    color: var(--v2-text, #1f2933);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-ativ-titulo:hover { color: var(--pa-cor); text-decoration: underline; }

.pc-ativ-com {
    color: var(--v2-text-muted, #52606d);
    font-weight: 400;
}

.pc-ativ-tempo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 4px 10px;
    background: var(--v2-surface, #fff);
    border: 1px solid var(--pa-cor);
    border-radius: 999px;
    color: var(--pa-cor);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pc-ativ-dica {
    flex: none;
    color: var(--pa-cor);
    font-weight: 600;
    white-space: nowrap;
}

.pc-ativ-dica[hidden] { display: none; }

.pc-ativ-concluir { flex: none; }

.pc-ativ a:focus-visible,
.pc-ativ button:focus-visible {
    outline: 3px solid var(--v2-primary, #008b8b);
    outline-offset: 2px;
}

/* Pipeline em tela cheia (.pc-page é coluna flex): a barra não encolhe */
.pipeline-fullscreen .pc-ativ-wrap { flex: none; }

/* Largura do conteúdo (não da janela: o menu lateral ocupa até 296px).
   Some primeiro o que é secundário: aviso → rótulo → "com {lead}". Cor + cronômetro continuam. */
@container (max-width: 860px) {
    .pc-ativ-dica { display: none !important; }
}

@container (max-width: 620px) {
    .pc-ativ { gap: var(--v2-space-2, 8px); padding-left: var(--v2-space-3, 12px); }
    .pc-ativ-rotulo { display: none; }
}

@container (max-width: 440px) {
    .pc-ativ-com { display: none; }
    .pc-ativ-tempo { padding: 4px 8px; font-size: 13px; }
    .pc-ativ-tempo .fa-clock { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pc-ativ, .pc-ativ-ponto { transition: none; animation: none; }
}

@media print {
    .pc-ativ-wrap { display: none; }
}