.drop-zone {
  position: relative;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

/* Keep the whole empty drop area clickable without changing the existing layout. */
.drop-zone input[type="file"] {
  display: block;
  width: min(430px, 100%);
  min-height: 40px;
  margin-top: 11px;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink-soft);
  background: #fff;
  font-size: 11px;
  cursor: pointer;
}

.drop-zone input[type="file"]:invalid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.drop-zone input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  color: var(--brand-dark);
  background: var(--brand-soft);
  font-weight: 700;
  cursor: pointer;
}

/* Selected state: clear visual acknowledgement that the file is ready. */
.drop-zone:has(input[type="file"]:valid) {
  grid-template-columns: 46px minmax(0, 1fr);
  min-height: 116px;
  align-items: center;
  place-items: initial;
  column-gap: 14px;
  padding: 18px 20px;
  border-style: solid;
  border-color: #83bdb2;
  background: linear-gradient(110deg, #effaf7, #f8fcfa);
  box-shadow: inset 0 0 0 1px rgba(8,123,109,.035);
  text-align: left;
}

.drop-zone:has(input[type="file"]:valid) > svg {
  grid-row: 1 / span 2;
  display: block;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 10px;
  border-radius: 11px;
  color: #fff;
  background: var(--brand);
}

.drop-zone:has(input[type="file"]:valid) > span {
  grid-column: 2;
  min-width: 0;
  padding-right: 68px;
}

.drop-zone:has(input[type="file"]:valid) > span strong {
  font-size: 0;
}

.drop-zone:has(input[type="file"]:valid) > span strong::after {
  color: var(--brand-dark);
  content: "Documento seleccionado";
  font-size: 12px;
  font-weight: 700;
}

.drop-zone:has(input[type="file"]:valid) > span small {
  margin-top: 3px;
  color: var(--ink-faint);
}

.drop-zone:has(input[type="file"]:valid) > input[type="file"] {
  grid-column: 2;
  width: 100%;
  margin-top: 4px;
  overflow: hidden;
  border-color: #c7ddd8;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drop-zone:has(input[type="file"]:valid)::after {
  position: absolute;
  top: 15px;
  right: 16px;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--brand-dark);
  background: #dcefe9;
  content: "✓ Pronto";
  font-size: 10px;
  font-weight: 800;
}

.drop-zone:has(input[type="file"]:valid):hover {
  border-color: var(--brand);
  background: #edf9f6;
}

@media (max-width: 620px) {
  .drop-zone:has(input[type="file"]:valid) {
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 11px;
    padding: 16px;
  }

  .drop-zone:has(input[type="file"]:valid) > svg {
    width: 36px;
    height: 36px;
    padding: 8px;
  }

  .drop-zone:has(input[type="file"]:valid) > span {
    padding-right: 0;
  }

  .drop-zone:has(input[type="file"]:valid)::after {
    position: static;
    grid-column: 2;
    width: fit-content;
    margin-top: 5px;
  }

  .drop-zone:has(input[type="file"]:valid) > input[type="file"] {
    grid-column: 1 / -1;
  }
}