/* Hoja de encargo: el objeto central de la marca.
   Papel blanco pautado cada 32px (--line), filetes finos, cifras tabulares
   y la banda Azul Duoris al pie, la misma de las tarjetas de visita. */

.sheet {
  position: relative;
  isolation: isolate;
  padding: calc(var(--u) * 4) calc(var(--u) * 4) 0;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--line) - 1px),
    rgb(14 26 58 / 0.045) calc(var(--line) - 1px) var(--line)
  );
  background-position: 0 calc(var(--u) * 2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sheet);
  color: var(--ink);
  overflow: hidden;
}

.sheet::after {
  content: '';
  display: block;
  height: 6px;
  margin-inline: calc(var(--u) * -4);
  background: var(--duoris);
}

.sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
  padding-bottom: calc(var(--u) * 2.5);
  border-bottom: 1.5px solid var(--noche);
}

.sheet__brand {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.25);
}

.sheet__brand img {
  width: 1.75rem;
  height: 1.75rem;
}

.sheet__title {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
}

.sheet__title span {
  display: block;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0.08em;
}

.sheet__meta {
  display: grid;
  gap: calc(var(--u) * 0.25);
  text-align: right;
  font-size: var(--fs-micro);
  line-height: 1.5;
}

.sheet__meta div {
  display: flex;
  justify-content: flex-end;
  gap: var(--u);
}

.sheet__meta dt {
  color: var(--ink-3);
}

.sheet__meta dd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Tabla de partidas */
.sheet__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.sheet__table th {
  padding: calc(var(--u) * 1.75) 0 var(--u);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.sheet__table td {
  padding: calc(var(--u) * 1.75) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.sheet__table th:first-child,
.sheet__table td:first-child {
  width: 3rem;
  font-variant-numeric: tabular-nums;
  color: var(--duoris);
  font-weight: 600;
}

.sheet__table th:last-child,
.sheet__table td:last-child {
  text-align: right;
  white-space: nowrap;
  padding-left: calc(var(--u) * 2);
}

/* Filete conector Azul Duoris: une las partidas 01 → 02 → 03 → total,
   pasando bajo cada número de la columna PART. */
.sheet--wired tbody td:first-child {
  position: relative;
}

.sheet--wired tbody td:first-child::after {
  content: '';
  position: absolute;
  left: 0.55em;
  top: calc(var(--u) * 1.75 + 1.6em);
  bottom: -1px;
  width: 1.5px;
  background: var(--duoris);
}

.sheet--wired .sheet__total {
  position: relative;
}

.sheet--wired .sheet__total::before {
  content: '';
  position: absolute;
  left: 0.55em;
  top: 0;
  height: calc(var(--u) * 2.4);
  width: 1.5px;
  background: var(--duoris);
}

.sheet--wired .sheet__total::after {
  content: '';
  position: absolute;
  left: calc(0.55em - 3px);
  top: calc(var(--u) * 2.4);
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  background: var(--duoris);
}

.sheet--wired .sheet__total span:first-child {
  padding-left: 3rem;
}

.sheet__concept strong {
  display: block;
  font-weight: 600;
}

.sheet__concept span {
  display: block;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.sheet__amount {
  color: var(--ink-2);
  font-size: var(--fs-small);
  font-weight: 500;
}

.sheet__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 2) 0;
  font-weight: 600;
}

.sheet__total span:last-child {
  color: var(--duoris);
}

/* Firmas */
.sheet__signs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 3);
  /* Hueco de firma: deja sitio al sello para que no pise el total */
  padding: calc(var(--u) * 6) 0 calc(var(--u) * 3.5);
}

.sheet__sign {
  padding-top: var(--u);
  border-top: 1px solid var(--noche);
  font-size: var(--fs-small);
  line-height: 1.35;
}

.sheet__sign strong {
  display: block;
  font-weight: 600;
}

.sheet__sign span {
  color: var(--ink-3);
  font-size: var(--fs-micro);
}

.sheet__seal {
  --seal-size: clamp(5.5rem, 4rem + 4vw, 7.5rem);
  position: absolute;
  right: calc(var(--u) * 1.5);
  bottom: calc(var(--u) * 1.5);
  z-index: 1;
}

/* Escritura de líneas: cada fila se «teclea» de izquierda a derecha.
   Solo con JS + movimiento permitido; por defecto todo es visible. */
.js-motion .sheet [data-type] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 640ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 140ms + 200ms);
}

.js-motion .sheet.is-typed [data-type] {
  clip-path: inset(0 0 0 0);
}

.js-motion .sheet .sheet__seal {
  opacity: 0;
}

.js-motion .sheet .sheet__seal.is-stamping {
  opacity: 1;
}

/* En móvil no caben dos firmas y el sello en la misma fila: las firmas se
   apilan y dejan a su derecha el hueco del sello (88px + aire). */
@media (max-width: 40rem) {
  .sheet__signs {
    grid-template-columns: 1fr;
    gap: calc(var(--u) * 2);
    padding-right: calc(var(--u) * 12);
  }
}

@media (max-width: 30rem) {
  .sheet {
    padding: calc(var(--u) * 3) calc(var(--u) * 2.5) 0;
  }

  .sheet::after {
    margin-inline: calc(var(--u) * -2.5);
  }

  .sheet__signs {
    gap: calc(var(--u) * 2);
  }

  .sheet__head {
    flex-direction: column;
    gap: calc(var(--u) * 1.5);
  }

  .sheet__meta {
    text-align: left;
  }

  .sheet__meta div {
    justify-content: flex-start;
  }
}