/* Live recreation of the product panel shown in the hero. It replaces a 2048px
   retina screenshot that was being squeezed into a 1060px slot — every glyph
   painted at half size, which is why the panel could not be read. As DOM the
   panel renders crisp at desktop, and inicio.js runs a working day through it.

   Scaling: the mock shrinks PROPORTIONALLY, like the image it replaces — it
   never reflows. Sizing a live layout in container units was tried first and
   rejected: every width recomputes line breaks, so a label that wraps at one
   size and not another quietly rearranges the picture. Instead the panel is
   laid out exactly once, at its fixed 1060px design width, and the frame
   scales that finished layout as a transform — the same semantics as the
   image it replaced, so divergence between sizes is impossible by
   construction. The scale factor is frame-width ÷ 1060, obtained in pure CSS
   via tan(atan2(length, length)), which is how CSS divides two lengths into
   a number.

   The whole mock is decorative (aria-hidden, described by .pd-sr), so nothing
   inside is focusable and its type may run smaller than the page's body-text
   floor: it is an illustration of a UI, not UI. */

.pd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pd-frame {
  /* The aspect ratio is the design's natural size; the frame's height IS the
     scaled mock's height, so the transform below never leaves a gap or gets
     cropped. If the mock's content changes, re-measure and update both the
     ratio and any checks that depend on it. */
  aspect-ratio: 1060 / 773;
  container-type: inline-size;
  overflow: hidden;
  background: #f7f7fa;
}

.panel-demo {
  --pd-ink: #17172a;
  --pd-mut: #6d6d80;
  --pd-dim: #9a9aa8;
  --pd-line: #ececf1;
  --pd-canvas: #f7f7fa;
  --pd-blue: #3f6df6;
  --pd-red: #c9333f;
  --pd-red-soft: #fbe7e9;
  --pd-green: #1c7d44;
  --pd-green-soft: #e5f6ec;
  width: 1060px;
  transform-origin: top left;
  scale: tan(atan2(100cqw, 1060px));
  display: flex;
  background: var(--pd-canvas);
  color: var(--pd-ink);
  line-height: 1.35;
  cursor: default;
  user-select: none;
}

.panel-demo * {
  min-width: 0;
}

/* ---------- sidebar ---------- */

.pd-side {
  display: flex;
  flex-direction: column;
  flex: 0 0 200px;
  padding: 14px 10px 12px;
  border-right: 1px solid var(--pd-line);
  background: #f9f9fb;
  font-size: 13px;
}

.pd-brand {
  padding: 2px 8px 12px;
}

.pd-brand img {
  display: block;
  width: auto;
  height: 20px;
}

.pd-label {
  margin: 10px 8px 4px;
  color: var(--pd-dim);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--pd-mut);
  font-size: 12.5px;
  font-weight: 500;
}

.pd-item svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.pd-item-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-item.is-active {
  background: #fff;
  box-shadow: 0 1px 4px rgb(14 14 26 / 8%);
  color: var(--pd-ink);
  font-weight: 600;
}

.pd-item.is-active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--pd-blue);
}

.pd-badge {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: #ececf1;
  color: var(--pd-mut);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pd-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 10px 8px 0;
  border-top: 1px solid var(--pd-line);
}

.pd-user-name {
  font-size: 12px;
  font-weight: 600;
}

.pd-user-role {
  color: var(--pd-dim);
  font-size: 10.5px;
}

.pd-chev {
  margin-left: auto;
  color: var(--pd-dim);
}

/* ---------- avatars ---------- */

.pd-ava {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pd-ava.is-em { background: #23233c; }
.pd-ava.is-ki { background: #e3455a; }
.pd-ava.is-we { background: #d9403e; }
.pd-ava.is-lu { background: #34b06f; }
.pd-ava.is-nv { background: #2fb3a4; }

/* ---------- main column ---------- */

.pd-main {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 13px;
}

.pd-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--pd-line);
  background: #fff;
}

.pd-top svg {
  width: 15px;
  height: 15px;
  color: var(--pd-dim);
}

.pd-top-title {
  font-size: 13px;
  font-weight: 700;
}

.pd-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 300px;
  padding: 5px 10px;
  border: 1px solid var(--pd-line);
  border-radius: 9px;
  background: #fff;
  color: var(--pd-dim);
  font-size: 11.5px;
}

.pd-search span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-kbd {
  margin-left: auto;
  padding: 1px 5px;
  border: 1px solid var(--pd-line);
  border-radius: 5px;
  background: #f2f2f6;
  font-size: 9.5px;
}

.pd-top-icons {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.pd-bell {
  position: relative;
}

.pd-bell-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e23c4f;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.5;
}

/* ---------- content ---------- */

.pd-body {
  padding: 18px;
  transition: opacity 0.22s ease;
}

.panel-demo.is-reset .pd-body {
  opacity: 0.3;
}

.pd-h1 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.pd-sub {
  margin-top: 2px;
  color: var(--pd-mut);
  font-size: 12px;
}

.pd-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.pd-card {
  border: 1px solid var(--pd-line);
  border-radius: 12px;
  background: #fff;
}

.pd-kpi {
  padding: 12px 14px;
}

.pd-kpi-label {
  color: var(--pd-dim);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pd-kpi-value {
  margin-top: 6px;
  font-size: 21px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pd-cur {
  margin-right: 2px;
  color: var(--pd-dim);
  font-size: 13px;
  font-weight: 600;
}

.pd-kpi-foot {
  margin-top: 5px;
  color: var(--pd-dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.pd-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.pd-stat {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 10px 20px 10px 12px;
  overflow: hidden;
}

.pd-stat svg {
  width: 14px;
  height: 14px;
  color: var(--pd-mut);
}

.pd-stat-value {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pd-delta {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--pd-green-soft);
  color: var(--pd-green);
  font-size: 9px;
  font-weight: 700;
}

.pd-stat-label {
  flex-basis: 100%;
  color: var(--pd-mut);
  font-size: 10.5px;
}

.pd-stat::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 10px;
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: #f472a0;
}

/* ---------- lists ---------- */

.pd-lists {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}

/* The frame's aspect ratio promises the mock never changes outer size — the
   image semantics the scaling is built on. The arriving ticket row would
   grow the attention card 37px and crop the whole panel's bottom edge, so
   the card is clamped at its 10-row base height instead: the new row pushes
   the last one past the clip, like a list with more content below the fold. */
.pd-lists > .pd-card:first-child {
  max-height: 370px;
  overflow: hidden;
}

.pd-list-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--pd-line);
}

.pd-list-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #eef0fd;
  color: #5661d6;
}

.pd-list-icon svg {
  width: 14px;
  height: 14px;
}

.pd-list-title {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pd-link {
  margin-left: auto;
  color: var(--pd-blue);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.pd-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-top: 1px solid #f3f3f6;
  font-size: 12px;
}

.pd-row:first-of-type {
  border-top: 0;
}

.pd-row-main {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.pd-row-tag {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--pd-dim);
  font-size: 11px;
}

.pd-row-end {
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--pd-dim);
  font-size: 11px;
  text-align: right;
}

.pd-row-end.is-late {
  color: var(--pd-red);
  font-weight: 600;
}

.pd-chip {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.pd-chip.is-urgent {
  border: 1px solid #f3b4bc;
  background: #fdf1f2;
  color: var(--pd-red);
}

.pd-chip.is-late {
  background: var(--pd-red-soft);
  color: var(--pd-red);
}

.pd-chip.is-open {
  background: #f0f0f4;
  color: var(--pd-mut);
}

/* The incoming-ticket row and its resolution are staged by inicio.js. Both
   ends are classes with explicit display so the row cannot half-exist, and
   the entrance animates transform/opacity only. */
.pd-row-extra {
  display: none;
}

.panel-demo.has-ticket .pd-row-extra {
  display: flex;
  animation: pd-in 0.32s ease-out;
}

.pd-row-extra .pd-ava {
  width: 20px;
  height: 20px;
  transform: scale(0);
  font-size: 8px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pd-row-extra.is-resolved .pd-ava {
  transform: scale(1);
}

.pd-row-extra.is-leaving {
  opacity: 0;
  transition: opacity 0.4s ease-in;
}

/* ---------- invoices ---------- */

.pd-inv-num {
  flex: 0 0 auto;
  color: var(--pd-dim);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pd-money {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pd-st {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.pd-st i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.pd-st + .pd-money {
  margin-left: 10px;
}

.pd-st-draft {
  color: #71717f;
}

.pd-st-sent {
  background: #e3ecfd;
  color: #2b62d9;
}

.pd-st-paid {
  background: var(--pd-green-soft);
  color: var(--pd-green);
}

.pd-inv[data-state='draft'] .pd-st-draft,
.pd-inv[data-state='sent'] .pd-st-sent,
.pd-inv[data-state='paid'] .pd-st-paid {
  display: inline-flex;
}

.pd-inv.is-flash {
  animation: pd-flash 1.1s ease-out;
}

/* ---------- toasts ---------- */

.pd-toast {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  gap: 9px;
  width: 270px;
  padding: 10px 12px;
  border: 1px solid var(--pd-line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 30px -12px rgb(14 14 26 / 25%);
  font-size: 11.5px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.28s ease-out, transform 0.28s ease-out;
}

.pd-toast.is-in {
  opacity: 1;
  transform: translateY(0);
}

.pd-toast-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
}

.pd-toast-dot.is-red { background: #e23c4f; }
.pd-toast-dot.is-green { background: #27a25c; }

.pd-toast b {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
}

.pd-toast small {
  display: block;
  margin-top: 1px;
  color: var(--pd-mut);
  font-size: 10.5px;
}

/* ---------- motion accents ---------- */

.pd-pop {
  animation: pd-pop 0.45s ease-out;
}

.pd-ring {
  animation: pd-ring 0.7s ease-in-out;
  transform-origin: top center;
}

@keyframes pd-in {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pd-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

@keyframes pd-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(13deg); }
  45% { transform: rotate(-11deg); }
  70% { transform: rotate(6deg); }
}

@keyframes pd-flash {
  0% { background: #eef4ff; }
  100% { background: #fff; }
}