/* H6a · Documentos del viaje: cada documento es un sobre con su tira perforada; «lo ve el cliente» le pone un sello. */
.documentos { display: grid; gap: 14px; max-width: 880px; }
.documentos__viaje { font: 500 13px var(--letra-codigo); color: var(--gris); letter-spacing: .04em; }
.documentos__texto { color: var(--gris); max-width: 60ch; }

.documentos__zona {
  display: grid; gap: 6px; place-items: center; text-align: center; padding: 22px 16px;
  border: 1.5px dashed var(--borde-fuerte); border-radius: var(--radio); background: var(--hoja-2);
  transition: border-color var(--rapido), background var(--rapido), transform var(--rapido);
}
.documentos__zona--encima { border-color: var(--oxido); background: var(--hoja); transform: translateY(-2px); }
.documentos__tipos { font: 500 12px var(--letra-codigo); color: var(--gris); }
.documentos__estado { font-size: 14px; color: var(--verde); }

.documentos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.documentos__sobre {
  position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 10px 14px; padding: 16px 18px 16px 26px;
  border-radius: var(--radio); box-shadow: var(--sombra);
  /* La tira perforada del sobre: agujeros del color del papel sobre la hoja. */
  background: radial-gradient(circle at 9px 8px, var(--papel) 3.5px, transparent 4px) left top / 18px 16px repeat-y, var(--hoja);
}
.documentos__sigla {
  grid-row: span 2; align-self: start; display: grid; place-items: center; width: 52px; height: 64px;
  border: 1.5px solid var(--tinta); border-radius: 4px; font: 600 12px var(--letra-codigo); color: var(--tinta);
}
.documentos__nombre { font-weight: 600; overflow-wrap: anywhere; }
.documentos__meta { font: 500 12px var(--letra-codigo); color: var(--gris); }
.documentos__campos { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; }
.documentos__campos .campo { min-width: 150px; }
.documentos__casilla { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; font-size: 14px; }
.documentos__botones { grid-column: 2; display: flex; gap: 18px; align-items: center; min-height: 44px; }
.documentos__sobre--publico::after {
  content: attr(data-sello); position: absolute; top: 10px; right: 12px; padding: 3px 10px;
  border: 2px solid var(--verde); border-radius: 6px; color: var(--verde);
  font: 700 11px var(--letra-texto); letter-spacing: .14em; text-transform: uppercase;
  transform: rotate(-6deg); animation: sellar .45s cubic-bezier(.2, .9, .25, 1.25) both;
}

.documentos__vacio { display: grid; gap: 8px; justify-items: start; }
.documentos__dibujo { width: 120px; height: 80px; fill: none; stroke: var(--laton); stroke-width: 2; stroke-linejoin: round; }
.documentos__espacio { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font: 500 12px var(--letra-codigo); color: var(--gris); }
.documentos__espacio meter { width: min(320px, 100%); height: 10px; }

@media (max-width: 600px) {
  .documentos__sobre { grid-template-columns: 1fr; }
  .documentos__sigla { grid-row: auto; width: 44px; height: 52px; }
  .documentos__campos, .documentos__botones { grid-column: 1; }
  .documentos__campos .campo { min-width: 0; width: 100%; }
}