/* #423 · Mídia — só tokens do cockpit (tema claro e escuro); 3 larguras. */
.md { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; background: var(--bg, transparent); }
.md-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.md-cab h2 { margin: 0; }
.md-sub { color: var(--muted, #999); font-size: 12px; }
.md-erro { color: var(--ink-err, #ff5a5a); white-space: pre-wrap; }
.md-vazio { padding: 24px; text-align: center; color: var(--muted, #999); }

.md-contrato { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.md-meta { border: 1px solid var(--line); border-left: 3px solid var(--ink-warn, #e0b400); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; }
.md-meta.ok { border-left-color: var(--green, #35c46a); }
.md-meta b { font-size: 22px; font-variant-numeric: tabular-nums; }

.md-lote { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.md-lote.st-aguardando_ok { border-color: var(--ink-warn, #e0b400); }
.md-lote.st-erro { border-color: var(--ink-err, #ff5a5a); }
.md-lote-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.md-lote h3, .md-angulo h3 { margin: 0; font-size: 15px; }
.md-custo, .md-faltas ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }

.md-angulos { display: flex; flex-direction: column; gap: 18px; }
.md-angulo p { margin: 2px 0; }
.md-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.md-peca { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.md-peca.st-aprovado { border-left-color: var(--green, #35c46a); }
.md-peca.st-descartado { opacity: .55; }
.md-previa { background: rgba(127,127,127,.08); border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 1 / 1; }
.md-previa.feed_4x5 { aspect-ratio: 4 / 5; }
.md-previa.story_9x16, .md-previa.reels_9x16 { aspect-ratio: 9 / 16; }
.md-previa img, .md-previa video { width: 100%; height: 100%; object-fit: contain; }
.md-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.md-nome { font-size: 12px; overflow-wrap: anywhere; }
.md-estado, .md-area { font-size: 11px; padding: 1px 6px; border-radius: 10px; border: 1px solid var(--line); align-self: flex-start; }
.md-area.ok { border-color: var(--green, #35c46a); }
.md-area.falha { border-color: var(--ink-err, #ff5a5a); color: var(--ink-err, #ff5a5a); }
.md-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.md-motivo label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.md-motivo textarea { width: 100%; box-sizing: border-box; background: transparent; color: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 6px; font: inherit; }

@media (max-width: 1100px) { .md-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .md { padding: 12px; }
  .md-contrato { grid-template-columns: 1fr; }
  .md-grade { grid-template-columns: 1fr; }
}

/* #913 · cortes do vídeo bruto */
.md-brutos { margin: 16px 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.md-brutos .md-lote-cab { flex-wrap: wrap; gap: 8px; }
.md-brutos a.btn { min-height: 44px; display: inline-flex; align-items: center; }