/* ============================================================
   OPERAÇÃO — a tela onde o dono do negócio trabalha

   Uma decisão governa o visual: cor comunica DE QUEM É A VEZ.
   Âmbar = nossa vez (tem conserto agora). Cinza = esperando alguém.
   Verde = concluído. Vermelho é reservado para o que passou do prazo —
   se tudo fosse vermelho, nada seria.
   ============================================================ */

.op { max-width: 980px; }
.op h2 { margin: 0 0 16px; font-size: 24px; }
.op h3 { margin: 34px 0 12px; font-size: 18px; display: flex; align-items: center; gap: 9px; }
.op-contador {
  background: var(--marca, #f5b301); color: #161d29;
  font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
}

/* --- selos do topo --- */
.op-selos { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-bottom: 22px; }
.op-selo {
  background: var(--superficie, #fff); border: 1px solid var(--borda, #e3e6ec);
  border-radius: 11px; padding: 13px 15px; border-left: 4px solid;
}
.op-valor { display: block; font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.op-rot { display: block; font-size: 12px; color: var(--texto-suave, #5b6472); margin-top: 5px; }
.op-selo.op-agir   { border-left-color: #e0a020; }
.op-selo.op-alerta { border-left-color: #b3261e; }
.op-selo.op-espera { border-left-color: #8b95a5; }
.op-selo.op-pronto { border-left-color: #2f9e50; }
.op-agir .op-valor   { color: #8a5a00; }
.op-alerta .op-valor { color: #b3261e; }
.op-pronto .op-valor { color: #1f6b38; }

/* --- avisos de e-mail --- */
.op-alerta, .op-email {
  border-radius: 11px; padding: 14px 17px; margin-bottom: 22px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  justify-content: space-between;
}
.op-alerta { background: #fdf0ef; border-left: 4px solid #b3261e; display: block; }
.op-alerta strong { color: #b3261e; display: block; margin-bottom: 5px; }
.op-alerta p { margin: 0; font-size: 14px; line-height: 1.5; }
.op-email { background: #f2f6fd; border-left: 4px solid #4a7fd4; font-size: 14px; }
.op-email button, .op-acoes button, .op-mover button, .op-confirmar-recusa {
  min-height: 40px; padding: 9px 18px; border-radius: 8px; border: 0;
  font-size: 15px; font-weight: 700; cursor: pointer;
  background: var(--marca, #f5b301); color: #161d29;
}
button:disabled { background: #dfe3ea; color: #98a1ae; cursor: not-allowed; }

/* --- cartão de conferência --- */
.op-lista { display: grid; gap: 13px; }
.op-card, .op-proto {
  background: var(--superficie, #fff); border: 1px solid var(--borda, #e3e6ec);
  border-radius: 12px; padding: 16px; border-left: 4px solid #8b95a5;
}
.op-card-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.op-card-topo strong { font-size: 16px; }
.op-tipo { display: block; font-size: 13px; color: var(--texto-suave, #5b6472); margin-top: 2px; }
.op-meta { font-size: 12px; color: var(--texto-suave, #5b6472); text-align: right; white-space: nowrap; }

.op-conferencia { display: grid; gap: 14px; }
@media (min-width: 640px) { .op-conferencia { grid-template-columns: 180px 1fr; } }
.op-foto {
  display: flex; align-items: center; justify-content: center; min-height: 96px;
  background: var(--fundo-suave, #f7f9fc); border: 2px dashed var(--borda-forte, #c3cad6);
  border-radius: 10px; text-decoration: none; color: var(--marca-escura, #1b3a6b);
  font-size: 14px; font-weight: 600;
}
.op-foto:hover { border-color: var(--marca, #f5b301); background: #fffdf5; }

.op-extraido dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; font-size: 14px; }
.op-extraido dt { color: var(--texto-suave, #5b6472); }
.op-extraido dd { margin: 0; font-weight: 600; }
.op-divergente { background: #fff8e8; border-left: 3px solid #e0a020; border-radius: 7px; padding: 9px 12px; margin: 11px 0 0; font-size: 13px; line-height: 1.45; }
.op-exigencia { background: #f2f6fd; border-left: 3px solid #4a7fd4; border-radius: 7px; padding: 9px 12px; margin: 11px 0 0; font-size: 13px; }
.op-vazio { color: var(--texto-suave, #5b6472); font-size: 14px; margin: 0; }
.op-vazio-bloco {
  background: var(--fundo-suave, #f7f9fc); border-radius: 10px; padding: 20px;
  color: var(--texto-suave, #5b6472); font-size: 15px; line-height: 1.55; margin: 0;
}

.op-acoes { display: flex; gap: 9px; margin-top: 15px; }
.op-recusar { background: transparent !important; color: #b3261e !important; border: 1px solid #e9c3c0 !important; }
.op-motivo { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--borda, #e3e6ec); }
.op-motivo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 9px; }
.op-motivo textarea {
  display: block; width: 100%; margin-top: 5px; padding: 10px 12px;
  border: 1px solid var(--borda-forte, #c3cad6); border-radius: 8px;
  font-size: 15px; font-family: inherit; font-weight: 400; resize: vertical;
}
.op-nota { font-size: 12px; color: var(--texto-suave, #5b6472); margin: 9px 0 0; line-height: 1.45; }

/* --- protocolo: a borda diz de quem é a vez --- */
.op-proto.op-agir   { border-left-color: #e0a020; }
.op-proto.op-espera { border-left-color: #8b95a5; }
.op-proto.op-pronto { border-left-color: #2f9e50; }
.op-proto.op-travado { border-left-color: #b3261e; background: #fffcfc; }
.op-proto-dados { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 12px; font-size: 14px; }
.op-proto-dados dt { color: var(--texto-suave, #5b6472); }
.op-proto-dados dd { margin: 0; font-weight: 600; }

.op-mover { display: grid; gap: 8px; margin-top: 13px; }
@media (min-width: 720px) { .op-mover { grid-template-columns: 1fr 1fr 1.4fr auto; align-items: center; } }
.op-mover select, .op-mover input {
  padding: 10px 12px; border: 1px solid var(--borda-forte, #c3cad6);
  border-radius: 8px; font-size: 15px; min-height: 40px;
  background: #fff; color: inherit; font-family: inherit;
}
.op-erro { color: #b3261e; font-size: 13px; margin: 10px 0 0; }

/* ============================================================
   OS DOIS NÚMEROS DA COMISSÃO

   Cor separa o que é dinheiro do que é projeção. Verde só para o que
   tem base contratual (cliente ativado); cinza para a projeção.
   Pintar projeção de verde é como se compromete despesa contra receita
   que não entrou.
   ============================================================ */
.kpi-dinheiro strong { color: #1f6b38; }
.kpi-projecao strong { color: var(--texto-suave, #5b6472); }
.kpi-projecao span { font-style: italic; }