/* Quarentena de ajuste (P52, 28/09/2026) — variação A escolhida pelo Sandro.
   Índigo é "em observação": cor própria, fora do vermelho/âmbar dos alertas e
   do roxo do cartão de investimento. Vermelho só para o que voltou sem melhorar. */
:root {
  --qz: #4338ca; --qz-clara: #eef0ff; --qz-borda: #c7cbf5;
  --qz-verm: #c62828; --qz-verm-clara: #fdecec; --qz-verm-borda: #f3c1c1; --qz-verde: #0c7a3e;
}

.qz-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--qz-clara); color: var(--qz); }
.qz-ic.alerta { background: var(--qz-verm-clara); color: var(--qz-verm); }

/* cartão na fileira de KPIs da Visão Geral */
/* .qz-cartao: fundo e borda iguais aos vizinhos; o índigo fica só no ícone e no número */
.qz-cartao:focus-visible { outline: 2px solid var(--qz); outline-offset: 2px; }
.qz-ic-kpi { width: 52px; height: 52px; border-radius: 50%; }
.qz-ic-kpi svg { width: 24px; height: 24px; }
.qz-cartao .qz-valor { color: var(--qz); }
.qz-linha-vermelha { font-size: .8rem; font-weight: 700; color: var(--qz-verm); }

/* painel da rede */
#qz-painel { position: fixed; inset: 0; z-index: 1000; background: rgba(17, 24, 39, .45);
  display: grid; place-items: center; padding: 16px; }
#qz-painel[hidden] { display: none; }
.qz-caixa { background: #fff; border-radius: 16px; width: min(940px, 100%); max-height: 86vh;
  display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); overflow: hidden; }
.qz-cab { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #eee; font-size: 1rem; }
.qz-cab button { margin-left: auto; font-size: 1.4rem; line-height: 1; border: 0; background: none; cursor: pointer; color: #6b7280; }
.qz-abas { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px; border-bottom: 1px solid #eee; }
.qz-abas button { font: inherit; font-size: .82rem; padding: 6px 12px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; }
.qz-abas button span { font-weight: 700; margin-left: 4px; }
.qz-abas button.on { background: var(--qz); border-color: var(--qz); color: #fff; }
.qz-abas button.vermelha:not(.on) span { color: var(--qz-verm); }
.qz-abas button.vermelha.on { background: var(--qz-verm); border-color: var(--qz-verm); }
.qz-lista { overflow-y: auto; padding: 4px 18px 16px; }
.qz-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.4fr) minmax(150px, 1fr) minmax(200px, 1.4fr);
  gap: 6px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0efe9; font-size: .8rem; }
.qz-loja { font-weight: 700; color: inherit; text-decoration: none; }
.qz-loja:hover { color: var(--qz); text-decoration: underline; }
.qz-aviso { color: #374151; }
.qz-prazo { display: flex; flex-direction: column; gap: 4px; color: #6b7280; font-size: .74rem; }
.qz-vazio { color: #6b7280; padding: 16px 0; }
@media (max-width: 720px) { .qz-row { grid-template-columns: 1fr; } }

/* peças comuns */
.qz-barra { height: 8px; border-radius: 999px; background: #e9e8e3; overflow: hidden; }
.qz-barra span { display: block; height: 100%; border-radius: 999px; background: var(--qz); }
.qz-kpi { font-size: .78rem; color: #374151; }
.qz-tend { font-weight: 700; white-space: nowrap; }
.qz-tend.boa { color: var(--qz-verde); }
.qz-tend.ruim { color: var(--qz-verm); }
.qz-tend.fraca { color: #6b7280; }
.qz-motivo { color: #6b7280; }
.qz-chip { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.qz-chip.ruim { background: var(--qz-verm-clara); color: var(--qz-verm); }
.qz-chip.ok { background: #e3f6e3; color: var(--qz-verde); }
.qz-chip.neutro { background: #f1f1ee; color: #52514e; }
.qz-meta { font-size: .72rem; color: #6b7280; }

/* Unidade 360°: bloco de cartões */
.qz-bloco { margin-top: 14px; border: 1px solid var(--qz-borda); background: var(--qz-clara); border-radius: 14px; padding: 14px; }
.qz-bloco-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.qz-bloco-cab > b { font-size: 1rem; color: var(--qz); }
.qz-conta { background: var(--qz); color: #fff; font-weight: 700; font-size: .78rem; border-radius: 999px; padding: 2px 10px; }
.qz-sub { font-size: .76rem; color: #52514e; }
.qz-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.qz-card { background: #fff; border: 1px solid var(--qz-borda); border-top: 4px solid var(--qz); border-radius: 12px;
  padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.qz-card-topo { display: flex; align-items: flex-start; gap: 8px; }
.qz-card-topo .qz-ic { width: 28px; height: 28px; }
.qz-card-titulo { font-size: .84rem; line-height: 1.3; }
/* o KPI decide; os dias ficam discretos ao lado da barra */
.qz-kpi-destaque .qz-kpi { font-size: .86rem; color: #1f2937; }
.qz-prazo-linha { display: flex; flex-direction: column; gap: 4px; }
.qz-grade .qz-card:nth-child(n+5) { display: none; }
.qz-todas .qz-grade .qz-card { display: flex; }
.qz-mais { margin-top: 10px; }
.qz-oks { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.qz-ok-linha { font-size: .78rem; }

/* os que voltaram sem melhorar: topo do "O que fazer agora" */
.qz-voltou { border: 1px solid var(--qz-verm-borda); background: var(--qz-verm-clara); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 12px; font-size: .8rem; }
.qz-voltou-cab { display: flex; align-items: center; gap: 8px; color: var(--qz-verm); font-size: .92rem; margin-bottom: 6px; }
.qz-voltou-cab .qz-ic { width: 28px; height: 28px; background: #fff; }
.qz-voltou-linha { padding: 5px 0; border-top: 1px solid #f3d4d4; }
.qz-voltou-ajuda { margin: 2px 0 6px; font-size: .78rem; color: #6b7280; }

/* selos */
.qz-selo { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 4px; font-size: .74rem;
  color: var(--qz-verm); background: var(--qz-verm-clara); border: 1px solid var(--qz-verm-borda); border-radius: 10px; padding: 2px 9px; }
.qz-selo svg { width: 13px; height: 13px; flex: none; }
.qz-selo-cab { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; vertical-align: middle; font-size: .78rem;
  font-weight: 700; color: var(--qz); background: var(--qz-clara); border: 1px solid var(--qz-borda); border-radius: 999px;
  padding: 3px 10px; text-decoration: none; }
.qz-selo-cab[hidden] { display: none; }
.qz-selo-cab svg { width: 14px; height: 14px; }

.qz-cedo { color: #6b7280; font-style: italic; }
.qz-rede { color: #6b7280; }
.qz-link { color: var(--qz); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.qz-loja-bloco { display: flex; flex-direction: column; gap: 2px; }
.qz-fim { display: flex; flex-direction: column; gap: 6px; }
.qz-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.qz-filtros { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 8px 18px; border-bottom: 1px solid #eee; font-size: .8rem; color: #374151; }
.qz-filtros select { font: inherit; padding: 3px 6px; border: 1px solid #d6d1c4; border-radius: 6px; }

/* botão e formulário do "fiz": usados na 360, na Visão Geral e em Prioridades */
.btn-qz { font: inherit; font-size: .76rem; min-height: 28px; padding: 4px 10px; border: 1px solid var(--qz-borda);
  border-radius: 8px; background: var(--qz-clara); cursor: pointer; white-space: nowrap; color: var(--qz); font-weight: 600; }
.btn-qz:hover { background: var(--qz); color: #fff; }
.btn-qz:disabled { opacity: .5; cursor: default; }
.btn-qz:focus-visible, .btn-qz-link:focus-visible { outline: 2px solid var(--qz); outline-offset: 2px; }
.btn-qz-sec { background: #fff; color: #374151; border-color: #d6d1c4; }
.btn-qz-sec:hover { background: #374151; color: #fff; }
/* alvo de 24 px (WCAG 2.2): o desfazer é o controle de erro mais importante */
.btn-qz-link { font: inherit; font-size: .74rem; min-height: 24px; min-width: 24px; padding: 4px 6px; border: 0;
  background: none; color: #2a78d6; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.qz-form { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--qz-borda); border-radius: 8px; background: var(--qz-clara);
  display: flex; flex-direction: column; gap: 6px; font-size: .78rem; }
.qz-form[hidden] { display: none; }
.qz-chips { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.qz-chips label { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; cursor: pointer; }
.qz-texto { font: inherit; font-size: .78rem; padding: 4px 8px; border: 1px solid #d6d1c4; border-radius: 6px; width: 100%; box-sizing: border-box; }
.qz-form .btn-qz { align-self: flex-start; white-space: normal; }
.qz-msg { color: #d03b3b; }

/* aviso depois da ação, com o desfazer */
#qz-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1100; display: flex; align-items: center;
  gap: 10px; max-width: calc(100% - 32px); background: #1f2937; color: #fff; border-radius: 12px; padding: 10px 14px;
  font-size: .82rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
#qz-toast[hidden] { display: none; }
#qz-toast span { display: inline-flex; align-items: center; gap: 6px; }
#qz-toast .btn-qz-link { color: #c7cbf5; }

/* Prioridades: seleção para marcar vários */
.qz-sel-rotulo { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: #52514e; min-height: 24px; cursor: pointer; }
.qz-lote { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px;
  padding: 10px 14px; border: 1px solid var(--qz-borda); background: var(--qz-clara); border-radius: 12px; font-size: .82rem; }
.qz-lote[hidden] { display: none; }
.qz-lote .qz-form { flex-basis: 100%; }
.qz-ocultas { font-size: .78rem; color: #52514e; margin-top: 10px; }