/* =========================================
   css/components/dropzone.css
   Zona de carga de archivos con estados.
========================================= */

.dropzone {
  border: 2px dashed var(--border-slate-300);
  border-radius: var(--radius-xl);
  padding: 4rem 2rem;
  text-align: center;
  background-color: var(--bg-white);
  cursor: pointer;
  transition:
    border-color var(--transition-base),
    background-color var(--transition-base),
    transform var(--transition-base);
}

.dropzone:hover {
  border-color: var(--color-blue-600);
  background-color: var(--bg-slate-50);
}

/* Estado: archivo arrastrándose encima */
.dropzone.highlight {
  border-color: var(--color-blue-600);
  background-color: var(--color-blue-50);
  transform: scale(1.02);
}

/* Estado: procesando archivo */
.dropzone.state-loading {
  border-color: var(--color-amber-500);
  background-color: var(--color-amber-50);
}

/* Estado: carga exitosa */
.dropzone.state-success {
  border-color: var(--color-green-600);
  background-color: var(--color-green-50);
}

/* --- Icono de carga --- */
.dropzone-icon {
  width: 48px;
  height: 48px;
  color: var(--color-blue-500, #3b82f6);
  margin-bottom: 0.75rem;
  opacity: 0.8;
  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.dropzone:hover .dropzone-icon,
.dropzone.highlight .dropzone-icon {
  color: var(--color-blue-600);
  transform: translateY(-2px);
  opacity: 1;
}

.dropzone.state-loading .dropzone-icon,
.dropzone.state-success .dropzone-icon {
  display: none;
}

.dropzone-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-slate-800);
  margin-bottom: 10px;
}

.dropzone-subtitle {
  color: var(--text-slate-500);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}