/* CRM (T034): lista por etapa, fila, detalhe, folhas. Mobile-first: base 360 px. Sem style inline (CSP). */

.cartao-op { position: relative; display: flex; flex-direction: column; gap: var(--mm-e1); }
.cartao-op:focus-within { outline: 3px solid var(--mm-foco); outline-offset: 2px; }
.cartao-op a:focus-visible { outline: none; }
.cartao-op-titulo { font-size: var(--mm-t-lg); margin: 0; overflow-wrap: anywhere; }
.cartao-op-titulo a { color: var(--mm-texto); text-decoration: none; display: block; min-height: var(--mm-alvo); padding: var(--mm-e2) 0; }
/* O cartão inteiro é o alvo do toque; os botões de ação ficam acima do link. */
.cartao-op-titulo a::after { content: ""; position: absolute; inset: 0; }
.cartao-op-itens { margin: 0; overflow-wrap: anywhere; }
.cartao-op .chips { margin: var(--mm-e1) 0; }
.cartao-op .legenda { margin: 0; }
.cartao-op-acoes { position: relative; z-index: 1; margin-top: var(--mm-e3); }

.filtros-crm .campo input[type="search"], .filtros-crm .campo select { min-width: 0; }
.filtros-crm .campo select { width: 100%; min-height: 48px; padding: 0 var(--mm-e3); font: inherit; color: var(--mm-texto); background: var(--mm-superficie); border: 2px solid var(--mm-borda); border-radius: var(--mm-raio-md); }
.chips-tipo + .mais-filtros, .mais-filtros + .total { margin-top: 0; }

/* Detalhe */
.titulo-op { overflow-wrap: anywhere; margin-bottom: var(--mm-e2); }
.topo-resp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mm-e2); margin-bottom: var(--mm-e2); }
.topo-resp p { margin: 0; overflow-wrap: anywhere; }
.topo-resp .botao { flex: 0 1 auto; }
.interno > .cartao { margin-bottom: var(--mm-e4); }
.dados-crm { margin: 0; display: grid; gap: var(--mm-e2); }
.dado-crm { display: flex; flex-wrap: wrap; gap: var(--mm-e1) var(--mm-e3); }
.dado-crm dt { font-weight: 600; min-width: 80px; }
.dado-crm dd { margin: 0; overflow-wrap: anywhere; }
.linha-tempo { list-style: none; margin: 0 0 var(--mm-e3); padding: 0; display: grid; gap: var(--mm-e3); }
.linha-tempo li { padding-left: var(--mm-e3); border-left: 3px solid var(--mm-borda); overflow-wrap: anywhere; }
.linha-tempo p { margin: var(--mm-e1) 0 0; }
.texto-notas { white-space: pre-line; }

/* Folha "Mover etapa": cada etapa é um botão de 56 px */
.lista .etapa-opcao { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
.dialogo select, .dialogo textarea { width: 100%; }
.dialogo .campo select { min-height: 48px; }
.dialogo input[type="datetime-local"] { min-width: 0; }


@media (min-width: 600px) {
  .dado-crm dt { min-width: 130px; }
}