/* Ajustes de plataforma: selects, autofill y modales en móvil. */
select option {
  background-color: hsl(222, 25%, 12%);
  color: hsl(210, 20%, 98%);
}

select option:disabled {
  color: hsl(218, 15%, 45%);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px hsl(222, 20%, 10%) inset;
  -webkit-text-fill-color: hsl(210, 20%, 98%);
  caret-color: hsl(210, 20%, 98%);
  transition: background-color 99999s ease-in-out 0s;
}

html, body {
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
}

.modal-overlay {
  padding: 12px;
}

.modal-card {
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.modal-card .modal-actions {
  position: sticky;
  bottom: -24px;
  margin: 16px -24px -24px;
  padding: 12px 24px 16px;
  background: transparent;
  border-top: none;
  z-index: 10;
}

@media (max-width: 700px) {
  .btn-primary, .btn-secondary, .btn-success, .btn-danger {
    min-height: 44px;
  }

  .btn-icon {
    min-width: 42px;
    min-height: 42px;
  }

  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal-card {
    max-width: 100%;
    width: 100%;
    max-height: 94vh;
    max-height: 94dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .app-content {
    padding-bottom: 90px;
  }
}

.result-photo-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.result-photo {
  max-width: 100%;
  max-height: 220px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  object-fit: contain;
  background: hsl(222, 20%, 8%);
}