/* Mr. Mixology (kitchen-mixology.html): cartões das bebidas propostas, dentro da conversa do
   chat (ai-chat.css em components.css), e a janela de revisão antes de criar a ficha. */

:root {
  --mx-good: #1f9d64;
  --mx-warn: #b86e00;
  --mx-bad: #c4281f;
}

/* ---------- cartões na conversa ---------- */
.mx-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-self: stretch;
}

.mx-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--kt-hairline, rgba(60, 60, 67, 0.12));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px -10px rgba(15, 37, 71, 0.35);
}

.mx-card.is-created { background: rgba(229, 246, 238, 0.9); border-color: rgba(31, 157, 100, 0.3); }

.mx-card__name { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--kt-ink, var(--text)); }
.mx-card__meta { margin: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--kt-secondary, var(--text-muted)); }
.mx-card__desc { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--kt-ink-soft, var(--text)); }

.mx-card__numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 2px 0 0;
}

.mx-card__numbers div { padding: 6px 8px; border-radius: 10px; background: rgba(120, 120, 128, 0.07); }
.mx-card__numbers dt { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kt-secondary, var(--text-muted)); }
.mx-card__numbers dd { margin: 1px 0 0; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--kt-ink, var(--text)); }

.mx-card__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: 2px; }
.mx-card__actions .btn--primary { margin-left: auto; }
.mx-card__done { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 700; color: var(--mx-good); }

.is-good { color: var(--mx-good) !important; }
.is-warn { color: var(--mx-warn) !important; }
.is-bad { color: var(--mx-bad) !important; }

/* ---------- janela de revisão ---------- */
.mx-review { width: min(1100px, 96vw); }

.mx-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}

.mx-warning {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fdf3c4;
  color: #7a5200;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.mx-lines td { vertical-align: top; }
.mx-lines .select,
.mx-lines .input { min-width: 0; }
.mx-new-name { margin-top: 4px; }
.mx-qty { width: 84px; }
.mx-unit { width: 84px; }
.mx-purchase { display: flex; gap: 4px; }
.mx-purchase .input { width: 84px; }
.mx-purchase .select { width: 72px; }
.mx-cost { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx-muted { font-size: var(--fs-sm); color: var(--kt-secondary, var(--text-muted)); white-space: nowrap; }

.mx-lines-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.mx-totals {
  display: flex;
  gap: var(--sp-4);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--kt-secondary, var(--text-muted));
}

.mx-totals strong { margin-left: 4px; font-size: var(--fs-base); font-variant-numeric: tabular-nums; color: var(--kt-ink, var(--text)); }

@media (max-width: 760px) {
  .mx-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}