/* Page styles for /centralizador: the inbox illustration and the price cards.
   Everything else comes from /styles.css. */

/* ── Inbox illustration ───────────────────────────────────────────────────── */

/* Outer 24px, 12px gap, so the rows take 12px. */
.inbox {
  display: grid;
  gap: var(--space-75);
  max-width: 30rem;
  padding: var(--space-100);
}
.inbox__head {
  display: flex;
  align-items: center;
  gap: var(--space-75);
  padding: var(--space-75) var(--space-75) var(--space-50);
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}
.inbox__tag {
  margin-left: auto;
  color: var(--text-muted);
  font-weight: 500;
}
.inbox__list {
  display: grid;
  gap: var(--space-75);
}
.inbox__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-100);
  padding: var(--space-100);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
}
.inbox__avatar {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--surface-hover);
  color: var(--text-soft);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}
.inbox__who {
  display: grid;
  min-width: 0;
}
.inbox__name {
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}
.inbox__text {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox__agent {
  padding: var(--space-25) var(--space-75);
  border-radius: var(--radius-full);
  background: var(--surface-hover);
  color: var(--text-soft);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}
.inbox__agent--open {
  background: var(--accent);
  color: var(--accent-ink);
}
.inbox__reply {
  display: grid;
  gap: var(--space-50);
  padding: var(--space-100);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  color: var(--text-soft);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.inbox__by {
  color: var(--accent);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

@media (min-width: 64rem) {
  .inbox {
    grid-area: 1 / 2;
    max-width: none;
  }
}

/* ── Side cards ───────────────────────────────────────────────────────────── */

.side-list {
  margin-top: var(--space-200);
}
.side-note {
  margin-top: var(--space-300);
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.side-cta {
  margin-top: var(--space-200);
}

/* ── Price ────────────────────────────────────────────────────────────────── */

.extras {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-300);
  margin-top: var(--space-400);
}
.extras div {
  position: relative;
  display: grid;
  gap: var(--space-25);
  padding-top: var(--space-200);
}
/* A drawn rule, not a border: the rows are not cards. */
.extras div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--line);
}
.extras dt {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.extras dd {
  color: var(--text);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

@media (min-width: 48rem) {
  .extras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}