body { font: 14px/1.4 system-ui, sans-serif; margin: 0; color: #222; background: #fafafa; }
header { display: flex; gap: 16px; align-items: center; padding: 8px 16px; background: #fff; border-bottom: 1px solid #ddd; }
header form { margin-left: auto; }
main { padding: 16px; max-width: 1400px; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border: 1px solid #e3e3e3; padding: 6px 8px; text-align: left; vertical-align: top; }
th { background: #f0f0f0; }
.banner { padding: 2px 8px; border-radius: 4px; background: #eee; }
.banner.ok { background: #dff5e1; } .banner.erro { background: #fde0e0; }
/* Mesmo amarelo do .aviso.atencao: estado indeciso (teste de acesso ao BO que não concluiu). */
.banner.atencao { background: #fff6d6; }
.aviso { background: #fff6d6; padding: 8px 12px; border: 1px solid #f0d98a; }
.chip { display: inline-block; margin: 2px; padding: 2px 8px; border-radius: 12px; background: #eee; text-decoration: none; color: #222; }
.chip.ativo { outline: 2px solid #333; }
tr.produto_lancado { background: #e6f4ea; } tr.ldi_publicado { background: #eaf6ff; } tr.ldi_rascunho { background: #fff8e1; }
tr.link_sem_curso, tr.nao_interpretado { background: #fde0e0; } tr.a_confirmar { background: #f3e8ff; }
tr.recusado { color: #777; } tr.sem_resposta { background: #f7f7f7; }
.inline { display: inline; } .pequeno { font-size: 12px; padding: 1px 6px; } .obs { color: #666; }
.selo { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 10px; background: #d6e9ff; color: #14507a; }
.linha { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
pre { white-space: pre-wrap; background: #fff; padding: 8px; border: 1px solid #eee; }

/* --- barra de saúde e avisos --- */
.banner.neutro { background: #eee; color: #555; }
.aviso.erro { background: #fde0e0; border-color: #e5a0a0; }
.aviso.ok { background: #dff5e1; border-color: #9fd3a6; }
.aviso.atencao { background: #fff6d6; border-color: #f0d98a; }
.explica { color: #555; font-size: 13px; max-width: 1000px; }
code { background: #f0f0f0; padding: 0 4px; }

/* --- lista: quem segura e faixa das etapas --- */
.segurando .segura { display: inline-block; margin: 1px 4px 1px 0; padding: 1px 6px; border-radius: 10px; font-size: 12px; background: #eee; }
.segura.professor { background: #ffe8cc; } .segura.time, .segura.jordana { background: #e6e0ff; }
.segura.lancamento { background: #d6e9ff; } .segura.concluido { background: #dff5e1; } .segura.encerrado { background: #e8e8e8; color: #666; }
.faixa { white-space: nowrap; }
.faixa .marca { display: inline-block; min-width: 30px; margin-right: 2px; padding: 1px 3px; text-align: center; font-size: 12px; border: 1px solid #ddd; border-radius: 4px; background: #f7f7f7; }
.faixa .marca .ab { display: block; font-size: 10px; color: #777; }
.faixa .marca.parcial { background: #fff8e1; border-color: #f0d98a; }
.faixa .marca.completa { background: #dff5e1; border-color: #9fd3a6; }

/* --- detalhe: linha do tempo de um pedido --- */
tr.etapas-do-pedido td { padding: 4px 8px 8px; background: #fcfcfc; border-top: none; }
.linha-tempo { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; counter-reset: etapa; }
.linha-tempo .etapa { flex: 1 1 130px; min-width: 130px; padding: 4px 8px; border: 1px solid #ddd; border-radius: 6px; background: #fff; font-size: 12px; line-height: 1.3; }
.linha-tempo .etapa .simbolo { font-weight: bold; margin-right: 4px; }
.linha-tempo .etapa .rotulo { font-weight: 600; }
.linha-tempo .etapa .estado, .linha-tempo .etapa .dono, .linha-tempo .etapa .evidencia { display: block; color: #555; }
.linha-tempo .etapa .evidencia { color: #888; font-size: 11px; }
.linha-tempo .etapa.atingida { background: #e6f4ea; border-color: #9fd3a6; }
.linha-tempo .etapa.aberta { background: #fff8e1; border-color: #f0d98a; }
.linha-tempo .etapa.sem_informacao { background: #f3f3f3; border-color: #ccc; border-style: dashed; color: #666; }
.linha-tempo .etapa.encerrada { background: #ededed; border-color: #ccc; color: #777; text-decoration: line-through; }
.linha-tempo .etapa.foco { outline: 2px solid #c65d00; background: #ffe8cc; text-decoration: none; }
.linha-tempo .etapa .cobranca { display: block; color: #c65d00; font-weight: 600; }
.linha-tempo .etapa .marcacao { margin: 4px 0 0; padding: 2px 4px; border-radius: 4px; font-size: 11px; }
.linha-tempo .etapa .marcacao.cobrado { background: #eaf6ff; }
.linha-tempo .etapa .marcacao.dispensado { background: #f3f3f3; color: #666; }
.linha-tempo .etapa .marcar { display: flex; gap: 4px; margin-top: 4px; }
.linha-tempo .etapa .marcar input[name="motivo"] { width: 90px; font-size: 11px; }
.linha-tempo .etapa .observacoes { margin: 4px 0 0; font-size: 11px; }
.linha-tempo .etapa .observacoes p { margin: 2px 0; }
.linha-tempo .etapa form.anotar { display: flex; gap: 4px; margin-top: 4px; }
.linha-tempo .etapa form.anotar input[name="texto"] { flex: 1; font-size: 11px; }
.situacao { margin: 6px 0 0; font-size: 13px; }
.situacao form { margin-left: 12px; }
.cessao { color: #7a4a00; }
.produto.admin { border-bottom: 1px dashed #c65d00; }
.recados { background: #fff; border: 1px solid #e3e3e3; padding: 8px 8px 8px 28px; max-width: 1000px; }
.faixa .marca.sem_fonte { border-style: dashed; color: #666; }

/* --- detalhe: ressalvas declaradas (Tarefa 10, fase 3) --- */
.ressalvas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ressalva { border: 1px solid #ddd; border-radius: 6px; padding: 8px 12px; background: #fff; }
.ressalva .texto { font-weight: 600; margin: 0 0 4px; }
.ressalva .meta { color: #555; font-size: 12px; margin: 0 0 6px; }
.ressalva .aproximada { color: #c65d00; }
.ressalva .itens { margin: 0 0 6px; padding-left: 20px; font-size: 13px; }
.marcos-ressalva { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 0; }
.marcos-ressalva .marco { flex: 1 1 160px; min-width: 160px; padding: 4px 8px; border: 1px solid #ddd;
  border-radius: 6px; background: #fff; font-size: 12px; line-height: 1.3; }
.marcos-ressalva .marco .simbolo { font-weight: bold; margin-right: 4px; }
.marcos-ressalva .marco .estado, .marcos-ressalva .marco .evidencia { display: block; color: #555; }
.marcos-ressalva .marco .evidencia { color: #888; font-size: 11px; }
.marcos-ressalva .marco.atingida { background: #e6f4ea; border-color: #9fd3a6; }
.marcos-ressalva .marco.sem_informacao { background: #f3f3f3; border-color: #ccc; border-style: dashed; color: #666; }
.marcos-ressalva .marco.aberta { background: #fff8e1; border-color: #f0d98a; }
.ressalva .alerta { margin: 0; padding: 2px 8px; border-radius: 4px; font-size: 12px; display: inline-block; }
.ressalva .alerta.precisa_entrar_na_descricao { background: #fff6d6; }
.ressalva .alerta.pode_sair_da_descricao { background: #eaf6ff; }
.ressalva .alerta.nao_e_ressalva { background: #e8e8e8; color: #666; }
.ressalva .alerta.registro_final { background: #f3e8ff; }

/* --- cobranças: fila por dono, com o rascunho ao lado --- */
.filtros-cobranca { display: flex; gap: 16px; align-items: flex-start; margin: 8px 0 16px; }
.filtros-cobranca select { min-width: 160px; }
.bloco-cobranca { border: 1px solid #ddd; border-radius: 6px; padding: 8px 12px; margin-bottom: 16px; background: #fff; }
.bloco-cobranca h2 { font-size: 15px; margin: 0 0 8px; }
.cobranca-conteudo { display: flex; gap: 16px; flex-wrap: wrap; }
.itens-cobranca { flex: 1 1 320px; }
.rascunho { flex: 1 1 360px; }
.rascunho textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; }