/* Live recreation of the proposals pipeline screen. It replaces the
   screen-propuestas screenshot with the same layout, labels, and data as
   DOM, so the panel renders crisp and propuestas-demo.js can run a short
   working sequence through it (a proposal gets accepted, a new draft
   appears).

   Scaling follows the hero panel's pattern exactly: the mock is laid out
   once at its fixed 1060px design width and the frame scales that finished
   layout proportionally — it never reflows. The scale factor is
   frame-width ÷ 1060 via tan(atan2()), CSS's way of dividing two lengths.

   The mock's natural height is pinned at 560px by an explicit height, so
   it is identical in every animation phase and in both languages. Columns
   clamp their card lists (fixed height + overflow hidden), so a card
   arriving in a column pushes the last one below the fold instead of
   growing the panel — the same clamp inicio.css uses for the attention
   card.

   The whole mock is decorative (aria-hidden, described by .pr-sr): 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. */

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

.pr-frame {
  /* The frame's height IS the scaled mock's height. The mock's height is
     an explicit 560px, so this ratio is exact by construction. */
  aspect-ratio: 1060 / 560;
  container-type: inline-size;
  overflow: hidden;
  background: #fbfbfb;
}

.propuestas-demo {
  --pr-ink: #17172a;
  --pr-mut: #6d6d80;
  --pr-dim: #9a9aa8;
  --pr-line: #ececf1;
  --pr-canvas: #fbfbfb;
  --pr-accent: #5865f2;
  --pr-green: #1c7d44;
  --pr-red: #c9333f;
  width: 1060px;
  height: 560px;
  transform-origin: top left;
  scale: tan(atan2(100cqw, 1060px));
  display: flex;
  background: var(--pr-canvas);
  color: var(--pr-ink);
  line-height: 1.35;
  cursor: default;
  user-select: none;
}

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

/* The mock is laid out on its own grid; user-agent paragraph margins have
   no place in it. :where() keeps the reset at zero specificity so any
   component rule below can set its own margins. */
:where(.propuestas-demo p) {
  margin: 0;
}

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

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

.pr-brand {
  padding: 2px 8px 10px;
}

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

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

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

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

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

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

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

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

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

.pr-user .pr-ava {
  width: 24px;
  height: 24px;
  font-size: 9px;
}

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

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

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

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

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

.pr-ava.is-em { background: #23233c; }
.pr-ava.is-ai { background: #67991e; }
.pr-ava.is-lu { background: #d0458f; }
.pr-ava.is-pi { background: #a8d4f5; }
.pr-ava.is-hi { background: #d1a3ef; }
.pr-ava.is-ki { background: #cba4f1; }
.pr-ava.is-we { background: #a6e8c4; }
.pr-ava.is-di { background: #d9403e; }
.pr-ava.is-en { background: #2fb3a4; }

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

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

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

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

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

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

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

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

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

.pr-bell {
  position: relative;
}

.pr-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;
}

/* ---------- body ---------- */

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

.propuestas-demo.is-reset .pr-body {
  opacity: 0.3;
}

.pr-headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.pr-new-btn {
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--pr-accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

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

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

.pr-kpi {
  padding: 10px 14px;
}

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

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

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

/* ---------- board card ---------- */

.pr-boardwrap {
  margin-top: 10px;
}

.pr-toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--pr-line);
}

.pr-tool-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #eef0fd;
  color: #5661d6;
}

.pr-tool-icon svg {
  width: 13px;
  height: 13px;
}

.pr-tool-title {
  font-size: 12.5px;
  font-weight: 700;
}

.pr-tool-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 170px;
  margin-left: auto;
  padding: 4px 9px;
  border: 1px solid var(--pr-line);
  border-radius: 8px;
  background: #f9f9fb;
  color: var(--pr-dim);
  font-size: 10.5px;
}

.pr-tool-search svg,
.pr-select svg {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
}

.pr-tool-search > span,
.pr-select > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pr-select {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 128px;
  padding: 4px 9px;
  border: 1px solid var(--pr-line);
  border-radius: 8px;
  background: #f9f9fb;
  color: var(--pr-mut);
  font-size: 10.5px;
  font-weight: 500;
}

.pr-select svg {
  margin-left: auto;
  color: var(--pr-dim);
}

.pr-seg {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--pr-line);
  border-radius: 8px;
  background: #f2f2f6;
  font-size: 10px;
  font-weight: 600;
}

/* Direct children only: a bare `span` here would also match the .es/.en
   spans inside and pad the hidden language pair twice. */
.pr-seg > span {
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--pr-mut);
  white-space: nowrap;
}

.pr-seg .is-on {
  background: #fff;
  box-shadow: 0 1px 3px rgb(14 14 26 / 10%);
  color: var(--pr-ink);
  font-weight: 700;
}

.pr-dl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--pr-line);
  border-radius: 7px;
  background: #fff;
  color: var(--pr-mut);
}

.pr-dl svg {
  width: 12px;
  height: 12px;
}

/* ---------- board ---------- */

.pr-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

/* The frame's ratio promises the mock never changes outer size — the image
   semantics the scaling is built on. A card arriving in a column would grow
   it, so every column is clamped at the board's base height and clips: the
   newcomer pushes the last card below the fold, like a list with more
   content than fits. */
.pr-col {
  height: 292px;
  padding: 8px;
  border: 1px solid #efeff3;
  border-radius: 10px;
  background: #f7f7f8;
  overflow: hidden;
}

.pr-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.pr-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

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

.pr-chip.is-borrador { background: #ececef; color: #52525f; }
.pr-chip.is-enviada { background: #dcecfb; color: #2b62d9; }
.pr-chip.is-aceptada { background: #d7f2e1; color: var(--pr-green); }
.pr-chip.is-rechazada { background: #fbdfd9; color: var(--pr-red); }
.pr-chip.is-vencida { background: #fbe8c9; color: #a16a1b; }

.pr-col-count {
  color: var(--pr-mut);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pr-col-sum {
  margin: 5px 2px 8px;
  color: var(--pr-mut);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pr-kcard {
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px solid var(--pr-line);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(14 14 26 / 4%);
}

.pr-kcard:first-of-type {
  margin-top: 0;
}

.pr-kcard-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
}

.pr-kcard-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.pr-kclient {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--pr-mut);
  font-size: 10px;
}

/* The amount never truncates — the client name absorbs the squeeze. */
.pr-kmoney {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- staged cards ---------- */

/* The accepted proposal exists twice: once in Enviada (base state) and once
   at the top of Aceptada (hidden until the move). One root class swaps the
   two, so the card cannot half-exist. Entrances animate transform/opacity
   only. */
.pr-kcard.is-flash {
  animation: pr-ping 0.9s ease-out;
}

.pr-kcard.is-fading {
  opacity: 0;
  transition: opacity 0.35s ease-in;
}

.pr-card-accepted {
  display: none;
}

.propuestas-demo.has-accept .pr-card-sent {
  display: none;
}

.propuestas-demo.has-accept .pr-card-accepted {
  display: block;
  animation: pr-in 0.32s ease-out;
}

.pr-card-draft {
  display: none;
}

.propuestas-demo.has-draft .pr-card-draft {
  display: block;
  animation: pr-in 0.32s ease-out;
}

.propuestas-demo.has-accept .pr-card-accepted .pr-kcard-title,
.propuestas-demo.has-draft .pr-card-draft .pr-kcard-title {
  animation: pr-settle 1.4s ease-out;
}

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

.pr-toast {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  gap: 9px;
  width: 270px;
  padding: 10px 12px;
  border: 1px solid var(--pr-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;
}

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

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

.pr-toast-dot.is-green { background: #27a25c; }
.pr-toast-dot.is-blue { background: #3f6df6; }

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

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

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

/* Transforms are ignored on inline boxes, so everything pr-pop scales is
   promoted to inline-block. */
.pr-kpi-value > span,
.pr-col-count,
.pr-badge {
  display: inline-block;
}

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

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

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

@keyframes pr-ping {
  0% { box-shadow: 0 0 0 0 rgb(88 101 242 / 45%); }
  100% { box-shadow: 0 0 0 9px rgb(88 101 242 / 0%); }
}

@keyframes pr-settle {
  0%, 60% { color: var(--pr-accent); }
  100% { color: var(--pr-ink); }
}