.agenda-kicker {
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.1em;
}
.agenda-between,
.agenda-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.agenda-intro,
.agenda-metrics,
.agenda-cards {
  margin-block-end: 20px;
}
.agenda-intro h2,
.agenda-intro p {
  margin-block: 0 5px;
}
.agenda-metrics,
.agenda-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.agenda-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.agenda-metrics strong,
.agenda-metrics span {
  display: block;
}
.agenda-metrics strong,
.agenda-date,
.agenda-price {
  color: var(--accent);
  font-size: 26px;
  font-weight: 700;
}
.agenda-metrics span,
.agenda-date small,
.agenda-price small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
.agenda-date small {
  margin-inline-start: 8px;
}
.agenda-appointment,
.agenda-product {
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}
.agenda-appointment h3,
.agenda-product h3 {
  margin-block: 18px 10px;
}
.agenda-appointment > .row,
.agenda-product > .row {
  margin-block-start: auto;
}
.agenda-cancelled {
  border-style: dashed;
}
.agenda-note,
.agenda-empty,
.agenda-total,
.agenda-bubble {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}
.agenda-note svg {
  vertical-align: middle;
  margin-inline-end: 5px;
}
.agenda-empty {
  color: var(--muted);
  border-style: dashed;
}
.agenda-product-art {
  min-height: 112px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  color: var(--accent);
  margin-block-end: 14px;
}
.agenda-product-art svg {
  width: 34px;
  height: 34px;
}
.agenda-price {
  margin-block: 0;
}
.agenda-total strong,
.agenda-total output {
  color: var(--accent);
  font-size: 22px;
  font-weight: 700;
}
.agenda-presencial {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.agenda-presencial .row {
  justify-content: center;
  margin-block-start: 8px;
}
.agenda-qr {
  width: 166px;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 2px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.agenda-qr .filled {
  background: #28364b;
}
.agenda-orb {
  display: grid;
  place-items: center;
  width: 112px;
  aspect-ratio: 1;
  border-radius: 40%;
  background: var(--soft);
  color: var(--accent);
  box-shadow:
    0 0 0 9px var(--surface),
    0 0 0 10px var(--line);
  font-size: 44px;
  font-weight: 750;
  margin-block: 24px 8px;
}
.agenda-wave,
.agenda-ratings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.agenda-wave i {
  width: 4px;
  border-radius: 4px;
  background: var(--accent);
  opacity: 0.5;
}
.agenda-kiosk {
  text-align: center;
}
.agenda-bubble {
  max-width: 90%;
  text-align: start;
}
.agenda-bubble-out {
  margin-inline-start: auto;
  background: var(--surface);
}
@media (max-width: 1150px) {
  .agenda-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .agenda-intro {
    align-items: flex-start;
    flex-direction: column;
  }
  .agenda-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agenda-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}