/* /funcionalidades/propuestas/ — an accepted proposal, and the document it
   prints as. Two scenes (pantallas-escenas.js): 0 the proposal in the app,
   the resting state; 1 View document opened in a new tab, which is why the
   rail, the top bar and the address all change. */

.pn-frame[data-screen="proposals"] {
  --pr-accent: #467557;
}

/* ---------- the proposal ---------- */

.pn-frame[data-screen="proposals"] .pn-body.is-module { gap: 13px; }

.pn-frame[data-screen="proposals"] .pr-back { color: var(--pr-accent); font-size: 11px; }

.pn-frame[data-screen="proposals"] .pr-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.pn-frame[data-screen="proposals"] .pr-number {
  color: var(--ac-mut);
  font-family: var(--ac-mono);
  font-size: 11px;
  font-weight: 400;
}

.pn-frame[data-screen="proposals"] .pr-title .pn-badge { font-size: 9.5px; font-weight: 500; }
.pn-frame[data-screen="proposals"] .pr-sub { font-size: 11px; }
.pn-frame[data-screen="proposals"] .pr-sub .pr-ink { color: var(--ac-ink); }
.pn-frame[data-screen="proposals"] .pr-sub u { color: var(--pr-accent); }
.pn-frame[data-screen="proposals"] .pr-head-acts { gap: 7px; }

.pn-frame[data-screen="proposals"] .pr-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ac-line);
}

.pn-frame[data-screen="proposals"] .pr-card-icon {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 8px;
  background: #f1f1f3;
  color: var(--ac-mut);
}

.pn-frame[data-screen="proposals"] .pr-card-icon svg { width: 14px; height: 14px; }
.pn-frame[data-screen="proposals"] .pr-card-head p { font-size: 13px; font-weight: 600; }

.pn-frame[data-screen="proposals"] .pr-details {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 13px;
  padding: 14px 16px 16px;
  font-size: 11px;
}

.pn-frame[data-screen="proposals"] .pr-wide { grid-column: 1 / -1; }

.pn-frame[data-screen="proposals"] .pr-field { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }

.pn-frame[data-screen="proposals"] .pr-label { color: var(--ac-dim); font-size: 9.5px; }

.pn-frame[data-screen="proposals"] .pr-label.is-upper {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pn-frame[data-screen="proposals"] .pr-value .pn-badge { font-size: 9.5px; }

.pn-frame[data-screen="proposals"] .pr-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  align-items: start;
  gap: 13px;
}

.pn-frame[data-screen="proposals"] .pr-main,
.pn-frame[data-screen="proposals"] .pr-side {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.pn-frame[data-screen="proposals"] .pr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.pn-frame[data-screen="proposals"] .pr-table th {
  padding: 7px 13px;
  border-bottom: 1px solid var(--ac-line);
  color: var(--ac-dim);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.pn-frame[data-screen="proposals"] .pr-table td {
  padding: 9px 13px;
  border-bottom: 1px solid var(--ac-line);
  color: var(--ac-mut);
  vertical-align: top;
}

.pn-frame[data-screen="proposals"] .pr-table tr:last-child td { border-bottom: 0; }
.pn-frame[data-screen="proposals"] .pr-table th:first-child,
.pn-frame[data-screen="proposals"] .pr-table td:first-child { width: 100%; padding-left: 16px; }
.pn-frame[data-screen="proposals"] .pr-table .is-num { text-align: right; white-space: nowrap; }
.pn-frame[data-screen="proposals"] .pr-table .is-total { color: var(--ac-ink); font-weight: 500; }
.pn-frame[data-screen="proposals"] .pr-table .pr-desc { color: var(--ac-ink); }

.pn-frame[data-screen="proposals"] .pr-line { display: flex; align-items: flex-start; gap: 10px; }

.pn-frame[data-screen="proposals"] .pr-thumb {
  display: block;
  flex-shrink: 0;
  width: 51px;
  height: 51px;
  overflow: hidden;
  border: 1px solid var(--ac-line);
  border-radius: 4px;
}

.pn-frame[data-screen="proposals"] :is(.pr-thumb, .pr-doc-thumb) svg { display: block; width: 100%; height: 100%; }

.pn-frame[data-screen="proposals"] .pr-rich p + :is(p, ul) { margin-top: 3px; }
.pn-frame[data-screen="proposals"] .pr-rich b { font-weight: 600; }

.pn-frame[data-screen="proposals"] .pr-rich ul {
  margin: 3px 0 0;
  padding-left: 15px;
  list-style: disc;
}

.pn-frame[data-screen="proposals"] .pr-rich li + li { margin-top: 1px; }

.pn-frame[data-screen="proposals"] .pr-card-body { padding: 14px 16px; font-size: 11px; }

.pn-frame[data-screen="proposals"] .pr-totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  margin: 0;
  font-size: 11px;
}

.pn-frame[data-screen="proposals"] .pr-totals dt { color: var(--ac-mut); }
.pn-frame[data-screen="proposals"] .pr-totals dd { margin: 0; text-align: right; }

.pn-frame[data-screen="proposals"] .pr-totals .is-total {
  margin-top: 2px;
  padding-top: 7px;
  border-top: 1px solid var(--ac-line);
  color: var(--ac-ink);
  font-weight: 600;
}

.pn-frame[data-screen="proposals"] .pr-recipient {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 14px 16px 16px;
  font-size: 11px;
}

/* ---------- the document, in its own tab ---------- */

.pn-frame[data-screen="proposals"] .pr-print {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: none;
  overflow: hidden;
  background: #fff;
}

.pn-frame[data-screen="proposals"][data-mk-scene="1"] .pr-print { display: block; }

.pn-frame[data-screen="proposals"] .pr-print-acts {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  width: 717px;
  margin: 0 auto;
  padding: 13px 13px;
  box-sizing: border-box;
}

.pn-frame[data-screen="proposals"] .pr-doc {
  width: 717px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 32px;
  box-shadow: 0 1px 2px rgb(17 19 24 / 0.08);
  color: #171717;
  font-size: 11px;
}

.pn-frame[data-screen="proposals"] .pr-logo { display: block; height: 45px; margin-bottom: 19px; }

.pn-frame[data-screen="proposals"] .pr-doc-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 26px;
}

.pn-frame[data-screen="proposals"] .pr-doc-org { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

.pn-frame[data-screen="proposals"] .pr-doc-meta {
  margin-top: 3px;
  color: #737373;
  font-size: 9.5px;
  line-height: 1.6;
}

.pn-frame[data-screen="proposals"] .pr-doc-meta .is-strong { color: #404040; font-weight: 500; }
.pn-frame[data-screen="proposals"] .pr-doc-meta.is-dates { margin-top: 10px; }
.pn-frame[data-screen="proposals"] .pr-doc-meta b { color: #171717; font-weight: 400; }

.pn-frame[data-screen="proposals"] .pr-doc-side { justify-self: end; text-align: right; }

.pn-frame[data-screen="proposals"] .pr-doc-kicker {
  color: #a3a3a3;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.pn-frame[data-screen="proposals"] .pr-doc-kicker.is-gap { margin-top: 13px; }
.pn-frame[data-screen="proposals"] .pr-doc-title { margin-top: 3px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.pn-frame[data-screen="proposals"] .pr-doc-status { margin-top: 3px; color: #737373; font-size: 9.5px; }
.pn-frame[data-screen="proposals"] .pr-doc-client { margin-top: 3px; font-weight: 500; }

.pn-frame[data-screen="proposals"] .pr-doc-table {
  width: 100%;
  margin-top: 26px;
  border-collapse: collapse;
}

.pn-frame[data-screen="proposals"] .pr-doc-table th {
  padding: 0 6px 7px;
  border-bottom: 1px solid #d4d4d4;
  color: #a3a3a3;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: right;
  text-transform: uppercase;
}

.pn-frame[data-screen="proposals"] .pr-doc-table th:first-child { padding-left: 0; text-align: left; }
.pn-frame[data-screen="proposals"] .pr-doc-table th:last-child { padding-right: 0; }

.pn-frame[data-screen="proposals"] .pr-doc-nums td { padding: 8px 6px 0; text-align: right; }
.pn-frame[data-screen="proposals"] .pr-doc-nums td:first-child { padding-left: 0; color: #a3a3a3; font-size: 9.5px; text-align: left; }
.pn-frame[data-screen="proposals"] .pr-doc-nums td:last-child { padding-right: 0; }
.pn-frame[data-screen="proposals"] .pr-doc-nums .is-total { font-weight: 500; }

.pn-frame[data-screen="proposals"] .pr-doc-text td { padding: 3px 0 8px; border-bottom: 1px solid #f5f5f5; }

.pn-frame[data-screen="proposals"] .pr-doc-thumb {
  display: block;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  overflow: hidden;
}

.pn-frame[data-screen="proposals"] .pr-doc-sum { display: flex; justify-content: flex-end; margin-top: 19px; }
.pn-frame[data-screen="proposals"] .pr-doc-sum .pr-totals { width: 230px; }
.pn-frame[data-screen="proposals"] .pr-doc-sum .pr-totals dt { color: #737373; }
.pn-frame[data-screen="proposals"] .pr-doc-sum .pr-totals .is-total { border-top-color: #d4d4d4; color: #171717; }

/* ---------- the motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .pn-frame[data-screen="proposals"][data-mk-scene="0"] .pr-view { animation: pr-press 0.36s ease 3.3s both; }
  .pn-frame[data-screen="proposals"][data-mk-scene="1"] .pr-print { animation: pr-open 0.3s ease-out both; }
  .pn-frame[data-screen="proposals"][data-mk-scene="1"] .pr-doc { animation: pr-rise 0.4s ease-out 0.05s both; }
}

@keyframes pr-press {
  0%, 100% { transform: none; }
  45% { transform: scale(0.92); background: var(--ac-faint); }
}

@keyframes pr-open {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pr-rise {
  from { transform: translateY(10px); }
  to { transform: none; }
}