/* Tarefas e respostas rápidas. Usa os tokens do app.css (Ultramar, Marfim), sem cor nova. */

/* ---------- tarefas: tela ---------- */
.tarefas-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.tarefas-filtros select.entrada { min-height: 36px; font-size: 14px; width: auto; }
.tarefas-filtros .busca input { width: 220px; min-height: 36px; }
.abas.abas-largas { max-width: 520px; margin-bottom: 16px; }
.abas button .num { margin-left: 4px; }
.abas button.tem-atraso .num { color: var(--perigo); font-weight: 800; }

.tarefas-lista { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: var(--raio-md); background: var(--superficie); overflow: hidden; }
.tarefa { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 12px 16px; border-top: 1px solid var(--linha); border-left: 4px solid transparent; }
.tarefa:first-child { border-top: 0; }
.tarefa.atrasada { border-left-color: var(--perigo); background: var(--perigo-fundo); }
.tarefa.feita .tarefa-titulo { text-decoration: line-through; color: var(--texto-tenue); }
.tarefa-check { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--linha-forte); background: var(--fundo); color: transparent; display: grid; place-items: center; cursor: pointer; padding: 0; transition: border-color .15s, background-color .15s, color .15s; }
.tarefa-check:hover:not(:disabled) { border-color: var(--ok); color: var(--ok); }
.tarefa.feita .tarefa-check { background: var(--ok-fundo); border-color: var(--ok); color: var(--ok); }
.tarefa-check .icone { width: 20px; height: 20px; }
.tarefa-check:disabled { cursor: not-allowed; opacity: .5; }
.tarefa-corpo { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tarefa-titulo { font-weight: 700; overflow-wrap: anywhere; }
.tarefa-desc { font-size: 14px; color: var(--texto-fraco); white-space: pre-wrap; overflow-wrap: anywhere; }
.tarefa-meta { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--texto-tenue); }
.tarefa-meta a { color: var(--destaque); font-weight: 600; text-decoration: none; }
.tarefa-meta a:hover { text-decoration: underline; }
.tarefa-acoes { display: flex; gap: 4px; align-items: center; }

/* ---------- tarefas: bloco no cartão do lead e na conversa ---------- */
.bloco-tarefas { display: flex; flex-direction: column; gap: 8px; }
.bloco-tarefas-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bloco-tarefas-cab h3 { margin: 0; }
.tarefas-mini { display: flex; flex-direction: column; gap: 4px; }
.tarefa-mini { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 8px; align-items: start; padding: 6px 8px; border: 1px solid var(--linha); background: var(--fundo); border-radius: var(--raio-sm); }
.tarefa-mini.atrasada { border-color: var(--perigo); background: var(--perigo-fundo); }
.tarefa-mini.feita .tarefa-mini-titulo { text-decoration: line-through; color: var(--texto-tenue); }
.tarefa-mini .tarefa-check { width: 24px; height: 24px; border-width: 2px; }
.tarefa-mini .tarefa-check .icone { width: 14px; height: 14px; }
.tarefa-mini-titulo { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; font-family: inherit; }
.tarefa-mini-titulo:hover { text-decoration: underline; }
.tarefa-mini-meta { grid-column: 2; font-size: 12px; color: var(--texto-tenue); }
.tarefa-mini.atrasada .tarefa-mini-meta { color: var(--perigo); font-weight: 700; }

/* ---------- respostas rápidas: lista do menu "/" na caixa de resposta ---------- */
.caixa-resposta { position: relative; }
.caixa-resposta .campo-resposta { position: relative; flex: 1; display: flex; min-width: 0; }
.caixa-resposta .campo-resposta textarea { width: 100%; }
.menu-rapidas { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 20; max-height: min(320px, 50vh); overflow-y: auto; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio-md); box-shadow: 0 8px 24px rgba(16, 24, 48, 0.18); padding: 4px; }
.menu-rapidas[hidden] { display: none; }
.rapida-opcao { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 8px 10px; border-radius: var(--raio-sm); cursor: pointer; align-items: baseline; }
.rapida-opcao[aria-selected="true"] { background: var(--destaque-suave); outline: 1px solid var(--destaque); }
.rapida-opcao .atalho { font-weight: 800; color: var(--destaque); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.rapida-opcao .titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rapida-opcao .previa { grid-column: 2; font-size: 13px; color: var(--texto-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-rapidas-vazio { padding: 10px; font-size: 13px; color: var(--texto-tenue); }
.menu-rapidas-rodape { padding: 6px 10px 2px; font-size: 12px; color: var(--texto-tenue); border-top: 1px solid var(--linha); margin-top: 4px; }
.btn-rapidas { flex: none; }

/* ---------- respostas rápidas: tela de gerenciar ---------- */
.rapidas-lista { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: var(--raio-md); background: var(--superficie); overflow: hidden; }
.rapida { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 16px; border-top: 1px solid var(--linha); align-items: start; }
.rapida:first-child { border-top: 0; }
.rapida.inativa .rapida-texto, .rapida.inativa .rapida-titulo { opacity: .6; }
.rapida-cab { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rapida-atalho { font-weight: 800; color: var(--destaque); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.rapida-titulo { font-weight: 700; }
.rapida-texto { grid-column: 1; font-size: 14px; color: var(--texto-fraco); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rapida-acoes { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.variaveis-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.variaveis-chips button { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.previa-rapida { white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px 12px; border: 1px dashed var(--linha-forte); border-radius: var(--raio-sm); background: var(--fundo); font-size: 14px; min-height: 44px; }

@media (max-width: 820px) {
  .tarefa { grid-template-columns: 36px minmax(0, 1fr); padding: 12px; }
  .tarefa-acoes { grid-column: 2; }
  .tarefas-filtros .busca input { width: 100%; }
  .tarefas-filtros .busca { flex: 1 1 100%; }
  .rapida { grid-template-columns: minmax(0, 1fr); }
  .rapida-acoes { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}

/* Campo de data e hora no mesmo estilo dos outros campos. */
.campo input[type="datetime-local"] { width: 100%; min-height: 40px; padding: 8px 12px; background: var(--superficie); color: var(--texto); border: 1px solid var(--linha-forte); border-radius: var(--raio-sm); font-size: 15px; line-height: 1.4; font-family: inherit; }
.campo input[type="datetime-local"]:focus { outline: 2px solid var(--foco); outline-offset: 0; border-color: var(--foco); }
.prazos-rapidos { display: flex; gap: 6px; flex-wrap: wrap; }