/* Usaremos Tailwind CSS directamente desde el CDN en el HTML para simplicidad,
   pero aquí podrías añadir estilos personalizados si lo necesitas.
   Este archivo está aquí para mantener la estructura del proyecto. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

.card {
  background-color: white;
  padding: 2.5rem;
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  max-width: 500px;
  width: 100%;
  text-align: center;
}

.card-header {
  margin-bottom: 2rem;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.step {
  text-align: left;
}

.step-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
}

.textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #d1d5db;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-size: 0.9rem;
}

.textarea:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

.dropzone {
  border: 2px dashed #d1d5db;
  border-radius: 1rem;
  padding: 2rem;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.dropzone.dragover {
  border-color: #4f46e5;
  background-color: #eef2ff;
}

.dropzone.has-file {
  border-color: #10b981;
  background-color: #f0fdf4;
}

.btn-primary {
  background-color: #4f46e5;
  color: white;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: background-color 0.2s, transform 0.1s;
}

.btn-primary:hover {
  background-color: #4338ca;
}

.btn-primary:active {
    transform: scale(0.98);
}

.status-area {
  margin-top: 1rem;
}

.progress-bar-container {
    width: 100%;
    background-color: #e5e7eb;
    border-radius: 9999px;
    height: 0.75rem;
    overflow: hidden;
}

.progress-bar {
    background-color: #34d399;
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease-in-out;
}

.status-text {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: #4b5563;
}

.btn-download {
  display: inline-block;
  margin-top: 1rem;
  background-color: #10b981;
  color: white;
  font-weight: 500;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background-color 0.2s;
}

.btn-download:hover {
  background-color: #059669;
}

/* Ocultar elemento de input de archivo por defecto */
.hidden {
  display: none;
}