/* card-modal.css — modal do card no Pipeline (card Logiccos/quadro#113). Cores só pelas variáveis
   --st-* da paleta Obsidian Velocity (pipeline-stitch.css), então o botão Tema vale aqui também. */
.modal-card {
  --mc-fundo: rgb(var(--st-surface-container-low));
  --mc-borda: rgb(var(--st-outline-variant) / 0.5);
  --mc-texto: rgb(var(--st-on-surface));
  --mc-suave: rgb(var(--st-on-surface-variant));
  --mc-destaque: rgb(var(--st-primary-container));
  background: var(--mc-fundo); color: var(--mc-texto); border: 1px solid var(--mc-borda); border-radius: 0.75rem;
  padding: 0; margin: auto; width: calc(100% - 1.5rem); max-width: 880px; height: min(760px, calc(100% - 1.5rem));
  overflow: hidden; display: none; flex-direction: column; box-shadow: 0 24px 64px -12px rgb(0 0 0 / 0.6);
}
.modal-card[open] { display: flex; animation: mc-entrar 180ms ease-out; }
.modal-card::backdrop { background: rgb(0 0 0 / 0.6); backdrop-filter: blur(4px); }
@keyframes mc-entrar { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

.mc-cabecalho { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--mc-borda); flex-shrink: 0; }
.mc-cabecalho-texto { min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.mc-cabecalho h2 { font-size: 1.15rem; font-weight: 600; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
.mc-linha-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mc-ref { font-family: "JetBrains Mono", monospace; font-size: 0.8rem; color: var(--mc-suave); }
.mc-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0.5rem; border-radius: 0.25rem; font-family: "JetBrains Mono", monospace; font-size: 0.7rem;
  background: rgb(var(--st-surface-container-highest)); border: 1px solid var(--mc-borda); color: var(--mc-texto); }
.mc-chip--coluna { color: var(--mc-destaque); }
.mc-chip--vivo { color: rgb(var(--st-secondary)); }
.mc-pulso, .mc-ponto-vivo { width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: rgb(var(--st-secondary)); animation: mc-pulsar 1.4s ease-in-out infinite; }
.mc-ponto-vivo { display: inline-block; margin-left: 0.25rem; }
@keyframes mc-pulsar { 50% { opacity: 0.3; } }
.mc-etiquetas { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mc-etiquetas:empty { display: none; }
.mc-responsavel { margin: 0; font-size: 0.8rem; color: var(--mc-suave); }
.mc-cabecalho-acoes { display: flex; align-items: flex-start; gap: 0.5rem; flex-shrink: 0; }
.mc-link-secundario { font-size: 0.75rem; color: var(--mc-suave); text-decoration: underline; padding-top: 0.6rem; }
.mc-link-secundario:hover { color: var(--mc-texto); }
.modal-card .botao-fechar-modal { color: var(--mc-suave); }
.modal-card .botao-fechar-modal:hover { background: rgb(var(--st-surface-container-high)); color: var(--mc-texto); }

.mc-abas { display: flex; gap: 0.25rem; padding: 0 1rem; border-bottom: 1px solid var(--mc-borda); flex-shrink: 0; overflow-x: auto; }
.mc-aba { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.7rem 0.8rem; font-size: 0.85rem; color: var(--mc-suave); cursor: pointer; white-space: nowrap; }
.mc-aba:hover { color: var(--mc-texto); }
.mc-aba[aria-current="true"] { color: var(--mc-destaque); border-bottom-color: var(--mc-destaque); font-weight: 600; }
.mc-contagem { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; opacity: 0.8; }

.mc-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1.25rem; }
.mc-painel[hidden], .mc-aviso[hidden] { display: none; }
.mc-texto { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 0.9rem; line-height: 1.55; margin: 0; }
.mc-aviso { font-size: 0.85rem; color: var(--mc-suave); margin: 0.5rem 0; }
.mc-aviso--erro { color: rgb(var(--st-error)); }
.mc-subtitulo { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mc-suave); margin: 1rem 0 0.5rem; }
.mc-subtitulo:first-child { margin-top: 0; }
.mc-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.mc-item { border: 1px solid var(--mc-borda); border-radius: 0.5rem; padding: 0.6rem 0.8rem; background: rgb(var(--st-surface-container) / 0.6); }
.mc-item-topo { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; color: var(--mc-suave); margin-bottom: 0.3rem; }
.mc-etapa { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.88rem; }
.mc-etapa--feita { color: var(--mc-suave); text-decoration: line-through; }
.mc-etapa-marca { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: 0.15rem; border-radius: 0.2rem; border: 1px solid var(--mc-suave); display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; }
.mc-etapa--feita .mc-etapa-marca { background: rgb(var(--st-secondary)); border-color: rgb(var(--st-secondary)); color: rgb(var(--st-on-secondary)); }

.mc-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.mc-form label { font-size: 0.8rem; color: var(--mc-suave); }
.mc-form textarea, .mc-rodape select, .mc-rodape input[type="text"] { padding: 0.5rem 0.7rem; font: inherit; font-size: 0.9rem; border-radius: 0.375rem; }
.mc-form textarea { resize: vertical; min-height: 4.5rem; }
.mc-botao { padding: 0.5rem 1rem; border-radius: 0.375rem; border: 1px solid var(--mc-destaque); background: rgb(var(--st-primary-container) / 0.15); color: var(--mc-destaque); font-size: 0.85rem; font-weight: 600; cursor: pointer; align-self: flex-start; }
.mc-botao:hover:not(:disabled) { background: rgb(var(--st-primary-container) / 0.3); }
.mc-botao:disabled { opacity: 0.5; cursor: wait; }
.mc-botao--secundario { border-color: var(--mc-borda); background: transparent; color: var(--mc-texto); }
.mc-botao--perigo { border-color: rgb(var(--st-error)); color: rgb(var(--st-error)); background: rgb(var(--st-error) / 0.12); }

.mc-sessao dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; margin: 0 0 0.75rem; padding: 0.75rem; border: 1px solid var(--mc-borda); border-radius: 0.5rem; background: rgb(var(--st-surface-container-lowest) / 0.6); }
.mc-sessao[hidden] { display: none; }
.mc-sessao dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mc-suave); }
.mc-sessao dd { margin: 0.1rem 0 0; font-family: "JetBrains Mono", monospace; font-size: 0.82rem; overflow-wrap: anywhere; }
.mc-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.mc-passo { display: grid; grid-template-columns: auto auto 1fr; gap: 0.6rem; align-items: baseline; font-size: 0.85rem; padding: 0.35rem 0.5rem; border-left: 2px solid var(--mc-borda); }
.mc-passo--novo { animation: mc-destacar 1.2s ease-out; }
@keyframes mc-destacar { from { background: rgb(var(--st-primary-container) / 0.2); } to { background: transparent; } }
.mc-passo-hora { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; color: var(--mc-suave); }
.mc-passo-tipo { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; color: var(--mc-destaque); text-transform: uppercase; }
.mc-passo-texto { overflow-wrap: anywhere; }
.mc-passo-arquivo { display: block; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; color: var(--mc-suave); }

.mc-rodape { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--mc-borda); background: rgb(var(--st-surface-container-lowest) / 0.5); }
.mc-acao-mover, .mc-acao-veredito { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mc-acao-veredito[hidden], .mc-rodape [hidden] { display: none; }
.mc-acao-mover label { font-size: 0.8rem; color: var(--mc-suave); }
.mc-status { margin: 0; font-size: 0.8rem; color: var(--mc-suave); flex: 1 1 100%; min-height: 1em; }
.mc-status--ok { color: rgb(var(--st-secondary)); }
.mc-status--erro { color: rgb(var(--st-error)); }

@media (max-width: 640px) {
  .modal-card { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; border: 0; }
  .mc-cabecalho { padding: 0.75rem; }
  .mc-corpo { padding: 0.75rem; }
  .mc-rodape { padding: 0.6rem 0.75rem; }
  .mc-passo { grid-template-columns: auto 1fr; }
  .mc-passo-hora { grid-column: 1 / -1; }
}